Accessible Drag-Drop

   
Selection Select All
Product Name Unit Price      
Chai$18.00
Chang$19.00
Aniseed Syrup$10.00
Chef Anton's Cajun Seasoning$22.00
Grandma's Boysenberry Spread$25.00
Uncle Bob's Organic Dried Pears$30.00
Northwoods Cranberry Sauce$40.00
Ikura$31.00
Queso Cabrales$21.00
Queso Manchego La Pastora$38.00
Konbu$6.00
Tofu$23.25
Genen Shouyu$15.50
Pavlova$17.45
Carnarvon Tigers$62.50
Teatime Chocolate Biscuits$9.20
Sir Rodney's Marmalade$81.00
Sir Rodney's Scones$10.00
Gustaf's Knäckebröd$21.00
Tunnbröd$9.00
NuNuCa Nuß-Nougat-Creme$14.00
Gumbär Gummibärchen$31.23
Schoggi Schokolade$43.90
Nord-Ost Matjeshering$25.89
Gorgonzola Telino$12.50
Mascarpone Fabioli$32.00
Geitost$2.50
Sasquatch Ale$14.00
Steeleye Stout$18.00
Inlagd Sill$19.00
Gravad lax$26.00
Côte de Blaye$263.50
Chartreuse verte$18.00
Boston Crab Meat$18.40
Jack's New England Clam Chowder$9.65
Ipoh Coffee$46.00
Gula Malacca$19.45
Rogede sild$9.50
Spegesild$12.00
Zaanse koeken$9.50
Chocolade$12.75
Maxilaku$20.00
Valkoinen suklaa$16.25
Manjimup Dried Apples$53.00
Filo Mix$7.00
Tourtière$7.45
Pâté chinois$24.00
Gnocchi di nonna Alice$38.00
Ravioli Angelo$19.50
Escargots de Bourgogne$13.25
Raclette Courdavault$55.00
Camembert Pierrot$34.00
Sirop d'érable$28.50
Tarte au sucre$49.30
Vegie-spread$43.90
Wimmers gute Semmelknödel$33.25
Louisiana Fiery Hot Pepper Sauce$21.05
Louisiana Hot Spiced Okra$17.00
Laughing Lumberjack Lager$14.00
Scottish Longbreads$12.50
Gudbrandsdalsost$36.00
Outback Lager$15.00
Flotemysost$21.50
Mozzarella di Giovanni$34.80
Röd Kaviar$15.00
Longlife Tofu$10.00
Rhönbräu Klosterbier$7.75
Lakkalikööri$18.00
Original Frankfurter grüne Soße$13.00
Data grid with 69 rows and 6 columns
0 rows are selected
   
Selection Select All
Product Name Unit Price      
Chef Anton's Gumbo Mix$21.35
Mishi Kobe Niku$97.00
Alice Mutton$39.00
Guaraná Fantástica$4.50
Rössle Sauerkraut$45.60
Thüringer Rostbratwurst$123.79
Singaporean Hokkien Fried Mee$14.00
Perth Pasties$32.80
Data grid with 8 rows and 6 columns
0 rows are selected

This demo illustrates accessibility-related capabilities of the DevExpress Blazor Grid. Specifically, it illustrates how end-users can initiate drag & drop operations within the Grid using the keyboard. You can use the following key combinations to initiate drag & drop operations:

  • Tab, Shift+Tab, Arrows: to navigate between Grid cells (navigation buttons in the last three columns).
  • Enter: to use buttons that reorder rows or move them between Grid components.
  • Ctrl+Up Arrow, Ctrl+Down Arrow: to move focus between navigation areas/Grids.
  • Escape - to exit the nested navigation object (in this demo, navigation buttons).

Note: Demo code processes keyboard shortcuts and move rows. When users initiate drag operations with the mouse, changes are processed in the ItemsDropped event handler.