DxDataGridBase<T>.SelectionMode Property

Specifies whether users can select rows in the grid.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
public DataGridSelectionMode SelectionMode { get; set; }

Property Value

Type Default Description
DataGridSelectionMode

DataGridSelectionMode.SingleSelectedDataRow

One of the DataGridSelectionMode enumeration values.

Remarks

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.

<DxDataGrid Data="@DataSource"
            @bind-SingleSelectedDataRow="@SelectedProduct">
    <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Category)"></DxDataGridColumn>
    <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)"></DxDataGridColumn>
</DxDataGrid>

@code {
    ProductFlat selectedProduct;
    public ProductFlat SelectedProduct {
        get { return selectedProduct; }
        set {
            selectedProduct = value;
            InvokeAsync(StateHasChanged);
        }
    }
}

Multiple Selection

Set the SelectionMode property to DataGridSelectionMode.MultipleSelectedDataRows to enable multiple selection in the Data Grid. Users can press Ctrl (for individual item) or Shift (for a range of items) and click items to select them.

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

<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);
        }
    }
}

Multiple Selection With Optimized Performance

In this mode, the Data Grid stores information about the selection to improve performance. For example, when the number of selected rows exceeds the number of unselected rows, the grid stores information about unselected rows only.

Set the SelectionMode property to DataGridSelectionMode.OptimizedMultipleSelection to enable multiple selection with optimized performance in the Data Grid. This mode also requires that you specify the KeyFieldName property.

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);
    }
}

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