DxGridCommandColumn.CellDisplayTemplate Property

Specifies a template used to display command column cells.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[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.

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:

StartEditNewRowAsyncStarts editing a new row.StartEditRowAsync | StartEditDataItemAsyncStart editing the specified row or data item.ShowRowDeleteConfirmation | ShowDataItemDeleteConfirmationDisplay 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.

Task-Based Examples

Use Custom Icons as Command Buttons

The following code snippet displays Open Iconic icons in command buttons:

Razor
WeatherForecast
WeatherForecastService
CSS

razor

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

<div>
    <DxGrid Data="forecasts" 
            @ref="MyGrid" 
            KeyFieldName="ID" 
            DataItemDeleting="OnDataItemDeleting"
            EditModelSaving="OnEditModelSaving">
        <Columns>
            <DxGridCommandColumn>
                <HeaderTemplate>
                    <a class="oi oi-plus link-decoration" @onclick="@(() => MyGrid.StartEditNewRowAsync())" href="javascript:void(0);"></a>
                </HeaderTemplate>
                <CellDisplayTemplate>
                    <a class="oi oi-pencil link-decoration" @onclick="@(() => MyGrid.StartEditRowAsync(context.VisibleIndex))" href="javascript:void(0);"></a>
                    <a class="oi oi-x link-decoration" @onclick="@(() => MyGrid.ShowDataItemDeleteConfirmation(context.DataItem))" 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>
</div>

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

csharp

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

csharp

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

css

.link-decoration {
    text-decoration: none;
}

View Example: Use Custom Icons as Command Buttons

Restrict Data Editing to Rows That Match Specific Conditions

The following example adds a custom Edit button that becomes active if the Date field’s value is later than the current date:

razor

<DxGrid @ref="myGrid" Data="@forecasts" EditModelSaving="OnEditModelSaving">
    <Columns>
        <DxGridCommandColumn NewButtonVisible=false>
            <CellDisplayTemplate>
                @{
                    var date = context.DataItem != null ? (context.DataItem as WeatherForecast).Date : DateTime.Now;
                    <DxButton Text="Edit"
                              RenderStyle="ButtonRenderStyle.Link"
                              Click="() => myGrid.StartEditDataItemAsync(context.DataItem)"
                              Enabled="@(date >= DateTime.Now)" />
                }
            </CellDisplayTemplate>
        </DxGridCommandColumn>
        <DxGridDataColumn Caption="Date" FieldName="Date"/>
        <DxGridDataColumn Caption="Summary" FieldName="Summary"/>
        <DxGridDataColumn Caption="Temperature (C)" FieldName="TemperatureC"/>
        <DxGridDataColumn Caption="Temperature (F)" FieldName="TemperatureF"/>
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="Date:">
                @editFormContext.GetEditor("Date")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Summary:">
                @editFormContext.GetEditor("Summary")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Temperature (C):">
                @editFormContext.GetEditor("TemperatureC")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Temperature (F):">
                @editFormContext.GetEditor("TemperatureF")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>
@* ... *@
@code {
    List<WeatherForecast>? forecasts;
    IGrid myGrid { get; set; }

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now.AddDays(-2));
    }

    void OnEditModelSaving(GridEditModelSavingEventArgs e) {
        e.CopyChangesToDataItem();
    }
}

View Example: Restrict data editing to rows that match specific conditions

Implements

CellDisplayTemplate