Blazorise DropdownList component

The DropdownList component allows you to select a value from a list of predefined items.

To be able to use DropdownList component you first need to install it.

Installation

NuGet

Install extension from NuGet. 
Install-Package Blazorise.Components

Example

Selected item: CN
Selected text: China
<DropdownList TItem="Country" TValue="string"
              Data="@Countries"
              TextField="@((item)=>item.Name)"
              ValueField="@((item)=>item.Iso)"
              @bind-SelectedValue="@selectedDropValue"
              Color="Color.Primary"
              MaxMenuHeight="200px">
    Select item
</DropdownList>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected item: @selectedDropValue
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected text: @Countries?.FirstOrDefault(x=> x.Iso == @selectedDropValue)?.Name
    </FieldBody>
</Field>

@code{
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    string selectedDropValue { get; set; } = "CN";

}

Checkbox Selection

The multiple selection feature in Blazorise's DropdownList component enables users to select multiple options from a dropdown menu via checkboxes. Each option in the menu comes with a checkbox for selection. Upon clicking the DropdownList, users can tick multiple checkboxes to select various options. This feature provides an efficient way of making multiple selections, enhancing user flexibility and interaction.
Selected values: AM,AF;
Selected texts: Armenia,Afghanistan
<DropdownList TItem="Country" TValue="string"
              Data="@Countries"
              TextField="@((item)=>item.Name)"
              ValueField="@((item)=>item.Iso)"
              @bind-SelectedValues="@selectedDropValues"
              SelectionMode="DropdownListSelectionMode.Checkbox"
              Color="Color.Primary"
              MaxMenuHeight="200px">
    Select item
</DropdownList>

<Field Horizontal>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected values: @(selectedDropValues is not null ? string.Join( ',', selectedDropValues ) : "");
    </FieldBody>
    <FieldBody ColumnSize="ColumnSize.Is12">
        Selected texts: @(selectedDropValues is not null 
                        ? string.Join( ',', selectedDropValues.Select( x => Countries.FirstOrDefault( country => country.Iso == x )?.Name ?? string.Empty )) 
                        : string.Empty )
    </FieldBody>
</Field>

@code{
    [Inject]
    public CountryData CountryData { get; set; }
    public IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    private IReadOnlyList<string> selectedDropValues { get; set; } = new[] { "AM", "AF" };

}

API

Attributes

Name Description Type Default
TItem Model data type. generic
Data Data used for the search. IEnumerable<TItem>
TextField Selector for the display name field. Func
ValueField Selector for the value field. Func
SelectedValue Currently selected value. object
SelectedValueChanged Raises an event after the selected value has changed. EventCallback<string>
MaxMenuHeight Sets the maximum height of the dropdown menu. string
Virtualize Gets or sets whether the dropdown will use the Virtualize functionality. bool false
SelectionMode Gets or sets the DropdownList Selection Mode. DropdownListSelectionMode DropdownListSelectionMode.Default
SelectedValues Currently selected item values. IReadOnlyList<TValue>
SelectedValuesChanged Occurs after the selected item values have changed. EventCallback<IReadOnlyList<TValue>>
DropdownToggleSize Defines the size of toggle button. Size Default
DisabledItem Method used to get the disabled items from the supplied data source. Func<TItem, bool>
On this page