ML Dropdown

The ML Dropdown is a versatile and lightweight property editor that provides a modern selection interface with integrated search and clear functionality.

⚙️ Configuration

Configure the editor in the Umbraco Data Type settings in the following order:

• Selection Mode: Choose how you want to provide your data:
  • Items: Use the standard Umbraco "Dropdown" input configuration.
  • Simple: Enter a list of values, one per line (e.g., EN, DE, FR).
  • Enum: Enter the fully qualified name of your Enum including the namespace (e.g., MyProject.Models.Countries).
• Allow Multiple: Toggle between single-select and multi-select modes.
• Translation Prefix: Add a prefix (e.g., Country.) to automatically look up translations in the Umbraco Dictionary.
• Sort Alphabetically: If enabled, the options will be sorted A-Z based on their display labels (translated names) rather than the source order.

💻 C# Data Retrieval (Value Converter)

The ML Dropdown comes with a built-in Value Converter. Depending on your 'Allow Multiple' setting, you can retrieve the values as follows:

// 1. Single Selection
var selectedValue = content?.Value<string>("myDropdown"); 
// Example Result: "EN"

// 2. Multi Selection (if Allow Multiple is enabled)
var selectedItems = content?.Value<IEnumerable<string>>("myDropdown");
// Example Result: ["EN", "DE"]

✅ Validation

The ML Dropdown fully integrates with the Umbraco validation system:

• If marked as Mandatory, the editor will prevent saving if no option is selected.
• It displays the Custom Mandatory Message defined in your Data Type settings.
• Visual feedback is provided via a red border and an error message beneath the field.

📝 Storage Note

In the database, the value is stored as a simple string for single-select or a semicolon-separated string (e.g., EN;DE;FR) for multi-select. The Value Converter automatically handles the conversion to IEnumerable<string> for you.

✨ Features

• Live Search: Quickly filter through large lists of options.
• Auto-Focus: The search input automatically focuses when the dropdown is opened.
• Smart Positioning: The menu automatically detects screen edges and opens upwards if there isn't enough space below.