Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGridSelectionColumn.CellDisplayTemplate Property

Specifies a template for selection column cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<GridSelectionColumnCellDisplayTemplateContext>

The template for selection column cells.

#Remarks

A selection column allows users to select and deselect rows. This column contains checkboxes or radio buttons depending on the selection mode.

You can define the CellDisplayTemplate to display custom content in selection column cells that correspond to data rows. Use the template’s context parameter to access the DataItem, SelectionColumn, and Grid objects. The parameter’s Selected property specifies whether the row is selected. The VisibleIndex property returns the row’s visible index.

The following code snippet displays custom Select buttons in column cells and switch to single row selection mode.

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

<DxGrid Data="GridDataSource"
        SelectionMode="GridSelectionMode.Single"
        @bind-SelectedDataItem="@SelectedDataItem"
        KeyFieldName="ProductId"
        @ref="MyGrid">
    <Columns>
        <DxGridSelectionColumn>
            <CellDisplayTemplate >
                <DxButton Click="@(() => MyGrid.SelectDataItem(context.DataItem))"
                          Text="Select" RenderStyle="ButtonRenderStyle.Link"/>
            </CellDisplayTemplate>
        </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; }
    IGrid MyGrid { get; set; }

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

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

Blazor Grid Selection Column Cell Display Template

Note

The select operation can be temporarily unavailable if you bind the Grid to an asynchronous data source (such as a Server Mode data source or GridDevExtremeDataSource). Use the SelectEnabled template parameter to specify the enabled or disabled state for a custom select element.

View Example: Disable Selection Checkboxes in Specific Rows

For more information, refer to the following topics:

See Also