Blazor DropDownDataGrid
Show tabular data inside a dropdown with the Blazor DropDownDataGrid - multiple columns, filtering, paging, and single or multiple selection.
Get and Set the value of DropDownDataGrid linkLink to this section
As all Radzen Blazor input components the DropDownDataGrid has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.
Get and Set the value of DropDownDataGrid using Value and Change event linkLink to this section
Value property can be used to set the value of the component and Change event to get the user input.
Define Text and Value properties linkLink to this section
Use the TextProperty and ValueProperty properties to specify which fields to display and use as values.
DropDownDataGrid with custom header, footer, value and item templates linkLink to this section
Use the HeaderTemplate, FooterTemplate, ValueTemplate, and Template properties to customize the appearance.
Define multiple columns linkLink to this section
Add multiple RadzenDropDownDataGridColumn components to display additional data columns in the dropdown grid.
Filtering case sensitivity and filter operator linkLink to this section
Configure filtering behavior with FilterCaseSensitivity and FilterOperator properties.
Custom filtering with LoadData event linkLink to this section
Use the LoadData event to implement custom filtering logic and load data on-demand.
Multiple selection linkLink to this section
Use Multiple="true" to enable selection of multiple items from the dropdown grid.
DropDownDataGrid virtualization with IQueryable event linkLink to this section
Enable virtualization with IQueryable to efficiently handle large datasets by loading items on demand.
DropDownDataGrid virtualization with LoadData event linkLink to this section
Combine virtualization with the LoadData event for custom data loading with large datasets.
Control DropDown's DataGrid Density with Density parameter linkLink to this section
Use the Density property to control the spacing and compactness of rows in the dropdown grid.
DropDownDataGrid binding to dynamic data linkLink to this section
Bind the DropDownDataGrid to dynamic data sources where columns and data are determined at runtime.
DropDownDataGrid Sizes linkLink to this section
Use the InputSize property to set the DropDownDataGrid size. Available sizes are ExtraSmall, Small, Medium (default), and Large.
Keyboard Navigation linkLink to this section
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DropDownDataGrid component.
| Press this key | To do this |
|---|---|
| Tab | Close the popup and move focus to the next element. |
| Alt + DownArrow | Open DropDownDataGrid popup. |
| DownArrow on closed popup | Move active row to the next DropDownDataGrid item; for single (non-Multiple) select it also commits the selection. |
| UpArrow on closed popup | Move active row to the previous DropDownDataGrid item; for single (non-Multiple) select it also commits the selection. |
| DownArrow in an opened popup | Focus next DropDownDataGrid item. |
| UpArrow in an opened popup | Focus previous DropDownDataGrid item. |
| Home | Move active row to the first DropDownDataGrid item. |
| End | Move active row to the last DropDownDataGrid item. |
| Ctrl + Home | Move active row to the first DropDownDataGrid item. |
| Ctrl + End | Move active row to the last DropDownDataGrid item. |
| PageDown | Move active row forward by a page (PageSize rows). |
| PageUp | Move active row back by a page (PageSize rows). |
| LeftArrow | Goes to the previous DropDownDataGrid page (only when the grid is not virtualized). |
| RightArrow | Goes to the next DropDownDataGrid page (only when the grid is not virtualized). |
| Enter on a closed popup | Open the DropDownDataGrid popup. |
| Enter in an opened popup | Select the focused DropDownDataGrid item and close the popup. |
| Delete | Clear the current selection (when AllowClear is set). In multiple selection mode all selected items are cleared. |
| Esc in an opened popup | Close the popup (focus returns to the DropDownDataGrid). |
Frequently asked questions
What is the Blazor DropDownDataGrid?
It is a dropdown that shows a DataGrid in its popup, so users pick a value from a multi-column, filterable, paged grid instead of a plain list.
Can the DropDownDataGrid select multiple rows?
Yes. Set Multiple to true and bind Value to a collection to let users select several rows, with filtering and paging in the popup grid.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT
On this page