Skip to main content
All docs
V24.1

Cell Editors in Blazor Grid

  • 5 minutes to read

The Grid component generates and configures cell editors for individual columns based on associated data types. The component displays these cell editors in the filter row and edit cells. You can display an automatically generated column editor in the edit or pop-up edit form.

Blazor Grid Inline Edit Row

This topic describes how to customize cell editors displayed during edit operations. For more information about filter row cell editors, refer to the following help topics:

Configure Cell Editors

You can declare an object that contains editor settings in the DxGridDataColumn.EditSettings property to customize the default editor or replace it with another editor. If the editor does not support the associated data type, the Grid uses a read-only text box instead. The table below lists classes that define cell editor settings and the corresponding data types:

Editor Settings

Generated for Data Types

Supported Data Types

DxCheckBoxSettings

Boolean

All data types

DxComboBoxSettings

Enum

All data types

DxDateEditSettings

DateOnly, DateTime, DateTimeOffset

DateOnly, DateTime, DateTimeOffset

DxMaskedInputSettings

Never generated

Numeric, String, TimeSpan, TimeOnly,
DateTime, DateOnly, DateTimeOffset

DxMemoSettings

Never generated

String

DxSpinEditSettings

Numeric

Numeric

DxTextBoxSettings

String

String

DxTimeEditSettings

TimeOnly

TimeOnly, TimeSpan, DateTime

The following code snippet customizes settings of an automatically generated spin editor:

<DxGrid Data="@products" ShowFilterRow="true" EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductID" >
            <EditSettings>
                <DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
    </Columns>
</DxGrid>

At runtime, handle the CustomizeDataRowEditor event to customize a data row editor separately from the filter row editor. Call the GetColumnEditSettings method to access and customize editor settings.

Cell Edit Template

The column’s CellEditTemplate allows you to display custom content in the data column’s 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

When you place a templated component in the edit cell template, a Razor error may occur. To prevent this error, specify the Context parameter explicitly either for the Grid template or for the nested component.

The following code snippet displays a date editor with custom command buttons in an edit cell:

Blazor Grid Inline Edit Row

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

<DxGrid @ref="Grid"
        Data="Data"
        KeyFieldName="EmployeeId"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate">
            <CellEditTemplate>
                @{
                    var employee = (Employee)context.EditModel;
                }
                <DxDateEdit @bind-Date="@employee.HireDate">
                    <Buttons>
                        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left-small"
                                        Tooltip="Previous date"
                                        Position="@EditorButtonPosition.Left"
                                        Click="@(_ => employee.HireDate = employee.HireDate?.AddDays(-1))" />
                        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right-small"
                                        Tooltip="Next date"
                                        Position="@EditorButtonPosition.Right"
                                        Click="@(_ => employee.HireDate = employee.HireDate?.AddDays(1))" />
                    </Buttons>
                </DxDateEdit>
            </CellEditTemplate>
        </DxGridDataColumn>
    </Columns>
</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);
    }
    // ...
}

View Example: How to implement cascading combo boxes