Multiple Row Selection

 
Product Name Category Unit Price Units In Stock
Chai Beverages $18.00 39
Chang Beverages $19.00 17
Aniseed Syrup Condiments $10.00 13
Chef Anton's Cajun Seasoning Condiments $22.00 53
Chef Anton's Gumbo Mix Condiments $21.00 0
Grandma's Boysenberry Spread Condiments $25.00 120
Uncle Bob's Organic Dried Pears Produce $30.00 15
Northwoods Cranberry Sauce Condiments $40.00 6
Mishi Kobe Niku Meat/Poultry $97.00 29
Ikura Seafood $31.00 31
Queso Cabrales Dairy Products $21.00 22
Queso Manchego La Pastora Dairy Products $38.00 86
Konbu Seafood $6.00 24
Tofu Produce $23.00 35
Genen Shouyu Condiments $16.00 39
Pavlova Confections $17.00 29
Alice Mutton Meat/Poultry $39.00 0
Carnarvon Tigers Seafood $63.00 42
Teatime Chocolate Biscuits Confections $9.00 25
Sir Rodney's Marmalade Confections $81.00 40
Data grid with 77 rows and 4 columns
Selected products:
  • Chang
  • Aniseed Syrup
  • Chef Anton's Cajun Seasoning
  • Chef Anton's Gumbo Mix

The DevExpress Blazor Grid supports both single and multiple row selection. Enable the AllowSelectRowByClick option to select rows via mouse clicks.

In this demo, users can select multiple rows simultaneously (the SelectionMode property is set to Multiple — the default value). To select a range of rows, a user can click the first row in the range, hold down the Shift key, and click the last row in the range. To add/remove a row to/from selection, users must hold down the Ctrl key and click the appropriate row.

Implement two-way binding for the SelectedDataItems property to specify and access selected data items.

The Grid compares and identifies data items to ensure accurate selection operations. If your data object has a primary key, assign it to the KeyFieldName or KeyFieldNames property. Otherwise, the Grid uses standard .NET value equality comparison to identify data items.