Radzen Blazor Components

API Reference About Radzen GitHub

DropDownDataGrid

Demonstration and configuration of the Radzen Blazor DropDownDataGrid component.

Get and Set the value of DropDownDataGrid link

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.

Example
Edit Source

Select Value

Item
No records to display.

Get and Set the value of DropDownDataGrid using Value and Change event link

Value property can be used to set the value of the component and Change event to get the user input.

Example
Edit Source

Select Value

Item
No records to display.

Select Value

CompanyName
No records to display.

DropDownDataGrid with custom header, footer, value and item templates link

Example
Edit Source

Select Value

CompanyName
No records to display.

Define multiple columns link

Example
Edit Source

Select Value

CustomerID	CompanyName	City	Country
No records to display.

Filtering case sensitivity and filter operator link

Example
Edit Source

Select Value

CompanyName
No records to display.

Custom filtering with LoadData event link

Example
Edit Source

Select Value

CompanyName
No records to display.

Multiple selection link

Example
Edit Source

Select Values

	CustomerID	CompanyName	City	Country
No records to display.

DropDownDataGrid virtualization with IQueryable event link

Example
Edit Source

Select Value

CompanyName
No records to display.

DropDownDataGrid virtualization with LoadData event link

Example
Edit Source

Select Value

CompanyName
No records to display.

Control DropDown's DataGrid Density with Density parameter link

Example
Edit Source

Select Value

Item
No records to display.

DropDownDataGrid binding to dynamic data link

Example
Edit Source

Select Value

Keyboard Navigation link

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	Navigate to a DropDownDataGrid.
Alt + Down arrow	Open DropDownDataGrid popup.
Down Arrow on closed popup	Select next DropDownDataGrid item.
Up Arrow on closed popup	Select previous DropDownDataGrid item.
Down Arrow in an opened popup	Focus next DropDownDataGrid item.
Up Arrow in an opened popup	Focus previous DropDownDataGrid item.
Left Arrow in an opened popup	Goes to previous DropDownDataGrid page.
Right Arrow in an opened popup	Goes to next DropDownDataGrid page.
Enter in an opened popup	Select the focused DropDownDataGrid item and close the popup.
Esc or Alt + Down arrow in an opened popup	Close the DropDownDataGrid popup.

Supercharge your Blazor development with 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.

open_in_new Learn More

EmployeeID	MyColumn	FirstName	LastName	HireDate	Column0	Column1	Column2	Column3	Column4	Column5	Column6	Column7	Column8	Column9	Column10	Column11	Column12	Column13	Column14	Column15	Column16	Column17	Column18	Column19	Column20	Column21	Column22	Column23	Column24	Column25	Column26	Column27	Column28	Column29	Column30	Column31	Column32	Column33	Column34	Column35	Column36	Column37	Column38	Column39	Column40	Column41	Column42	Column43	Column44	Column45	Column46	Column47	Column48	Column49
0	EnumValue1	FirstName0	LastName0	11/21/2024 07:30:53	Column00	Column10	Column20	Column30	Column40	Column50	Column60	Column70	Column80	Column90	Column100	Column110	Column120	Column130	Column140	Column150	Column160	Column170	Column180	Column190	Column200	Column210	Column220	Column230	Column240	Column250	Column260	Column270	Column280	Column290	Column300	Column310	Column320	Column330	Column340	Column350	Column360	Column370	Column380	Column390	Column400	Column410	Column420	Column430	Column440	Column450	Column460	Column470	Column480	Column490
1	EnumValue2	FirstName1	LastName1	12/21/2024 07:30:53	Column01	Column11	Column21	Column31	Column41	Column51	Column61	Column71	Column81	Column91	Column101	Column111	Column121	Column131	Column141	Column151	Column161	Column171	Column181	Column191	Column201	Column211	Column221	Column231	Column241	Column251	Column261	Column271	Column281	Column291	Column301	Column311	Column321	Column331	Column341	Column351	Column361	Column371	Column381	Column391	Column401	Column411	Column421	Column431	Column441	Column451	Column461	Column471	Column481	Column491
2	EnumValue1	FirstName2	LastName2	01/21/2025 07:30:53	Column02	Column12	Column22	Column32	Column42	Column52	Column62	Column72	Column82	Column92	Column102	Column112	Column122	Column132	Column142	Column152	Column162	Column172	Column182	Column192	Column202	Column212	Column222	Column232	Column242	Column252	Column262	Column272	Column282	Column292	Column302	Column312	Column322	Column332	Column342	Column352	Column362	Column372	Column382	Column392	Column402	Column412	Column422	Column432	Column442	Column452	Column462	Column472	Column482	Column492
3	EnumValue2	FirstName3	LastName3	02/21/2025 07:30:53	Column03	Column13	Column23	Column33	Column43	Column53	Column63	Column73	Column83	Column93	Column103	Column113	Column123	Column133	Column143	Column153	Column163	Column173	Column183	Column193	Column203	Column213	Column223	Column233	Column243	Column253	Column263	Column273	Column283	Column293	Column303	Column313	Column323	Column333	Column343	Column353	Column363	Column373	Column383	Column393	Column403	Column413	Column423	Column433	Column443	Column453	Column463	Column473	Column483	Column493
4	EnumValue1	FirstName4	LastName4	03/21/2025 07:30:53	Column04	Column14	Column24	Column34	Column44	Column54	Column64	Column74	Column84	Column94	Column104	Column114	Column124	Column134	Column144	Column154	Column164	Column174	Column184	Column194	Column204	Column214	Column224	Column234	Column244	Column254	Column264	Column274	Column284	Column294	Column304	Column314	Column324	Column334	Column344	Column354	Column364	Column374	Column384	Column394	Column404	Column414	Column424	Column434	Column444	Column454	Column464	Column474	Column484	Column494

Save $100 with our Black Friday deals!

DropDownDataGrid

Get and Set the value of DropDownDataGrid link

Get and Set the value of DropDownDataGrid using Value and Change event link

Define Text and Value properties link

DropDownDataGrid with custom header, footer, value and item templates link

Define multiple columns link

Filtering case sensitivity and filter operator link

Custom filtering with LoadData event link

Multiple selection link

DropDownDataGrid virtualization with IQueryable event link

DropDownDataGrid virtualization with LoadData event link

Control DropDown's DataGrid Density with Density parameter link

DropDownDataGrid binding to dynamic data link

Keyboard Navigation link

Supercharge your Blazor development with Radzen Blazor Studio

Demos Configuration