Skip to main content

DxGrid.DataColumnCellEditTemplate Property

Allows you to replace automatically generated editors with custom content in all edit cells displayed for data columns.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

[Parameter]
public RenderFragment<GridDataColumnCellEditTemplateContext> DataColumnCellEditTemplate { get; set; }

Property Value

Type Description
RenderFragment<GridDataColumnCellEditTemplateContext>

The common template for data column edit cells.

Remarks

In EditRow and EditCell edit modes, the Grid displays automatically generated inline editors in the edited row. Editor types depend on the data types of the corresponding column fields. You can use a column’s EditSettings property to customize the default column editor or replace it with another editor.

A column’s CellEditTemplate allows you to display custom content in the column edit cell. To define a common cell edit template for all data columns, use the Grid’s DataColumnCellEditTemplate. Both templates include the context parameter that contains DataColumn and DataItem objects. The context’s Grid property allows you to access the Grid and its extensive API.

Note

The Grid does not render automatically generated editors in edit cells if you define DataColumnCellEditTemplate.

The example below demonstrates how to render edit cell editors within the <div> element when editor validation fails. You can hover the mouse pointer over the element to display a tooltip with the corresponding validation message:

Data Column Cell Edit Template

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid @ref="Grid"
        Data="DataSource"
        KeyFieldName="EmployeeId"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <DataColumnCellEditTemplate>
        @{
            var employee = (EditableEmployee)context.EditModel;
        }
        <ValidationMessage EditTemplateContext="context">
            @switch(context.DataColumn.FieldName) {
                case "FirstName":
                    <DxTextBox @bind-Text="@employee.FirstName" CssClass="w-100" />
                    break;
                case "LastName":
                    <DxTextBox @bind-Text="@employee.LastName" CssClass="w-100" />
                    break;
                case "Title":
                    <DxTextBox @bind-Text="@employee.Title" CssClass="w-100" />
                    break;
                case "HireDate":
                    <DxDateEdit @bind-Date="@employee.HireDate" CssClass="w-100" />
                    break;
                default:
                    throw new NotImplementedException();
            }
        </ValidationMessage>
    </DataColumnCellEditTemplate>
</DxGrid>

@code {
    IEnumerable<object> Data { get; set; }
    NorthwindContext Northwind { get; set; }
    DateTime DateTimeValue { get; set; } = DateTime.Today;
    bool CalendarVisible { get; set; }

    void OnChangeDayButtonClick(bool isAdd) {
        CalendarVisible = false;
        DateTimeValue = DateTimeValue.AddDays(isAdd ? 1 : -1);
    }
    // ...
}

For more information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.

See Also