www.radzen.com

Radzen Blazor Components

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
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taquería
Around the Horn
Berglunds snabbköp

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
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taquería
Around the Horn
Berglunds snabbköp

Select Value

CompanyName
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taquería
Around the Horn
Berglunds snabbköp

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

Example
Edit Source

Select Value

CompanyName
Company: Alfreds Futterkiste
Company: Ana Trujillo Emparedados y helados
Company: Antonio Moreno Taquería
Company: Around the Horn
Company: Berglunds snabbköp

Define multiple columns link

Example
Edit Source

Select Value

CustomerID	CompanyName	City	Country
ALFKI	Alfreds Futterkiste	Berlin	Germany
ANATR	Ana Trujillo Emparedados y helados	México D.F.	Mexico
ANTON	Antonio Moreno Taquería	México D.F.	Mexico
AROUT	Around the Horn	London	UK
BERGS	Berglunds snabbköp	Luleå	Sweden

Filtering case sensitivity and filter operator link

Example
Edit Source

Select Value

CompanyName
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taquería
Around the Horn
Berglunds snabbköp

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
ALFKI	Alfreds Futterkiste	Berlin	Germany
ANATR	Ana Trujillo Emparedados y helados	México D.F.	Mexico
ANTON	Antonio Moreno Taquería	México D.F.	Mexico
AROUT	Around the Horn	London	UK
BERGS	Berglunds snabbköp	Luleå	Sweden

DropDownDataGrid virtualization with IQueryable event link

Example
Edit Source

Select Value

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
Alfreds Futterkiste
Ana Trujillo Emparedados y helados
Antonio Moreno Taquería
Around the Horn
Berglunds snabbköp

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 + DownArrow	Open DropDownDataGrid popup.
DownArrow on closed popup	Select next DropDownDataGrid item.
UpArrow on closed popup	Select previous DropDownDataGrid item.
DownArrow in an opened popup	Focus next DropDownDataGrid item.
UpArrow in an opened popup	Focus previous DropDownDataGrid item.
LeftArrow in an opened popup	Goes to previous DropDownDataGrid page.
RightArrow 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 + DownArrow in an opened popup	Close the DropDownDataGrid popup.

All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Start Free See All Benefits

Get and Set the value of DropDownDataGrid
Get and Set the value of DropDownDataGrid using Value and Change event
Define Text and Value properties
DropDownDataGrid with custom header, footer, value and item templates
Define multiple columns
Filtering case sensitivity and filter operator
Multiple selection
DropDownDataGrid binding to dynamic data
Keyboard Navigation

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	09/25/2025 15:30:20	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	10/25/2025 15:30:20	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	11/25/2025 15:30:20	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	12/25/2025 15:30:20	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	01/25/2026 15:30:20	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

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

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

Code Less. Deliver More.

On this page

Demos Configuration