Class RadzenDropDown<TValue>

A dropdown select component that allows users to choose one or multiple items from a popup list. RadzenDropDown supports data binding, filtering, templates, virtual scrolling, and both single and multiple selection modes. Binds to a data source via the Data property and uses TextProperty and ValueProperty to determine what to display and what value to bind. Supports filtering (with configurable operators and case sensitivity), custom item templates, empty state templates, value templates for the selected item display, and can be configured as editable to allow custom text entry. For multiple selection, set Multiple=true and bind to a collection type.

Inheritance
object
ComponentBase
RadzenComponent
DataBoundFormComponent<TValue>
DropDownBase<TValue>
RadzenDropDown<TValue>
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenDropDown<TValue> : DropDownBase<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponent
Type Parameters
Name Description
TValue

The type of the selected value. Can be a primitive type, complex object, or collection for multiple selection.
Examples

Basic dropdown with data binding:

<RadzenDropDown @bind-Value=@customerID TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" />

Dropdown with filtering and placeholder:

<RadzenDropDown @bind-Value=@selectedId TValue="int" Data=@items TextProperty="Name" ValueProperty="Id" 
                 AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="Select an item..." />

Multiple selection dropdown:

<RadzenDropDown @bind-Value=@selectedIds TValue="IEnumerable<int>" Data=@items Multiple="true" Chips="true" />

Constructors

RadzenDropDown()

A dropdown select component that allows users to choose one or multiple items from a popup list. RadzenDropDown supports data binding, filtering, templates, virtual scrolling, and both single and multiple selection modes. Binds to a data source via the Data property and uses TextProperty and ValueProperty to determine what to display and what value to bind. Supports filtering (with configurable operators and case sensitivity), custom item templates, empty state templates, value templates for the selected item display, and can be configured as editable to allow custom text entry. For multiple selection, set Multiple=true and bind to a collection type.

Declaration
public RadzenDropDown()
Examples

Basic dropdown with data binding:

<RadzenDropDown @bind-Value=@customerID TValue="string" Data=@customers TextProperty="CompanyName" ValueProperty="CustomerID" />

Dropdown with filtering and placeholder:

<RadzenDropDown @bind-Value=@selectedId TValue="int" Data=@items TextProperty="Name" ValueProperty="Id" 
                 AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" Placeholder="Select an item..." />

Multiple selection dropdown:

<RadzenDropDown @bind-Value=@selectedIds TValue="IEnumerable<int>" Data=@items Multiple="true" Chips="true" />

Properties

Chips

Gets or sets whether selected items should be displayed as removable chips in the input area. When enabled in multiple selection mode, each selected item appears as a chip with an X button for quick removal. Requires Multiple to be set to true.

Declaration
[Parameter]
public bool Chips { get; set; }
Property Value
Type Description
bool

true to display selected items as chips; false to show a comma-separated list or count. Default is false.

ClearSearchAfterSelection

Gets or sets whether the filter search text should be cleared after an item is selected. When true, selecting an item will reset the filter, showing all items again on the next open.

Declaration
[Parameter]
public bool ClearSearchAfterSelection { get; set; }
Property Value
Type Description
bool

true to clear the search text after selection; otherwise, false. Default is false.

Close

Callback for when a dropdown is closed.

Declaration
[Parameter]
public EventCallback Close { get; set; }
Property Value
Type Description
EventCallback

EmptyTemplate

Gets or sets the template displayed when the dropdown data source is empty or no items match the filter. Use this to show a custom "No items found" or "Empty list" message.

Declaration
[Parameter]
public RenderFragment EmptyTemplate { get; set; }
Property Value
Type Description
RenderFragment

The render fragment for the empty state.

FilterAutoCompleteType

Gets or sets the HTML autocomplete attribute value for the filter search input. Controls whether the browser should provide autocomplete suggestions for the filter field.

Declaration
[Parameter]
public AutoCompleteType FilterAutoCompleteType { get; set; }
Property Value
Type Description
AutoCompleteType

The autocomplete type. Default is Off.

FilterPlaceholder

Gets or sets the placeholder text displayed in the filter search box within the dropdown popup. This helps users understand they can filter the list by typing.

Declaration
[Parameter]
public string FilterPlaceholder { get; set; }
Property Value
Type Description
string

The filter search placeholder text. Default is empty string.

FooterTemplate

Gets or sets the footer template.

Declaration
[Parameter]
public RenderFragment FooterTemplate { get; set; }
Property Value
Type Description
RenderFragment

The footer template.

InputAttributes

Gets or sets additional HTML attributes to be applied to the underlying input element. This allows passing custom attributes like data-* attributes, aria-* attributes, or other HTML attributes directly to the input.

Declaration
[Parameter]
public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
Property Value
Type Description
IReadOnlyDictionary<string, object>

A dictionary of custom HTML attributes.

ItemRender

Gets or sets a callback invoked when rendering each dropdown item. Use this to customize item attributes, such as adding CSS classes or data attributes based on item properties.

Declaration
[Parameter]
public Action<DropDownItemRenderEventArgs<TValue>> ItemRender { get; set; }
Property Value
Type Description
Action<DropDownItemRenderEventArgs<TValue>>

