Multiple Row Selection

The Grid is currently available as a community technology preview (CTP).
 
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
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 GridSelectionMode.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.

Single Row Selection

The Grid is currently available as a community technology preview (CTP).
 
Product Name Category Unit Price Units In Stock Quantity Per Unit Discontinued
Chai Beverages $18.00 39 10 boxes x 20 bags
Chang Beverages $19.00 17 24 - 12 oz bottles
Aniseed Syrup Condiments $10.00 13 12 - 550 ml bottles
Chef Anton's Cajun Seasoning Condiments $22.00 53 48 - 6 oz jars
Chef Anton's Gumbo Mix Condiments $21.00 0 36 boxes
Grandma's Boysenberry Spread Condiments $25.00 120 12 - 8 oz jars
Uncle Bob's Organic Dried Pears Produce $30.00 15 12 - 1 lb pkgs.
Northwoods Cranberry Sauce Condiments $40.00 6 12 - 12 oz jars
Mishi Kobe Niku Meat/Poultry $97.00 29 18 - 500 g pkgs.
Ikura Seafood $31.00 31 12 - 200 ml jars

Selected Product: Chai

In this demo, the Grid allows users to select a single row at any one time. To replicate this behavior, enable the AllowSelectRowByClick option and set the SelectionMode option to GridSelectionMode.Single.

Implement two-way binding for the SelectedDataItem property to specify and access the selected data item.

Selection Column and API

The Grid is currently available as a community technology preview (CTP).
 
Product Name Category Unit Price Units In Stock Quantity Per Unit Discontinued
Chai Beverages $18.00 39 10 boxes x 20 bags
Chang Beverages $19.00 17 24 - 12 oz bottles
Aniseed Syrup Condiments $10.00 13 12 - 550 ml bottles
Chef Anton's Cajun Seasoning Condiments $22.00 53 48 - 6 oz jars
Chef Anton's Gumbo Mix Condiments $21.00 0 36 boxes
Grandma's Boysenberry Spread Condiments $25.00 120 12 - 8 oz jars
Uncle Bob's Organic Dried Pears Produce $30.00 15 12 - 1 lb pkgs.
Northwoods Cranberry Sauce Condiments $40.00 6 12 - 12 oz jars
Mishi Kobe Niku Meat/Poultry $97.00 29 18 - 500 g pkgs.
Ikura Seafood $31.00 31 12 - 200 ml jars

The number of selected products: 12

Use our Blazor Data Grid’s built-in selection column to simplify row selection. To display this column, declare a DxGridSelectionColumn object in the Columns template.

  • In multiple selection mode (like this demo), the column contains checkboxes. The checkbox in the column’s header selects/deselects all rows on the current page.
  • In single selection mode, the column contains radio buttons.

Use the following API to manage row selection in code:

You can click buttons at the top of the demo card to select and deselect rows in the selected category and clear the selection.