**Dropdown** Select,MultiSelect,ComboBox A dropdown is a list in which the selected item is always visible while other items are visible on demand by clicking a dropdown button. Dropdowns are typically used for forms.
**Basic**:
private List
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Prefix & Suffix**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**FitWidth**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**NoBorder**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Responsive**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Drop direction**:
>? dropDirectionItems;
protected override void OnInitialized()
{
dropDirectionItems = Enumerable.Range(1, 15)
.Select(c => new BitDropdownItem { Value = c.ToString(), Text = $"Category {c}" })
.ToArray();
}
**Clear button**:
Value: @clearValue
Values: @string.Join(',', clearValues)
private string? clearValue = "f-app";
private ICollection clearValues = new[] { "f-app", "f-ban" };
private List> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**SearchBox**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Immediate search**:
Search value: @immediateSearchValue
Search value: @debouncedSearchValue
> comboBoxItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
private List> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Validation**:
@using System.ComponentModel.DataAnnotations;
Submit
public class FormValidationDropdownModel
{
[MaxLength(2, ErrorMessage = "The property {0} have more than {1} elements")]
[MinLength(1, ErrorMessage = "The property {0} doesn't have at least {1} elements")]
public ICollection Products { get; set; } = new List();
[Required]
public string Category { get; set; }
}
private FormValidationDropdownModel validationModel = new();
private async Task HandleValidSubmit() { }
private void HandleInvalidSubmit() { }
private List> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Customization**:
@dropdown.SelectedItem?.Text
Best in the world
New Item
public class DropdownItemData
{
public string? IconName { get; set; }
}
private List> GetDataItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Items", Data = new DropdownItemData { IconName = "BulletedList2" } },
new() { Text = "Item a", Value = "A", Data = new DropdownItemData { IconName = "Memo" } },
new() { Text = "Item b", Value = "B", Data = new DropdownItemData { IconName = "Print" } },
new() { Text = "Item c", Value = "C", Data = new DropdownItemData { IconName = "ShoppingCart" } },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "More Items", Data = new DropdownItemData { IconName = "BulletedTreeList" } },
new() { Text = "Item d", Value = "D", Data = new DropdownItemData { IconName = "Train" } },
new() { Text = "Item e", Value = "E", Data = new DropdownItemData { IconName = "Repair" } },
new() { Text = "Item f", Value = "F", Data = new DropdownItemData { IconName = "Running" } }
};
**Binding**:
Selected Value: @controlledValue
Selected Values: @string.Join(",", controlledValues)
Changed Value: @changedValue
Changed Values: @string.Join(",", changedValues)
Selected Value: @selectedItem1?.Value
Selected Value: @selectedItem2?.Value
private string controlledValue = "f-app";
private IEnumerable controlledValues = ["f-app", "f-ban"];
private string? changedValue;
private IEnumerable changedValues = [];
private BitDropdownItem? selectedItem1;
private BitDropdownItem? selectedItem2;
private List> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**ComboBox**:
Value: @comboBoxValueSample1
Values: @string.Join(',', comboBoxValues1)
private string comboBoxValueSample1 = default!;
private ICollection comboBoxValues1 = [];
private List> comboBoxItems = new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Chips**:
Value: @comboBoxValueSample2
Values: @string.Join(',', comboBoxValues2)
private string comboBoxValueSample2 = default!;
private ICollection comboBoxValues2 = [];
private List> comboBoxItems = new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Dynamic ComboBox**:
Value: @comboBoxValueSample3
Value: @comboBoxValueSample4
Values: @string.Join(',', comboBoxValues3)
private string comboBoxValueSample3 = default!;
private string comboBoxValueSample4 = default!;
private ICollection comboBoxValues3 = [];
private void HandleOnDynamicAdd(BitDropdownItem item)
{
comboBoxItems.Add(item);
}
private List> comboBoxItems = new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**External Icons**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private List> GetExternalIconItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app", IconName = nameof(BitIconName.AllApps) },
new() { Text = "Banana", Value = "f-ban", IconName = nameof(BitIconName.Calculator) },
new() { Text = "Orange", Value = "f-ora", IconName = nameof(BitIconName.FavoriteStar), IsEnabled = false },
new() { Text = "Grape", Value = "f-gra", IconName = nameof(BitIconName.Edit) },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro", IconName = nameof(BitIconName.Health) },
new() { Text = "Carrot", Value = "v-car", IconName = nameof(BitIconName.Add) },
new() { Text = "Lettuce", Value = "v-let", IconName = nameof(BitIconName.ChevronDown) }
};
private List> GetExternalIconFaItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Css("fa-solid fa-apple-whole") },
new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Css("fa-solid fa-moon") },
new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Fa("solid lemon"), IsEnabled = false },
new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Css("fa-solid fa-droplet") },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Css("fa-solid fa-seedling") },
new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Css("fa-solid fa-carrot") },
new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Css("fa-solid fa-leaf") }
};
private List> GetExternalIconBiItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Bi("apple") },
new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Bi("flower1") },
new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Css("bi bi-sun"), IsEnabled = false },
new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Bi("droplet-fill") },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Bi("tree-fill") },
new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Bi("egg") },
new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Bi("flower2") }
};
**Color**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
**Style & Class**:
> GetBasicItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private List> GetStyleClassItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits", Style = "text-align: center;" },
new() { Text = "Apple", Value = "f-app", Class = "custom-fruit" },
new() { Text = "Banana", Value = "f-ban", Class = "custom-fruit" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false, Class = "custom-fruit" },
new() { Text = "Grape", Value = "f-gra", Class = "custom-fruit" },
new() { ItemType = BitDropdownItemType.Divider, Style = "padding: 0 0.25rem;" },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables", Style = "text-align: center;" },
new() { Text = "Broccoli", Value = "v-bro", Class = "custom-veg" },
new() { Text = "Carrot", Value = "v-car", Class = "custom-veg" },
new() { Text = "Lettuce", Value = "v-let", Class = "custom-veg" }
};
**RTL**:
> GetRtlItems() => new()
{
new() { ItemType = BitDropdownItemType.Header, Text = "میوه ها" },
new() { Text = "سیب", Value = "f-app" },
new() { Text = "موز", Value = "f-ban" },
new() { Text = "پرتقال", Value = "f-ora", IsEnabled = false },
new() { Text = "انگور", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "سیزیجات" },
new() { Text = "کلم بروكلی", Value = "v-bro" },
new() { Text = "هویج", Value = "v-car" },
new() { Text = "کاهو", Value = "v-let" }
};
**Virtualization**:
>? virtualizeItems1;
private ICollection>? virtualizeItems2;
private IEnumerable> initialSelectedItem = [
new()
{
Text = "Product 100",
Value = "100",
Data = new ProductDto {
Id = 100,
Price = 60,
Name = "Product 100"
},
AriaLabel = "Product 100",
IsEnabled = true,
ItemType = BitDropdownItemType.Normal
}
];
private IEnumerable> initialSelectedItems = [
new()
{
Text = "Product 100",
Value = "100",
Data = new ProductDto {
Id = 100,
Price = 60,
Name = "Product 100"
},
AriaLabel = "Product 100",
IsEnabled = true,
ItemType = BitDropdownItemType.Normal
},
new()
{
Text = "Product 99",
Value = "99",
Data = new ProductDto {
Id = 99,
Price = 75,
Name = "Product 99"
},
AriaLabel = "Product 99",
IsEnabled = true,
ItemType = BitDropdownItemType.Normal
}
];
protected override void OnInitialized()
{
virtualizeItems1 = Enumerable.Range(1, 10_000)
.Select(c => new BitDropdownItem { Text = $"Category {c}", Value = c.ToString() })
.ToArray();
virtualizeItems2 = Enumerable.Range(1, 10_000)
.Select(c => new BitDropdownItem { Text = $"Category {c}", Value = c.ToString() })
.ToArray();
}
private async ValueTask>> LoadItems(
BitDropdownItemsProviderRequest> request)
{
try
{
// https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
var query = new Dictionary()
{
{ "$top", request.Count == 0 ? 50 : request.Count },
{ "$skip", request.StartIndex }
};
if (string.IsNullOrEmpty(request.Search) is false)
{
query.Add("$filter", $"contains(Name,'{request.Search}')");
}
var url = NavManager.GetUriWithQueryParameters("api/Products/GetProducts", query);
var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
var items = data!.Items.Select(i => new BitDropdownItem
{
Text = i.Name,
Value = i.Id.ToString(),
Data = i,
AriaLabel = i.Name,
IsEnabled = true,
ItemType = BitDropdownItemType.Normal
}).ToList();
return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
}
catch
{
return BitDropdownItemsProviderResult.From(new List>(), 0);
}
} **Basic**:
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Prefix & Suffix**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**FitWidth**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**NoBorder**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Responsive**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Drop direction**:
? dropDirectionCustoms;
protected override void OnInitialized()
{
dropDirectionCustoms = Enumerable.Range(1, 15)
.Select(p => new ProduceModel { Text = $"Produce {p}", Value = p.ToString() })
.ToArray();
}
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Clear button**:
Value: @clearValue
Values: @string.Join(',', clearValues)
private string? clearValue = "f-app";
private ICollection clearValues = new[] { "f-app", "f-ban" };
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**SearchBox**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Immediate search**:
Search value: @immediateSearchValue
Search value: @debouncedSearchValue
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private List comboBoxCustoms = new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Validation**:
@using System.ComponentModel.DataAnnotations;
Submit
public class FormValidationDropdownModel
{
[MaxLength(2, ErrorMessage = "The property {0} have more than {1} elements")]
[MinLength(1, ErrorMessage = "The property {0} doesn't have at least {1} elements")]
public ICollection Products { get; set; } = new List();
[Required]
public string Category { get; set; }
}
private FormValidationDropdownModel validationModel = new();
private async Task HandleValidSubmit() { }
private void HandleInvalidSubmit() { }
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Customization**:
@dropdown.SelectedItem?.Text
Best in the world
New Item
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
public class DropdownItemData
{
public string? IconName { get; set; }
}
private List GetDataCustoms() => new()
{
new() { Type = BitDropdownItemType.Header, Text = "Items", Payload = new DropdownItemData { IconName = "BulletedList2" } },
new() { Text = "Item a", Value = "A", Payload = new DropdownItemData { IconName = "Memo" } },
new() { Text = "Item b", Value = "B", Payload = new DropdownItemData { IconName = "Print" } },
new() { Text = "Item c", Value = "C", Payload = new DropdownItemData { IconName = "ShoppingCart" } },
new() { Type = BitDropdownItemType.Divider },
new() { Type = BitDropdownItemType.Header, Text = "More Items", Payload = new DropdownItemData { IconName = "BulletedTreeList" } },
new() { Text = "Item d", Value = "D", Payload = new DropdownItemData { IconName = "Train" } },
new() { Text = "Item e", Value = "E", Payload = new DropdownItemData { IconName = "Repair" } },
new() { Text = "Item f", Value = "F", Payload = new DropdownItemData { IconName = "Running" } }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Binding**:
Selected Value: @controlledValue
Selected Values: @string.Join(",", controlledValues)
Changed Value: @changedValue
Changed Values: @string.Join(",", changedValues)
Selected Value: @selectedItem1?.Value
Selected Value: @selectedItem2?.Value
private string controlledValue = "f-app";
private IEnumerable controlledValues = ["f-app", "f-ban"];
private string? changedValue;
private IEnumerable changedValues = [];
private Product? selectedItem1;
private Product? selectedItem2;
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**ComboBox**:
Value: @comboBoxValueSample1
Values: @string.Join(',', comboBoxValues1)
private string comboBoxValueSample1 = default!;
private ICollection comboBoxValues1 = [];
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List comboBoxCustoms = new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors comboBoxNameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Class = { Selector = c => c.CssClass },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Style = { Selector = c => c.CssStyle },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
ValueSetter = (Product item, string value) => item.Value = value,
TextSetter = (string? text, Product item) => item.Text = text
};
**Chips**:
Value: @comboBoxValueSample2
Values: @string.Join(',', comboBoxValues2)
private string comboBoxValueSample2 = default!;
private ICollection comboBoxValues2 = [];
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List comboBoxCustoms = new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors comboBoxNameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Class = { Selector = c => c.CssClass },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Style = { Selector = c => c.CssStyle },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
ValueSetter = (Product item, string value) => item.Value = value,
TextSetter = (string? text, Product item) => item.Text = text
};
**Dynamic ComboBox**:
Value: @comboBoxValueSample3
Value: @comboBoxValueSample4
Values: @string.Join(',', comboBoxValues3)
private string comboBoxValueSample3 = default!;
private string comboBoxValueSample4 = default!;
private ICollection comboBoxValues3 = [];
private void HandleOnDynamicAdd(Product item)
{
comboBoxCustoms.Add(item);
}
public class Product
{
public string? Label { get; set; }
public string? Key { get; set; }
public object? Payload { get; set; }
public bool Disabled { get; set; }
public bool Visible { get; set; } = true;
public BitDropdownItemType Type { get; set; } = BitDropdownItemType.Normal;
public string? Text { get; set; }
public string? Title { get; set; }
public string? Value { get; set; }
}
private List comboBoxCustoms = new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors comboBoxNameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Class = { Selector = c => c.CssClass },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Style = { Selector = c => c.CssStyle },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
ValueSetter = (Product item, string value) => item.Value = value,
TextSetter = (string? text, Product item) => item.Text = text
};
**External Icons**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private List GetExternalIconCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app", IconName = nameof(BitIconName.AllApps) },
new() { Text = "Banana", Value = "f-ban", IconName = nameof(BitIconName.Calculator) },
new() { Text = "Orange", Value = "f-ora", IconName = nameof(BitIconName.FavoriteStar), Disabled = true },
new() { Text = "Grape", Value = "f-gra", IconName = nameof(BitIconName.Edit) },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro", IconName = nameof(BitIconName.Health) },
new() { Text = "Carrot", Value = "v-car", IconName = nameof(BitIconName.Add) },
new() { Text = "Lettuce", Value = "v-let", IconName = nameof(BitIconName.ChevronDown) }
};
private List GetExternalIconFaCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Css("fa-solid fa-apple-whole") },
new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Css("fa-solid fa-moon") },
new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Fa("solid lemon"), Disabled = true },
new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Css("fa-solid fa-droplet") },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Css("fa-solid fa-seedling") },
new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Css("fa-solid fa-carrot") },
new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Css("fa-solid fa-leaf") }
};
private List GetExternalIconBiCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app", Icon = BitIconInfo.Bi("apple") },
new() { Text = "Banana", Value = "f-ban", Icon = BitIconInfo.Bi("flower1") },
new() { Text = "Orange", Value = "f-ora", Icon = BitIconInfo.Css("bi bi-sun"), Disabled = true },
new() { Text = "Grape", Value = "f-gra", Icon = BitIconInfo.Bi("droplet-fill") },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro", Icon = BitIconInfo.Bi("tree-fill") },
new() { Text = "Carrot", Value = "v-car", Icon = BitIconInfo.Bi("egg") },
new() { Text = "Lettuce", Value = "v-let", Icon = BitIconInfo.Bi("flower2") }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Class = { Selector = c => c.CssClass },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Style = { Selector = c => c.CssStyle },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
Icon = { Selector = c => c.Icon },
IconName = { Selector = c => c.IconName },
};
**Color**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Style & Class**:
GetBasicCustoms() => new()
{
new() { Text = "Fruits", Type = BitDropdownItemType.Header },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", Disabled = true },
new() { Text = "Grape", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Text = "Vegetables", Type = BitDropdownItemType.Header },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
};
private List GetStyleClassCustoms() => new()
{
new() { Type = BitDropdownItemType.Header, Text = "Fruits", CssStyle = "text-align: center;" },
new() { Text = "Apple", Value = "f-app", CssClass = "custom-fruit" },
new() { Text = "Banana", Value = "f-ban", CssClass = "custom-fruit" },
new() { Text = "Orange", Value = "f-ora", Disabled = true, CssClass = "custom-fruit" },
new() { Text = "Grape", Value = "f-gra", CssClass = "custom-fruit" },
new() { Type = BitDropdownItemType.Divider, CssStyle = "padding: 0 0.25rem;" },
new() { Type = BitDropdownItemType.Header, Text = "Vegetables", CssStyle = "text-align: center;" },
new() { Text = "Broccoli", Value = "v-bro", CssClass = "custom-veg" },
new() { Text = "Carrot", Value = "v-car", CssClass = "custom-veg" },
new() { Text = "Lettuce", Value = "v-let", CssClass = "custom-veg" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Class = { Selector = c => c.CssClass },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Style = { Selector = c => c.CssStyle },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**RTL**:
GetRtlCustoms() => new()
{
new() { Type = BitDropdownItemType.Header, Text = "میوه ها" },
new() { Text = "سیب", Value = "f-app" },
new() { Text = "موز", Value = "f-ban" },
new() { Text = "پرتقال", Value = "f-ora", Disabled = true },
new() { Text = "انگور", Value = "f-gra" },
new() { Type = BitDropdownItemType.Divider },
new() { Type = BitDropdownItemType.Header, Text = "سیزیجات" },
new() { Text = "کلم بروكلی", Value = "v-bro" },
new() { Text = "هویج", Value = "v-car" },
new() { Text = "کاهو", Value = "v-let" }
};
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
**Virtualization**:
? virtualizeCustoms1;
private ICollection? virtualizeCustoms2;
private IEnumerable initialSelectedItem = [
new()
{
Text = "Product 100",
Value = "100",
Payload = new ProductDto {
Id = 100,
Price = 60,
Name = "Product 100"
},
Label = "Product 100",
Type = BitDropdownItemType.Normal
}
];
private IEnumerable initialSelectedItems = [
new()
{
Text = "Product 100",
Value = "100",
Payload = new ProductDto {
Id = 100,
Price = 60,
Name = "Product 100"
},
Label = "Product 100",
Type = BitDropdownItemType.Normal
},
new()
{
Text = "Product 99",
Value = "99",
Payload = new ProductDto {
Id = 99,
Price = 75,
Name = "Product 99"
},
Label = "Product 99",
Type = BitDropdownItemType.Normal
}
];
protected override void OnInitialized()
{
virtualizeCustoms1 = Enumerable.Range(1, 10_000)
.Select(p => new Product { Text = $"Produce {p}", Value = p.ToString() })
.ToArray();
virtualizeCustoms2 = Enumerable.Range(1, 10_000)
.Select(p => new Product { Text = $"Produce {p}", Value = p.ToString() })
.ToArray();
}
private BitDropdownNameSelectors nameSelectors = new()
{
AriaLabel = { Selector = c => c.Label },
Id = { Selector = c => c.Key },
Data = { Selector = c => c.Payload },
IsEnabled = { Selector = c => c.Disabled is false },
IsHidden = { Selector = c => c.Visible is false },
ItemType = { Selector = c => c.Type },
Text = { Selector = c => c.Text },
Title = { Selector = c => c.Title },
Value = { Selector = c => c.Value },
};
private async ValueTask> LoadItems(
BitDropdownItemsProviderRequest request)
{
try
{
// https://docs.microsoft.com/en-us/odata/concepts/queryoptions-overview
var query = new Dictionary()
{
{ "$top", request.Count == 0 ? 50 : request.Count },
{ "$skip", request.StartIndex }
};
if (string.IsNullOrEmpty(request.Search) is false)
{
query.Add("$filter", $"contains(Name,'{request.Search}')");
}
var url = NavManager.GetUriWithQueryParameters("api/Products/GetProducts", query);
var data = await HttpClient.GetFromJsonAsync(url, AppJsonContext.Default.PagedResultProductDto);
var items = data!.Items.Select(i => new Product
{
Text = i.Name,
Value = i.Id.ToString(),
Payload = i,
Label = i.Name,
Disabled = false,
Type = BitDropdownItemType.Normal
}).ToList();
return BitDropdownItemsProviderResult.From(items, data!.TotalCount);
}
catch
{
return BitDropdownItemsProviderResult.From(new List(), 0);
}
} **Basic**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List
> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Prefix & Suffix**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**FitWidth**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**NoBorder**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Responsive**:
**Drop direction**:
@foreach (var item in dropDirectionItems)
{
@foreach (var item in dropDirectionItems)
{
private ICollection> dropDirectionItems = default!;
protected override void OnInitialized()
{
dropDirectionItems = Enumerable.Range(1, 15)
.Select(c => new BitDropdownItem { Value = c.ToString(), Text = $"Category {c}" })
.ToArray();
}
**Clear button**:
@foreach (var item in basicItems)
{
Value: @clearValue
@foreach (var item in basicItems)
{
Values: @string.Join(',', clearValues)
private string? clearValue = "f-app";
private ICollection clearValues = new[] { "f-app", "f-ban" };
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**SearchBox**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Immediate search**:
@foreach (var item in basicItems)
{
Search value: @immediateSearchValue
@foreach (var item in basicItems)
{
Search value: @debouncedSearchValue
@foreach (var item in comboBoxItems)
{
private string? immediateSearchValue;
private string? debouncedSearchValue;
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
private readonly List> comboBoxItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Validation**:
@using System.ComponentModel.DataAnnotations;
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
Submit
public class FormValidationDropdownModel
{
[MaxLength(2, ErrorMessage = "The property {0} have more than {1} elements")]
[MinLength(1, ErrorMessage = "The property {0} doesn't have at least {1} elements")]
public ICollection Products { get; set; } = new List();
[Required]
public string Category { get; set; }
}
private FormValidationDropdownModel validationModel = new();
private async Task HandleValidSubmit() { }
private void HandleInvalidSubmit() { }
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Customization**:
@foreach (var item in dataItems)
{
@dropdown.SelectedItem?.Text
@foreach (var item in dataItems)
{
@foreach (var item in dataItems)
{
@foreach (var item in dataItems)
{
@foreach (var item in dataItems)
{
Best in the world
New Item
@foreach (var item in dataItems)
{
private readonly List> dataItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Items", Data = new DropdownItemData { IconName = "BulletedList2" } },
new() { Text = "Item a", Value = "A", Data = new DropdownItemData { IconName = "Memo" } },
new() { Text = "Item b", Value = "B", Data = new DropdownItemData { IconName = "Print" } },
new() { Text = "Item c", Value = "C", Data = new DropdownItemData { IconName = "ShoppingCart" } },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "More Items", Data = new DropdownItemData { IconName = "BulletedTreeList" } },
new() { Text = "Item d", Value = "D", Data = new DropdownItemData { IconName = "Train" } },
new() { Text = "Item e", Value = "E", Data = new DropdownItemData { IconName = "Repair" } },
new() { Text = "Item f", Value = "F", Data = new DropdownItemData { IconName = "Running" } }
];
**Binding**:
Selected Value: @controlledValue
@foreach (var item in basicItems)
{
Selected Values: @string.Join(",", controlledValues)
@foreach (var item in basicItems)
{
Changed Value: @changedValue
@foreach (var item in basicItems)
{
Changed Values: @string.Join(",", changedValues)
@foreach (var item in basicItems)
{
Selected Value: @selectedItem1?.Value
@foreach (var item in basicItems)
{
Selected Value: @selectedItem2?.Value
private string controlledValue = "f-app";
private IEnumerable controlledValues = ["f-app", "f-ban"];
private string? changedValue;
private IEnumerable changedValues = [];
private BitDropdownOption? selectedItem1;
private BitDropdownOption? selectedItem2;
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**ComboBox**:
@foreach (var item in comboBoxItems)
{
Value: @comboBoxValueSample1
@foreach (var item in comboBoxItems)
{
Values: @string.Join(',', comboBoxValues1)
private string comboBoxValueSample1 = default!;
private ICollection comboBoxValues1 = [];
private readonly List> comboBoxItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Chips**:
@foreach (var item in comboBoxItems)
{
Value: @comboBoxValueSample2
@foreach (var item in comboBoxItems)
{
Values: @string.Join(',', comboBoxValues2)
private string comboBoxValueSample2 = default!;
private ICollection comboBoxValues2 = [];
private readonly List> comboBoxItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Dynamic ComboBox**:
@foreach (var item in comboBoxItems)
{
Value: @comboBoxValueSample3
@foreach (var item in comboBoxItems)
{
Value: @comboBoxValueSample4
@foreach (var item in comboBoxItems)
{
Values: @string.Join(',', comboBoxValues3)
private string comboBoxValueSample3 = default!;
private string comboBoxValueSample4 = default!;
private ICollection comboBoxValues3 = [];
private void HandleOnDynamicAdd(BitDropdownOption item)
{
comboBoxItems.Add(new() { Text = item.Text, Value = item.Value });
}
private readonly List> comboBoxItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**External Icons**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Color**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
**Style & Class**:
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in styleClassItems)
{
@foreach (var item in basicItems)
{
@foreach (var item in basicItems)
{
private readonly List> basicItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits" },
new() { Text = "Apple", Value = "f-app" },
new() { Text = "Banana", Value = "f-ban" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false },
new() { Text = "Grape", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables" },
new() { Text = "Broccoli", Value = "v-bro" },
new() { Text = "Carrot", Value = "v-car" },
new() { Text = "Lettuce", Value = "v-let" }
];
private readonly List> styleClassItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "Fruits", Style = "text-align: center;" },
new() { Text = "Apple", Value = "f-app", Class = "custom-fruit" },
new() { Text = "Banana", Value = "f-ban", Class = "custom-fruit" },
new() { Text = "Orange", Value = "f-ora", IsEnabled = false, Class = "custom-fruit" },
new() { Text = "Grape", Value = "f-gra", Class = "custom-fruit" },
new() { ItemType = BitDropdownItemType.Divider, Style = "padding: 0 0.25rem;" },
new() { ItemType = BitDropdownItemType.Header, Text = "Vegetables", Style = "text-align: center;" },
new() { Text = "Broccoli", Value = "v-bro", Class = "custom-veg" },
new() { Text = "Carrot", Value = "v-car", Class = "custom-veg" },
new() { Text = "Lettuce", Value = "v-let", Class = "custom-veg" }
];
**RTL**:
@foreach (var item in rtlItems)
{
@foreach (var item in rtlItems)
{
@foreach (var item in rtlItems)
{
private readonly List> rtlItems =
[
new() { ItemType = BitDropdownItemType.Header, Text = "میوه ها" },
new() { Text = "سیب", Value = "f-app" },
new() { Text = "موز", Value = "f-ban" },
new() { Text = "پرتقال", Value = "f-ora", IsEnabled = false },
new() { Text = "انگور", Value = "f-gra" },
new() { ItemType = BitDropdownItemType.Divider },
new() { ItemType = BitDropdownItemType.Header, Text = "سیزیجات" },
new() { Text = "کلم بروكلی", Value = "v-bro" },
new() { Text = "هویج", Value = "v-car" },
new() { Text = "کاهو", Value = "v-let" }
];
**Virtualization**:
Not applicable to option demo!