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