DxDataGrid<T>.SelectionMode Property

Specifies whether users can select rows in the grid.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
[DefaultValue(DataGridSelectionMode.SingleSelectedDataRow)]
public DataGridSelectionMode SelectionMode { get; set; }

Property Value

Type Default Description
DataGridSelectionMode

SingleSelectedDataRow

One of the DataGridSelectionMode enumeration values.

Available values:

Name Description
SingleSelectedDataRow

Users can select a single data row only.

MultipleSelectedDataRows

Users can select multiple data rows.

OptimizedMultipleSelection

Users can select multiple data rows. The data grid stores information about the selection to improve performance.

None

Selection is disabled.

Remarks

Once a user clicks a data row, the row is selected (highlighted). Use the SelectionMode property to specify one of the selection modes above.

Single Selection

The default property value (DataGridSelectionMode.SingleSelectedDataRow) specifies that users can select only one data row at a time. To access/specify a selected row, use the SingleSelectedDataRow property.

If data source items are not the same objects on each page load, specify the KeyFieldName property.

<DxDataGrid Data="@Products" 
            @bind-SingleSelectedDataRow="@SelectedProduct" 
            KeyFieldName="@nameof(Product.ProductId)">
    <!-- ... -->
</DxDataGrid>

@code {
    IEnumerable<Product> Products { get; set; }
    Product selectedProduct;
    public Product SelectedProduct {
        get {
            return selectedProduct;
        }
        set {
            selectedProduct = value;
            InvokeAsync(StateHasChanged);
        }
    }
    protected override async Task OnInitializedAsync() {
        Products = await NwindDataService.GetProductsAsync();
        Categories = await NwindDataService.GetCategoriesAsync();
        SelectedProduct = Products.FirstOrDefault();
    }
}

Run Demo: Data Grid - Single Row Selection

Multiple Selection

Set the SelectionMode property to DataGridSelectionMode.MultipleSelectedDataRows to enable multiple selection in the Data Grid. To select a range of rows, users should hold down the Shift key and click the first and last rows in the range. To add/remove a row to/from selection, users should hold down the Ctrl key and click the row.

Use the MultipleSelectedDataRows property to access/specify the selected items. To select data rows with checkboxes, add the DxDataGridSelectionColumn column to the grid.

If data source items are not the same objects on each page load, specify the KeyFieldName property.

<DxDataGrid Data="@DataSource"
            SelectionMode="DataGridSelectionMode.MultipleSelectedDataRows"
            @bind-MultipleSelectedDataRows="@SelectedProducts">
    <DxDataGridSelectionColumn></DxDataGridSelectionColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
</DxDataGrid>

@code {
    IEnumerable<ProductFlat> selectedProducts;
    IEnumerable<ProductFlat> SelectedProducts {
        get { return selectedProducts; }
        set {
            selectedProducts = value;
            InvokeAsync(StateHasChanged);
        }
    }
}

Run Demo: Data Grid - Multiple Row Selection

Multiple Selection With Optimized Performance

If your Data Grid contains a significant number of rows and you want to enable multiple row selection, use selection mode with optimized performance.

  1. Set the SelectionMode property to DataGridSelectionMode.OptimizedMultipleSelection.
  2. Specify the KeyFieldName property. Note that the key field’s values should be unique.

This mode reduces the amount of stored data and increases performance, but may corrupt database integrity.

In this mode, the Data Grid does not store row data objects and information about all the selected rows. The Data Grid stores row key values instead. If you select all rows in the Data Grid UI or in code, and then unselect rows, the component stores keys of unselected rows only (and vice versa).

To track selection changes in this mode, use the OptimizedMultipleSelectionChanged event as demonstrated below.

<DxDataGrid Data="@DataSource"
            KeyFieldName="Id"
            SelectionMode="DataGridSelectionMode.OptimizedMultipleSelection"
            SelectAllMode="DataGridSelectAllMode.AllPages"
            OptimizedMultipleSelectionChanged="OnSelectionChanged">
    <DxDataGridSelectionColumn></DxDataGridSelectionColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
</DxDataGrid>

@code {
    int SelectedCount { get; set; }

    int StoredSelectedCount { get; set; }

    int StoredUnselectedCount { get; set; }

    protected void OnSelectionChanged(DataGridSelection<ProductFlat> selection) {
        StoredSelectedCount = selection.SelectedKeysStored.Count();
        StoredUnselectedCount = selection.UnselectedKeysStored.Count();
        SelectedCount = selection.SelectedKeys.Count();
        InvokeAsync(StateHasChanged);
    }
}

Run Demo: Data Grid - Multiple Selection with Optimized Performance

Disable Selection

Set the SelectionMode property to DataGridSelectionMode.None to disable selection in the Data Grid.

<DxDataGrid Data="@DataSource"
            SelectionMode="DataGridSelectionMode.None">
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
</DxDataGrid>
See Also