Blazorise DropdownList component

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

To use the DropdownList component, install the Blazorise.Components package first.

Installation

NuGet

Install extension from NuGet. 
Install-Package Blazorise.Components

Imports

In your main _Imports.razor add: 
@using 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-Value="@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="IReadOnlyList<string>"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-Value="@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" };
}

With Search

The DropdownList component in Blazorise allows users to search for items in the dropdown list.

By enabling Filterable property, a search box is displayed at the top of the dropdown list. Users can type in the search box to filter the list and quickly locate the desired item. This feature enhances user experience by providing a more efficient way of selecting items from a dropdown list.

Selected item: CN
Selected text: China
<DropdownList TItem="Country" TValue="string"
              Data="@Countries"
              TextField="@(( item ) => item.Name)"
              ValueField="@(( item ) => item.Iso)"
              @bind-Value="@selectedDropValue"
              Color="Color.Primary"
              MaxMenuHeight="200px"
              Filterable>
    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

Parameters

Parameter Description TypeDefault
Attributes

Captures all the custom attribute that are not part of Blazorise component.

 Dictionary<string, object>null
ChildContent

Specifies the content to be rendered inside this DropdownList.

 RenderFragmentnull
Class

Custom classname for dropdown element.

 string
Color

Specifies the color of toggle button.

 Colornull
Data

Specifies the DropdownList data source.

 IEnumerable<TItem>null
Direction

Dropdown-menu slide direction.

Possible values:Default, Down, Up, End, Start

 DirectionDefault
Disabled

If true, dropdown would not react to button click.

 boolfalse
DropdownToggleSize

Specifies the size of toggle button.

Possible values:Default, ExtraSmall, Small, Medium, Large, ExtraLarge

 SizeDefault
ElementId

Specifies the dropdown element id.

 string
EndAligned

If true, a dropdown menu will be aligned to the end.

 boolfalse
Filterable

Enebles filter text input on the top of the items list.

 boolfalse
MaxMenuHeight

Sets the maximum height of the dropdown menu.

 string
SelectionMode

Specifies the DropdownList Selection Mode.

Possible values:Default, Checkbox

 DropdownListSelectionModeDropdownListSelectionMode.Default
Style

Custom styles for dropdown element.

 string
TabIndex

If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.

 int?null
Value

Currently selected item value.

 TValuenull
Virtualize

Determines whether the dropdown will use the Virtualize functionality.

 boolfalse

Events

Event Description Type
DisabledItem

Method used to get the disabled items from the supplied data source.

 Func<TItem, bool>
TextField

Method used to get the display field from the supplied data source.

 Func<TItem, string>
ValueChanged

Occurs after the selected value has changed.

 EventCallback<TValue>
ValueField

Method used to get the value field from the supplied data source.

 Func<TItem, object>

Methods

Method DescriptionReturnParameters
Focus Sets focus on the input element, if it can be focused. Taskbool scrollToElement
On this page