DropdownList

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

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="true">
    <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";

}

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