Skip to main content

DxGridSelectionColumn Class

A selection column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxGridSelectionColumn :
    DxGridColumn,
    IGridSelectionColumn,
    IGridColumn

Remarks

Declare a DxGridSelectionColumn object in the Columns template to display the column that allows users to select and deselect rows. The column contains checkboxes or radio buttons depending on the selection mode.

Enable the AllowSelectRowByClick property to allow users to select and deselect rows by mouse clicks, tap gestures, and keyboard shortcuts.

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.

Run Demo: Data Grid - Selection Column

Multiple Row Selection

When the SelectionMode property is set to Multiple (the default value), the selection column displays checkboxes. Users can click them to select and deselect individual rows. The checkbox in the column’s header selects or deselects all rows on the current page or on all grid pages depending on the SelectAllCheckboxMode property value. To hide this checkbox, disable the AllowSelectAll option.

Implement two-way binding for the SelectedDataItems property to specify and access data items that correspond to selected rows. Use the FixedPosition property to freeze the selection column and keep it visible on screen while users scroll the Grid horizontally.

Blazor Grid Selection Column Multiple Mode

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

<DxGrid Data="GridDataSource"
        @bind-SelectedDataItems="@SelectedDataItems"
        KeyFieldName="ProductId">
    <Columns>
        <DxGridSelectionColumn />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
        <DxGridDataColumn FieldName="UnitsInStock" />
    </Columns>
</DxGrid>

<br />
<div>
    <b>Selected products:</b>
    @foreach (var product in SelectedDataItems.Cast<Product>()) {
        <li>@product.ProductName</li>
    }
</div>

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

Refer to the following example for more information on how to delete the selected rows when a user clicks a button: Grid for Blazor - How to delete selected rows.

Single Row Selection

When the SelectionMode property is set to Single, the selection column displays radio buttons. Users can click a button to select one row at a time.

Implement two-way binding for the SelectedDataItem property to specify and access the data item that corresponds to the selected row. Use the FixedPosition property to freeze the selection column and keep it visible on screen while users scroll the Grid horizontally.

Blazor Grid Selection Column Single Mode

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

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

<br />
<div>
    <p><b>Selected product:</b> @((SelectedDataItem as Product)?.ProductName ?? "(none)")</p>
</div>

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

View Example: Disable Selection Checkboxes in Specific Rows

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

Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DevExpress.Blazor.Internal.GridColumnBase
DxGridColumn
DxGridSelectionColumn
See Also