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.HeaderTemplate Property

Specifies a template for the selection column header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Property Value

Type Description
RenderFragment<GridSelectionColumnHeaderTemplateContext>

The template for the selection column header.

#Remarks

A selection column allows users to select and deselect rows. When the SelectionMode property is set to GridSelectionMode.Multiple (the default value), the selection column displays checkboxes. A user can click the checkbox in the header cell to select or deselect all rows on the current page.

You can define the HeaderTemplate to display custom content in the selection column header. Use the template’s context parameter to access the SelectionColumn and Grid objects. The parameter’s Selected property specifies whether rows on the current page are selected.

The following code snippet displays the custom Select All button in the column header.

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

<DxGrid Data="GridDataSource"
        @bind-SelectedDataItems="@SelectedDataItems"
        KeyFieldName="ProductId"
        @ref="MyGrid">
    <Columns>
        <DxGridSelectionColumn>
            <HeaderTemplate>
                <DxButton Click="() => MyGrid.SelectAllOnPage()" Text="Select All"
                          RenderStyle="ButtonRenderStyle.Link" />
            </HeaderTemplate>
        </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; }
    IGrid MyGrid { 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();
    }
}

Blazor Grid Selection Column Header Template

Note

The select all operation can be temporarily unavailable if there are now data rows to select. For instance, this occurs when 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.

For more information, refer to the following topics:

#Implements

See Also