DxGridCommandColumn.HeaderTemplate Property

Specifies a template used to display the command column header.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridCommandColumnHeaderTemplateContext> HeaderTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridCommandColumnHeaderTemplateContext>	A template for the command column header.

Remarks

The command column displays predefined New, Edit, and Delete command buttons for data rows in display mode. In EditRow and EditCell edit modes, this column displays Save and Cancel buttons for the edited row. In the filter row, the column displays the Clear button.

Read Tutorial: Edit Data in Blazor Grid Read Tutorial: Templates in Blazor Grid

Define the HeaderTemplate to display custom content in the command column header. Use the template’s context parameter to access the CommandColumn object. The Grid object allows you to access the component and call edit-related methods. For instance, call the StartEditNewRowAsync method to start editing a new data row.

Specify the CellDisplayTemplate to display custom command elements for cells in display mode. The CellEditTemplate allows you to display custom command elements for cells in edit mode. To display custom content in the filter row, define the FilterRowCellTemplate.

Note

Add, Edit, and Delete operations can be temporarily unavailable if you bind the Grid to an asynchronous data source (such as a Server Mode data source or GridDevExtremeDataSource). Use NewEnabled, EditEnabled, and DeleteEnabled template parameters to specify the enabled or disabled state for custom command elements.

The following code snippet displays icons instead of default command buttons:

Razor

@page "/"
@using CommandButtonsWithIcons.Data
@inject WeatherForecastService ForecastService

<DxGrid Data="forecasts" 
        @ref="MyGrid" 
        KeyFieldName="ID" 
        DataItemDeleting="OnDataItemDeleting"
        EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn>
            <HeaderTemplate>
                <a class="oi oi-plus" @onclick="@(() => MyGrid.StartEditNewRowAsync())" style="text-decoration: none;" href="javascript:void(0);"></a>
            </HeaderTemplate>
            <CellDisplayTemplate>
                <a class="oi oi-pencil" @onclick="@(() => MyGrid.StartEditRowAsync(context.VisibleIndex))" style="text-decoration: none;" href="javascript:void(0);"></a>
                <a class="oi oi-x" @onclick="@(() => MyGrid.ShowDataItemDeleteConfirmation(context.DataItem))" style="text-decoration: none;" href="javascript:void(0);"></a>
            </CellDisplayTemplate>
        </DxGridCommandColumn>
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureC) Caption="Temp. (C)" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.TemperatureF) Caption="Temp. (F)" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.Summary) Caption="Summary" />
        <DxGridDataColumn FieldName=@nameof(WeatherForecast.Date) DisplayFormat="dd/MM/yyyy" />
    </Columns>
    <EditFormTemplate Context="EditFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="Temp. (C)">
                @EditFormContext.GetEditor("TemperatureC")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Summary">
                @EditFormContext.GetEditor("Summary")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Date">
                @EditFormContext.GetEditor("Date")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    string[]? summaries;
    private List<WeatherForecast>? forecasts;
    DxGrid? MyGrid;
    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync();
        summaries = ForecastService.Summaries;
    }
    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        forecasts = await ForecastService.ChangeForecastAsync((WeatherForecast)e.EditModel);
    }
    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
        if (e.DataItem != null)
            await ForecastService.Remove((WeatherForecast)e.DataItem);
    }
}

WeatherForecast

namespace CommandButtonsWithIcons.Data
{
    public class WeatherForecast
    {
        public int ID { get; set; }
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string? Summary { get; set; }
    }
}

WeatherForecastService

namespace CommandButtonsWithIcons.Data {
    public class WeatherForecastService {
        public readonly string[] Summaries = new[] {
            "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching"
        };
        private List<WeatherForecast>? Forecasts;
        public Task<List<WeatherForecast>> GetForecastAsync() {
            if (Forecasts == null) {
                var rnd = new Random();
                Forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
                    ID = index,
                    Date = DateTime.Today.AddDays(index),
                    TemperatureC = rnd.Next(-20, 55),
                    Summary = Summaries[rnd.Next(Summaries.Length)]
                }).ToList();
            }
            return Task.FromResult(Forecasts);
        }
        public Task<List<WeatherForecast>> ChangeForecastAsync(WeatherForecast changed) {
            var orginalForecast = Forecasts.FirstOrDefault(i => i.ID == changed.ID);
            if (orginalForecast != null) {
                orginalForecast.TemperatureC = changed.TemperatureC;
                orginalForecast.Summary = changed.Summary;
                orginalForecast.Date = changed.Date;
            }
            else {
                Forecasts.Add(changed);
            }
            return Task.FromResult(Forecasts);
        }
        public Task<List<WeatherForecast>> Remove(WeatherForecast forecast) {
            Forecasts.Remove(forecast);
            return Task.FromResult(Forecasts);
        }
    }
}

View Example: Use icons instead of default command buttons

Implements

HeaderTemplate