Skip to main content

DxGrid.SelectionMode Property

Specifies selection mode.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(GridSelectionMode.Multiple)]
[Parameter]
public GridSelectionMode SelectionMode { get; set; }

Property Value

Type Default Description
GridSelectionMode Multiple

A GridSelectionMode enumeration value.

Available values:

Name Description
Multiple

Multiple Grid rows can be selected.

Single

Only a single Grid row can be selected.

Remarks

Use the SelectionMode property to choose between multiple and single row selection modes.

You can do the following to allow users to select Grid rows:

To manage selection in code, you can call the Select* and Deselect* methods. Refer to the Grid’s member table for the list of available methods.

The Grid compares and identifies data items to ensure correct 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.

View Example: Disable Selection Checkboxes in Specific Rows

Multiple Row Selection

The default SelectionMode property value (GridSelectionMode.Multiple) specifies that multiple Grid rows can be selected simultaneously. Implement two-way binding for the SelectedDataItems property to specify and access data items that correspond to selected rows.

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 a row to or remove a row from a selection, a user should hold down the Ctrl key and click that row. On touch devices, use long press gestures to select multiple rows.

In multiple selection mode, the selection column displays checkboxes. Users can select individual rows or click the Select All checkbox in the column header to select or deselect all rows on the current page or on all grid pages depending on the SelectAllCheckboxMode property value.

Blazor Grid Multiple Selection Mode

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        SelectionMode="GridSelectionMode.Multiple"
        AllowSelectRowByClick="true"
        @bind-SelectedDataItems="@SelectedDataItems"
        KeyFieldName="ProductId">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitsInStock" />
    </Columns>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Products
            .ToList();
        SelectedDataItems = GridDataSource.Skip(1).Take(2).ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Run Demo: Data Grid - Multiple Row Selection

Single Row Selection

Set the SelectionMode property to GridSelectionMode.Single to enable single row selection. Implement two-way binding for the SelectedDataItem property to specify and access the data item that corresponds to the selected row.

If you set the AllowSelectRowByClick property to true, users can select only one row by a mouse click. The selection column displays radio buttons in this mode.

Blazor Grid Single Selection Mode

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        AllowSelectRowByClick="true"
        SelectionMode="GridSelectionMode.Single"
        @bind-SelectedDataItem="@SelectedDataItem"
        KeyFieldName="ProductId">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitsInStock" />
    </Columns>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    object SelectedDataItem { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = Northwind.Products
            .ToList();
        SelectedDataItem = GridDataSource.FirstOrDefault();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

For more information about selection in the Grid component, refer to the following topic: Selection and Focus in Blazor Grid.

Implements

See Also