The item render callback that receives event arguments with the item and allows setting custom attributes.

MaxSelectedLabels

Gets or sets the maximum number of selected item labels to display in the input before showing a count summary. When multiple selection is enabled and more items are selected than this value, the input will show "N items selected" instead of listing all labels. Only applicable when Multiple is true.

Declaration
[Parameter]
public int MaxSelectedLabels { get; set; }
Property Value
Type Description
int

The maximum number of labels to display. Default is 4.

Open

Callback for when a dropdown is opened.

Declaration
[Parameter]
public EventCallback Open { get; set; }
Property Value
Type Description
EventCallback

OpenOnFocus

Gets or sets whether the dropdown popup should automatically open when the input receives focus. Useful for improving user experience by reducing clicks needed to interact with the dropdown.

Declaration
[Parameter]
public bool OpenOnFocus { get; set; }
Property Value
Type Description
bool

true to open the popup on focus; otherwise, false. Default is false.

OpenPopupKey

Gets or sets the keyboard key that triggers opening the popup when OpenOnFocus is enabled. Default is "Enter".

Declaration
[Parameter]
public string OpenPopupKey { get; set; }
Property Value
Type Description
string

The keyboard key used to open the popup.

PopupStyle

Gets or sets the CSS style applied to the dropdown popup container. Use this to control the popup dimensions, especially max-height to limit scrollable area.

Declaration
[Parameter]
public string PopupStyle { get; set; }
Property Value
Type Description
string

The CSS style string for the popup. Default is "max-height:200px;overflow-x:hidden".

ReadOnly

Gets or sets whether the dropdown is read-only and cannot be changed by user interaction. When true, the dropdown displays the selected value but prevents changing the selection.

Declaration
[Parameter]
public bool ReadOnly { get; set; }
Property Value
Type Description
bool

true if the dropdown is read-only; otherwise, false. Default is false.

SelectAllText

Gets or sets the select all text.

Declaration
[Parameter]
public string SelectAllText { get; set; }
Property Value
Type Description
string

The select all text.

SelectedItemsText

Gets or sets the selected items text.

Declaration
[Parameter]
public string SelectedItemsText { get; set; }
Property Value
Type Description
string

The selected items text.

ValueTemplate

Gets or sets the template used to render the currently selected value in the dropdown input. This allows custom formatting or layout for the displayed selection. The template receives the selected item as context.

Declaration
[Parameter]
public RenderFragment<dynamic> ValueTemplate { get; set; }
Property Value
Type Description
RenderFragment<dynamic>

The render fragment for customizing the selected value display.

Methods

BuildRenderTree(RenderTreeBuilder)

A dropdown select component that allows users to choose one or multiple items from a popup list. RadzenDropDown supports data binding, filtering, templates, virtual scrolling, and both single and multiple selection modes. Binds to a data source via the Data property and uses TextProperty and ValueProperty to determine what to display and what value to bind. Supports filtering (with configurable operators and case sensitivity), custom item templates, empty state templates, value templates for the selected item display, and can be configured as editable to allow custom text entry. For multiple selection, set Multiple=true and bind to a collection type.

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

Dispose()

Disposes this instance.

Declaration
public override void Dispose()
Overrides

GetComponentCssClass()

Gets the component CSS class.

Declaration
protected override string GetComponentCssClass()
Returns
Type Description
string
Overrides

HandleKeyPress(KeyboardEventArgs, bool, bool?)

Handles the key press.

Declaration
protected override Task HandleKeyPress(KeyboardEventArgs args, bool isFilter, bool? shouldSelectOnChange = null)
Parameters
Type Name Description
KeyboardEventArgs args

The KeyboardEventArgs instance containing the event data.
bool isFilter

if set to true [is filter].
bool? shouldSelectOnChange

Should select item on item change with keyboard.
Returns
Type Description
Task
Overrides

OnAfterRenderAsync(bool)

Called when [after render asynchronous].

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

if set to true [first render].
Returns
Type Description
Task

Task.
Overrides

OnClose()

Called when popup is closed.

Declaration
[JSInvokable]
public Task OnClose()
Returns
Type Description
Task

OnSelectItem(object, bool)

Called when item is selected.

Declaration
protected override Task OnSelectItem(object item, bool isFromKey = false)
Parameters
Type Name Description
object item

The item.
bool isFromKey

if set to true [is from key].
Returns
Type Description
Task
Overrides

OpenPopup(string, bool, bool)

Opens the popup.

Declaration
protected override Task OpenPopup(string key = "ArrowDown", bool isFilter = false, bool isFromClick = false)
Parameters
Type Name Description
string key

The key.
bool isFilter

if set to true [is filter].
bool isFromClick

if set to true [is from click].
Returns
Type Description
Task
Overrides

SelectAll()

Selects all.

Declaration
protected override Task SelectAll()
Returns
Type Description
Task
Overrides

SetParametersAsync(ParameterView)

Set parameters as an asynchronous operation.

Declaration
public override Task SetParametersAsync(ParameterView parameters)
Parameters
Type Name Description
ParameterView parameters

The parameters.
Returns
Type Description
Task

A Task representing the asynchronous operation.
Overrides

Implements

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

Learn More

Download Now