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

}

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
On this page