Multiple Row Selection

 
Product Name Category Unit Price Units in Stock
ChaiBeverages$18.0039
ChangBeverages$19.0017
Aniseed SyrupCondiments$10.0013
Chef Anton's Cajun SeasoningCondiments$22.0053
Chef Anton's Gumbo MixCondiments$21.000
Grandma's Boysenberry SpreadCondiments$25.00120
Uncle Bob's Organic Dried PearsProduce$30.0015
Northwoods Cranberry SauceCondiments$40.006
Mishi Kobe NikuMeat/Poultry$97.0029
IkuraSeafood$31.0031
Queso CabralesDairy Products$21.0022
Queso Manchego La PastoraDairy Products$38.0086
KonbuSeafood$6.0024
TofuProduce$23.0035
Genen ShouyuCondiments$16.0039
PavlovaConfections$17.0029
Alice MuttonMeat/Poultry$39.000
Carnarvon TigersSeafood$63.0042
Teatime Chocolate BiscuitsConfections$9.0025
Sir Rodney's MarmaladeConfections$81.0040
Data grid with 77 rows and 4 columns
4 rows are selected
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.