Accessible Drag-Drop

   
Selection
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.00
Genen Shouyu$16.00
Pavlova$17.00
Carnarvon Tigers$63.00
Teatime Chocolate Biscuits$9.00
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.00
Schoggi Schokolade$44.00
Nord-Ost Matjeshering$26.00
Gorgonzola Telino$13.00
Mascarpone Fabioli$32.00
Geitost$3.00
Sasquatch Ale$14.00
Steeleye Stout$18.00
Inlagd Sill$19.00
Gravad lax$26.00
Côte de Blaye$264.00
Chartreuse verte$18.00
Boston Crab Meat$18.00
Jack's New England Clam Chowder$10.00
Ipoh Coffee$46.00
Gula Malacca$19.00
Rogede sild$10.00
Spegesild$12.00
Zaanse koeken$10.00
Chocolade$13.00
Maxilaku$20.00
Valkoinen suklaa$16.00
Manjimup Dried Apples$53.00
Filo Mix$7.00
Tourtière$7.00
Pâté chinois$24.00
Gnocchi di nonna Alice$38.00
Ravioli Angelo$20.00
Escargots de Bourgogne$13.00
Raclette Courdavault$55.00
Camembert Pierrot$34.00
Sirop d'érable$29.00
Tarte au sucre$49.00
Vegie-spread$44.00
Wimmers gute Semmelknödel$33.00
Louisiana Fiery Hot Pepper Sauce$21.00
Louisiana Hot Spiced Okra$17.00
Laughing Lumberjack Lager$14.00
Scottish Longbreads$13.00
Gudbrandsdalsost$36.00
Outback Lager$15.00
Flotemysost$22.00
Mozzarella di Giovanni$35.00
Röd Kaviar$15.00
Longlife Tofu$10.00
Rhönbräu Klosterbier$8.00
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
Product Name Unit Price      
Chef Anton's Gumbo Mix$21.00
Mishi Kobe Niku$97.00
Alice Mutton$39.00
Guaraná Fantástica$5.00
Rössle Sauerkraut$46.00
Thüringer Rostbratwurst$124.00
Singaporean Hokkien Fried Mee$14.00
Perth Pasties$33.00
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.