Skip to main content

DxDataGrid<T>.HeaderTemplate Property

Specifies a template for a Data Grid’s header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

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

Property Value

Type Description
RenderFragment

A template for a Data Grid’s header.

Remarks

Important

The Data Grid was moved to maintenance support mode. No new features/capabilities will be added to this component. We recommend that you migrate to the Grid component.

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 @ref="grid"
            Data="@Data"
            ShowFilterRow="@ShowFilterRow"
            @bind-SingleSelectedDataRow="@SelectedRow"
            RowInsertingAsync="@OnRowInsertingAsync"
            RowUpdatingAsync="@OnRowUpdatingAsync"
            RowRemovingAsync="@OnRowRemovingAsync"
            InitNewRow="@OnInitNewRow">
    <HeaderTemplate>
        <DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain"
                   ItemSizeMode="SizeMode.Small" >
            <DxToolbarItem Text="New" BeginGroup="true" Click="@OnAddNewClick" IconCssClass="grid-toolbar-new" />
            <DxToolbarItem Text="Edit" Click="@OnEditClick" IconCssClass="grid-toolbar-edit" Enabled="@Enabled" />
            <DxToolbarItem Text="Delete" Click="@OnDeleteClick" IconCssClass="grid-toolbar-delete" Enabled="@Enabled" />
            <DxToolbarItem Text="Show Filter Row" BeginGroup="true" GroupName="FilterRow" Click="@OnShowFilterRow" IconCssClass="grid-toolbar-filter-row" />
            <DxToolbarItem Text="Examples" NavigateUrl="https://supportcenter.devexpress.com/ticket/list/?preset=824230fc-7d61-47a7-a3f9-ea0eed42df56" BeginGroup="true"
                           Alignment="ToolbarItemAlignment.Right" IconCssClass="grid-toolbar-document" target="_blank" />
        </DxToolbar>
      </HeaderTemplate>
      <Columns>
        <DxDataGridColumn Field="@nameof(Employee.FirstName)" />
            <DxDataGridColumn Field="@nameof(Employee.LastName)" />
            <DxDataGridColumn Field="@nameof(Employee.Title)" />
            <DxDataGridColumn Field="@nameof(Employee.TitleOfCourtesy)" />
            <DxDataGridDateEditColumn Field="@nameof(Employee.BirthDate)" />
            <DxDataGridDateEditColumn Field="@nameof(Employee.HireDate)" />
      </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