DxDataGrid<T>.HeaderTemplate Property

Specifies a template for a Data Grid’s header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public RenderFragment HeaderTemplate { get; set; }

Property Value

Type Description
RenderFragment

A template for a Data Grid’s header.

Remarks

Use the HeaderTemplate property to customize the Data Grid’s header. For example, you can use this template to add a toolbar to a Data Grid component:

  1. Add the HeaderTemplate to the Data Grid’s markup.
  2. Add buttons (DxToolbarItem objects) to the Toolbar component in this template. Each button can display an icon, text, or both.
  3. Use the Columns property to add grid columns.
<DxDataGrid Data="@Data">
    <HeaderTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain" ItemSize="ToolbarItemSize.Small">
            <DxToolbarItem Text="New" BeginGroup="true" IconCssClass="grid-toolbar-new" />
            <DxToolbarItem Text="Edit" IconCssClass="grid-toolbar-edit" />
            <DxToolbarItem Text="Delete" IconCssClass="grid-toolbar-delete" />
            <DxToolbarItem Text="Show Filter Row" BeginGroup="true" GroupName="GroupName" />
            <DxToolbarItem Text="Documentation" 
                           NavigateUrl="https://docs.devexpress.com/Blazor/401086/data-grid" 
                           BeginGroup="true" 
                           Alignment="ToolbarItemAlignment.Right"
                           target="_blank" />
        </DxToolbar>
    </HeaderTemplate>
    <Columns>
        <DxDataGridColumn Field="@nameof(Order.Product)" />
        <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)" />
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitPrice)" />
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitsInOrder)" />
        <DxDataGridComboBoxColumn Field="@nameof(Order.OrderStatus)" Data="@DataStatus" />
    </Columns>
    </DxDataGrid>

DataGrid Toolbar

You can also use the HeaderTemplate property to display the Column Chooser in the Data Grid’s toolbar. For more information, refer to the Column Chooser’s documentation.

Run Demo: Data Grid - Toolbar

See Also