DxGridCommandColumn.CellDisplayTemplate Property

Specifies a template used to display command column cells.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.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.

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 example below 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 View Example: Disable row editing depending on row values

Implements

CellDisplayTemplate