Demonstration and configuration of the Radzen Blazor DropDownDataGrid component.
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.
Value property can be used to set the value of the component and Change
event to get the user input.
CompanyName
|
---|
No records to display. |
CompanyName
|
---|
CompanyName
|
---|
No records to display. |
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 | 05/08/2024 04:34:01 | 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 | 06/08/2024 04:34:01 | 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 | 07/08/2024 04:34:01 | 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 | 08/08/2024 04:34:01 | 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 | 09/08/2024 04:34:01 | 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 |
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. |
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.
Radzen Blazor Components, © 2018-2024 Radzen.
Source Code licensed under
MIT
Premium Themes
Free Themes