Overview
The dropdown list component allows the user to choose one or more items from a contextual overlay. The developer can control the data, binding, events and appearance.
Sample
The following form has three dropdowns which are bound to the same dataset. In this example, we compare the differences between implementations from DataMine, Syncfusion and Telerik.
DataMine
The DatDropdown component is used within the DataMine Framework to minimize dependencies on additional exeternal component libraries. See dropdown component.
<DatDropdown
TItem="ItemModel"
TValue="int?"
Data="Dropdown.Items"
Value="Dropdown.ItemId"
OnSelected="OnItemSelected"
OnChanged='OnItemChanged'>
FieldValue="ItemId"
FieldText="ItemName"
Placeholder="- Select -"
<DropdownItemTemplate>
@{
if (context == null) return;
<ul class="nav">
<li class="nav-item">
@context.ItemId
</li>
<li class="nav-item">
@context.ItemName
</li>
</ul>
}
</DropdownItemTemplate>
</DatDropdown>
@code {
[CascadingParameter] public Dropdown Dropdown { get; set; } = null!;
void OnItemChanged(ItemModel item)
{
var id = item.ItemId;
}
void OnItemSelected(ItemModel item)
{
// Select item
Dropdown.OnItemSelected(item);
// Show message for this control
Message = $"DataMine: The user selected: {item?.ItemName}";
StateHasChanged();
}
}public int? ItemId { get; set; }
public class ItemModel
{
public int ItemId { get; set; }
public string ItemName { get; set; } = null!;
};
public List<ItemModel> Items { get; set; } = new()
{
new() { ItemId = 1, ItemName = "Item 1"},
new() { ItemId = 2, ItemName = "Item 2"},
new() { ItemId = 3, ItemName = "Item 3"},
};
.dat-dropdown {
.dropdown {
}
.dropdown-link {
}
.dropdown-input {
}
.dropdown-icon {
}
.dropdown-menu {
}
.dropdown-item {
}
}
<div class="dat-dropdown">
<div class="dropdown">
<a class="dropdown-link" data-bs-toggle="dropdown">
<div class="dropdown-input">- Select -</div>
<div class="dropdown-icon"> <i class="fal fa-angle-down"></i></div>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" data-id="- Select -" data-text="">
- Select -
</a>
<a class="dropdown-item" data-id="1" data-text="Item 1">
<ul class="nav">
<li class="nav-item">1</li>
<li class="nav-item">Item 1</li>
</ul>
</a>
<a class="dropdown-item" data-id="2" data-text="Item 2">
<ul class="nav">
<li class="nav-item">2</li>
<li class="nav-item">Item 2</li>
</ul>
</a>
<a class="dropdown-item " data-id="3" data-text="Item 3">
<ul class="nav">
<li class="nav-item">3</li>
<li class="nav-item">Item 3</li>
</ul>
</a>
</div>
</div>
</div>
