Skip to main content

DxGridCommandColumn.CellDisplayTemplate Property

Specifies a template used to display command column cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridCommandColumnCellDisplayTemplateContext> CellDisplayTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridCommandColumnCellDisplayTemplateContext>

A template for command column cells.

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.

Blazor Grid Command Column

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

You can define the CellDisplayTemplate to display custom command elements for cells in display mode. Use the template’s context parameter to access CommandColumn and DataItem objects. The Grid object allows you to access the Grid component and call the following edit-related methods:

StartEditNewRowAsync
Starts editing a new row.
StartEditRowAsync | StartEditDataItemAsync
Start editing the specified row or data item.
ShowRowDeleteConfirmation | ShowDataItemDeleteConfirmation
Display the delete confirmation dialog for the specified row or data item.

Specify the CellEditTemplate to display custom command elements for cells in edit mode. Use HeaderTemplate and FilterRowCellTemplate to display custom content in the command column header and filter row.

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:

@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);
    }
}

Blazor Grid Editing Custom Command Buttons

View Example: Use icons instead of default command buttons View Example: Disable row editing depending on row values

Implements

See Also