Class RadzenDropDownDataGrid<TValue>
A dropdown component that displays items in a DataGrid within the popup instead of a simple list. RadzenDropDownDataGrid combines dropdown selection with grid features like multiple columns, sorting, filtering, and paging. Ideal when dropdown items have multiple properties you want to display in columns. Instead of showing just one property per item, the grid popup can display multiple columns. Perfect for scenarios like selecting products with columns for Name/SKU/Price/Stock, choosing employees with Name/Department/Email columns, or picking customers with Company/Contact/Location columns. Features full DataGrid with columns/sorting/filtering in the dropdown popup, column definition using RadzenDropDownDataGridColumn, built-in column filtering in the grid, multiple selection with checkboxes, optional paging for large datasets, and custom column templates for rich item display. Define columns as child components to specify what data to show in the grid popup.
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenDropDownDataGrid<TValue> : DropDownBase<TValue>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable, IRadzenFormComponent
Type Parameters
| Name | Description |
|---|---|
| TValue | The type of the selected value. Can be a single value or IEnumerable for multiple selection. |
Examples
Basic dropdown with grid:
<RadzenDropDownDataGrid @bind-Value=@selectedCustomerId TValue="int"
Data=@customers ValueProperty="CustomerId">
<Columns>
<RadzenDropDownDataGridColumn Property="CompanyName" Title="Company" />
<RadzenDropDownDataGridColumn Property="ContactName" Title="Contact" />
<RadzenDropDownDataGridColumn Property="City" Title="City" />
</Columns>
</RadzenDropDownDataGrid>
Multiple selection with filtering:
<RadzenDropDownDataGrid @bind-Value=@selectedIds TValue="IEnumerable<int>"
Multiple="true" AllowFiltering="true" Data=@products>
<Columns>
<RadzenDropDownDataGridColumn Property="Name" Title="Product" />
<RadzenDropDownDataGridColumn Property="Price" Title="Price" FormatString="{0:C}" />
</Columns>
</RadzenDropDownDataGrid>
Constructors
RadzenDropDownDataGrid()
A dropdown component that displays items in a DataGrid within the popup instead of a simple list. RadzenDropDownDataGrid combines dropdown selection with grid features like multiple columns, sorting, filtering, and paging. Ideal when dropdown items have multiple properties you want to display in columns. Instead of showing just one property per item, the grid popup can display multiple columns. Perfect for scenarios like selecting products with columns for Name/SKU/Price/Stock, choosing employees with Name/Department/Email columns, or picking customers with Company/Contact/Location columns. Features full DataGrid with columns/sorting/filtering in the dropdown popup, column definition using RadzenDropDownDataGridColumn, built-in column filtering in the grid, multiple selection with checkboxes, optional paging for large datasets, and custom column templates for rich item display. Define columns as child components to specify what data to show in the grid popup.
Declaration
public RadzenDropDownDataGrid()
Examples
Basic dropdown with grid:
<RadzenDropDownDataGrid @bind-Value=@selectedCustomerId TValue="int"
Data=@customers ValueProperty="CustomerId">
<Columns>
<RadzenDropDownDataGridColumn Property="CompanyName" Title="Company" />
<RadzenDropDownDataGridColumn Property="ContactName" Title="Contact" />
<RadzenDropDownDataGridColumn Property="City" Title="City" />
</Columns>
</RadzenDropDownDataGrid>
Multiple selection with filtering:
<RadzenDropDownDataGrid @bind-Value=@selectedIds TValue="IEnumerable<int>"
Multiple="true" AllowFiltering="true" Data=@products>
<Columns>
<RadzenDropDownDataGridColumn Property="Name" Title="Product" />
<RadzenDropDownDataGridColumn Property="Price" Title="Price" FormatString="{0:C}" />
</Columns>
</RadzenDropDownDataGrid>
Fields
popup
Gets popup element reference.
Declaration
protected ElementReference popup
Field Value
| Type | Description |
|---|---|
| ElementReference |
Properties
Add
Gets or sets the action to be executed when the Add button is clicked.
Declaration
[Parameter]
public EventCallback<MouseEventArgs> Add { get; set; }
Property Value
| Type | Description |
|---|---|
| EventCallback<MouseEventArgs> |
AddAriaLabel
Gets or sets the add button aria-label attribute.
Declaration
[Parameter]
public string AddAriaLabel { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
AllowColumnResize
Gets or sets a value indicating whether column resizing is allowed.
Declaration
[Parameter]
public bool AllowColumnResize { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
AllowFiltering
Gets or sets a value indicating whether filtering is allowed.
Declaration
[Parameter]
public override bool AllowFiltering { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
Overrides
AllowFilteringByAllStringColumns
Gets or sets a value indicating whether filtering by all string columns is allowed.
Declaration
[Parameter]
public bool AllowFilteringByAllStringColumns { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
AllowFilteringByWord
Gets or sets a value indicating whether filtering by each entered word in the search term, sperated by a space, is allowed.
Declaration
[Parameter]
public bool AllowFilteringByWord { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
AllowFilteringByWordCount
Gets or sets the AllowFilteringByWord max count.
Declaration
[Parameter]
public int AllowFilteringByWordCount { get; set; }
Property Value
| Type | Description |
|---|---|
| int | The AllowFilteringByWord max count. |
AllowRowSelectOnRowClick
Gets or sets a value indicating whether DataGrid row can be selected on row click.
Declaration
[Parameter]
public bool AllowRowSelectOnRowClick { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
AllowSorting
Gets or sets a value indicating whether sorting is allowed.
Declaration
[Parameter]
public bool AllowSorting { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
CellRender
Gets or sets the cell render callback. Use it to set cell attributes.
Declaration
[Parameter]
public Action<DataGridCellRenderEventArgs<object>> CellRender { get; set; }
Property Value
| Type | Description |
|---|---|
| Action<DataGridCellRenderEventArgs<object>> | The cell render callback. |
Chips
Gets or sets a value indicating whether the selected items will be displayed as chips. Set to false by default.
Requires Multiple to be set to true.
Declaration
[Parameter]
public bool Chips { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
ColumnWidth
Gets or sets the width of all columns.
Declaration
[Parameter]
public string ColumnWidth { get; set; }
Property Value
| Type | Description |
|---|---|
| string | The width of all columns. |
Columns
Gets or sets the columns.
Declaration
[Parameter]
public RenderFragment Columns { get; set; }
Property Value
| Type | Description |
|---|---|
| RenderFragment | The columns. |
DataGrid
Handles the reference to the DataGrid component.
Declaration
public RadzenDataGrid<object> DataGrid { get; }
Property Value
| Type | Description |
|---|---|
| RadzenDataGrid<object> |
Density
Gets or sets a value indicating DataGrid density.
Declaration
[Parameter]
public Density Density { get; set; }
Property Value
| Type | Description |
|---|---|
| Density |
EmptyTemplate
Gets or sets the empty template shown when Data is empty collection.
Declaration
[Parameter]
public RenderFragment EmptyTemplate { get; set; }
Property Value
| Type | Description |
|---|---|
| RenderFragment | The empty template. |
EmptyText
Gets or sets the empty text.
Declaration
[Parameter]
public string EmptyText { get; set; }
Property Value
| Type | Description |
|---|---|
| string | The empty text. |
FirstPageAriaLabel
Gets or sets the pager's first page button's aria-label attribute.
Declaration
[Parameter]
public string FirstPageAriaLabel { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
FirstPageTitle
Gets or sets the pager's first page button's title attribute.
Declaration
[Parameter]
public string FirstPageTitle { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
FocusFilterOnPopup
Gets or sets whether popup automatically focuses on filter input.
Declaration
[Parameter]
public bool FocusFilterOnPopup { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
FooterTemplate
Gets or sets the footer template.
Declaration
[Parameter]
public RenderFragment FooterTemplate { get; set; }
Property Value
| Type | Description |
|---|---|
| RenderFragment | The footer template. |
GridLines
Gets or sets the grid lines.
Declaration
[Parameter]
public DataGridGridLines GridLines { get; set; }
Property Value
| Type | Description |
|---|---|
| DataGridGridLines | The grid lines. |
InputAttributes
Specifies additional custom attributes that will be rendered by the input.
Declaration
[Parameter]
public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
Property Value
| Type | Description |
|---|---|
| IReadOnlyDictionary<string, object> | The attributes. |
IsLoading
Gets or sets a value indicating whether this instance loading indicator is shown.
Declaration
[Parameter]
public bool IsLoading { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
Items
Gets the items.
Declaration
protected override IEnumerable<object> Items { get; }
Property Value
| Type | Description |
|---|---|
| IEnumerable<object> | The items. |
Overrides
LastPageAriaLabel
Gets or sets the pager's last page button's aria-label attribute.
Declaration
[Parameter]
public string LastPageAriaLabel { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
LastPageTitle
Gets or sets the pager's last page button's title attribute.
Declaration
[Parameter]
public string LastPageTitle { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
MaxSelectedLabels
Gets or sets the number of maximum selected labels.
Declaration
[Parameter]
public int MaxSelectedLabels { get; set; }
Property Value
| Type | Description |
|---|---|
| int | The maximum selected labels. |
NextPageAriaLabel
Gets or sets the pager's next page button's aria-label attribute.
Declaration
[Parameter]
public string NextPageAriaLabel { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
NextPageTitle
Gets or sets the pager's next page button's title attribute.
Declaration
[Parameter]
public string NextPageTitle { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
OpenOnFocus
Gets or sets a value indicating whether popup should open on focus. Set to false by default.
Declaration
[Parameter]
public bool OpenOnFocus { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
PageAriaLabelFormat
Gets or sets the pager's numeric page number buttons' aria-label attributes.
Declaration
[Parameter]
public string PageAriaLabelFormat { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
PageNumbersCount
Gets or sets the page numbers count.
Declaration
[Parameter]
public int PageNumbersCount { get; set; }
Property Value
| Type | Description |
|---|---|
| int | The page numbers count. |
PageTitleFormat
Gets or sets the pager's numeric page number buttons' title attributes.
Declaration
[Parameter]
public string PageTitleFormat { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
PagerAlwaysVisible
Gets or sets a value indicating whether pager is visible even when not enough data for paging.
Declaration
[Parameter]
public bool PagerAlwaysVisible { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
PagerHorizontalAlign
Gets or sets the horizontal align.
Declaration
[Parameter]
public HorizontalAlign PagerHorizontalAlign { get; set; }
Property Value
| Type | Description |
|---|---|
| HorizontalAlign | The horizontal align. |
PagingSummaryFormat
Gets or sets the pager summary format.
Declaration
[Parameter]
public string PagingSummaryFormat { get; set; }
Property Value
| Type | Description |
|---|---|
| string | The pager summary format. |
PopupStyle
Gets or sets the Popup style.
Declaration
[Parameter]
public string PopupStyle { get; set; }
Property Value
| Type | Description |
|---|---|
| string | The number Popup style. |
PreserveRowSelectionOnPaging
Gets or sets preserving the selected row index on pageing.
Declaration
[Parameter]
public bool PreserveRowSelectionOnPaging { get; set; }
Property Value
| Type | Description |
|---|---|
| bool | Row selection preservation on pageing. |
PrevPageAriaLabel
Gets or sets the pager's previous page button's aria-label attribute.
Declaration
[Parameter]
public string PrevPageAriaLabel { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
PrevPageTitle
Gets or sets the pager's previous page button's title attribute.
Declaration
[Parameter]
public string PrevPageTitle { get; set; }
Property Value
| Type | Description |
|---|---|
| string |
Responsive
Gets or sets a value indicating whether this RadzenDropDownDataGrid<TValue> is responsive.
Declaration
[Parameter]
public bool Responsive { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
RowRender
Gets or sets the row render callback. Use it to set row attributes.
Declaration
[Parameter]
public Action<RowRenderEventArgs<object>> RowRender { get; set; }
Property Value
| Type | Description |
|---|---|
| Action<RowRenderEventArgs<object>> | The row render callback. |
SearchTextPlaceholder
Gets or sets the search input placeholder text.
Declaration
[Parameter]
public string SearchTextPlaceholder { get; set; }
Property Value
| Type | Description |
|---|---|
| string | The search input placeholder 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. |
SelectedValue
Gets or sets the selected value.
Declaration
[Parameter]
public object SelectedValue { get; set; }
Property Value
| Type | Description |
|---|---|
| object | The selected value. |
ShowAdd
Gets or sets a value indicating whether the create button is shown.
Declaration
[Parameter]
public bool ShowAdd { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
ShowPagingSummary
Gets or sets the pager summary visibility.
Declaration
[Parameter]
public bool ShowPagingSummary { get; set; }
Property Value
| Type | Description |
|---|---|
| bool | The pager summary visibility. |
ShowSearch
Gets or sets a value indicating whether search button is shown.
Declaration
[Parameter]
public bool ShowSearch { get; set; }
Property Value
| Type | Description |
|---|---|
| bool |
|
ValueTemplate
Gets or sets the value template.
Declaration
[Parameter]
public RenderFragment<dynamic> ValueTemplate { get; set; }
Property Value
| Type | Description |
|---|---|
| RenderFragment<dynamic> | The value template. |
View
Gets the view. The data with sorting, filtering and paging applied.
Declaration
public IEnumerable View { get; }
Property Value
| Type | Description |
|---|---|
| IEnumerable | The view. |
Methods
BuildRenderTree(RenderTreeBuilder)
A dropdown component that displays items in a DataGrid within the popup instead of a simple list. RadzenDropDownDataGrid combines dropdown selection with grid features like multiple columns, sorting, filtering, and paging. Ideal when dropdown items have multiple properties you want to display in columns. Instead of showing just one property per item, the grid popup can display multiple columns. Perfect for scenarios like selecting products with columns for Name/SKU/Price/Stock, choosing employees with Name/Department/Email columns, or picking customers with Company/Contact/Location columns. Features full DataGrid with columns/sorting/filtering in the dropdown popup, column definition using RadzenDropDownDataGridColumn, built-in column filtering in the grid, multiple selection with checkboxes, optional paging for large datasets, and custom column templates for rich item display. Define columns as child components to specify what data to show in the grid popup.
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
CloseAndFocus()
Closes the dropdown popup and sets focus to the input element.
Declaration
public Task CloseAndFocus()
Returns
| Type | Description |
|---|---|
| Task | A task that represents the asynchronous operation. |
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 |
| bool? | shouldSelectOnChange | Should select item on item change with keyboard. |
Returns
| Type | Description |
|---|---|
| Task |
Overrides
OnAddClick(MouseEventArgs)
Handles the Click event.
Declaration
public Task OnAddClick(MouseEventArgs args)
Parameters
| Type | Name | Description |
|---|---|---|
| MouseEventArgs | args | The MouseEventArgs instance containing the event data. |
Returns
| Type | Description |
|---|---|
| Task |
OnAfterRenderAsync(bool)
Called when [after render asynchronous].
Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
| Type | Name | Description |
|---|---|---|
| bool | firstRender | if set to |
Returns
| Type | Description |
|---|---|
| Task | Task. |
Overrides
OnCellRender(DataGridCellRenderEventArgs<object>)
Executes CellRender callback.
Declaration
protected virtual void OnCellRender(DataGridCellRenderEventArgs<object> args)
Parameters
| Type | Name | Description |
|---|---|---|
| DataGridCellRenderEventArgs<object> | args |
OnChipRemove(object)
Event handler for when an item is unselected by clicking a chip
Declaration
protected virtual Task OnChipRemove(object item)
Parameters
| Type | Name | Description |
|---|---|---|
| object | item | The item that is to be removed |
Returns
| Type | Description |
|---|---|
| Task |
OnDataChanged()
Called when data is changed.
Declaration
protected override Task OnDataChanged()
Returns
| Type | Description |
|---|---|
| Task |
Overrides
OnFilter(ChangeEventArgs)
Handles the Filter event.
Declaration
protected override Task OnFilter(ChangeEventArgs args)
Parameters
| Type | Name | Description |
|---|---|---|
| ChangeEventArgs | args | The ChangeEventArgs instance containing the event data. |
Returns
| Type | Description |
|---|---|
| Task |
Overrides
OnRowRender(RowRenderEventArgs<object>)
Executes RowRender callback.
Declaration
protected virtual void OnRowRender(RowRenderEventArgs<object> args)
Parameters
| Type | Name | Description |
|---|---|---|
| RowRenderEventArgs<object> | args |
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 |
| bool | isFromClick | if set to |
Returns
| Type | Description |
|---|---|
| Task |
Overrides
Reload()
Reloads this instance.
Declaration
public Task Reload()
Returns
| Type | Description |
|---|---|
| Task |
Reset()
Resets component and deselects row
Declaration
public Task Reset()
Returns
| Type | Description |
|---|---|
| Task |
SelectItemFromValue(object)
Selects the item from value.
Declaration
protected override void SelectItemFromValue(object value)
Parameters
| Type | Name | Description |
|---|---|---|
| object | value | The value. |
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. |