Customize Cell Editors Using CellEditingTemplate

CellEditingTemplate enables customization of the editor displayed when a cell enters edit mode.

Editors can be implemented using:

ComponentOne input controls
Blazor framework controls
Native HTML input elements

This approach enables flexible in-place editing experiences while preserving integration with the FlexGrid editing pipeline.

Use C1TextBox as the Cell Editor

The following example defines a C1TextBox editor using the GridColumn.CellEditingTemplate property.

<GridColumn Binding="Symbol" Width="100">

    <CellEditingTemplate>
        @{
            var casted = (FinancialData)context.DataItem;
        }

        <C1TextBox
            @ref="context.Editor"
            @bind-Text="casted.Symbol" />
    </CellEditingTemplate>

</GridColumn>

Use Blazor InputText as the Cell Editor

The following example defines an InputText editor using the GridColumn.CellEditingTemplate property.

<GridColumn Binding="Symbol" Width="120">

    <CellEditingTemplate>
        @{
            var casted = (FinancialData)context.DataItem;
        }

        <InputText
            @ref="context.Editor"
            @bind-Value="casted.Symbol" />
    </CellEditingTemplate>

</GridColumn>

Use an HTML Input Element as the Cell Editor

The following example defines a native HTML <input> element as the cell editor.

<GridColumn Binding="Symbol" Width="120">

    <CellEditingTemplate>
        @{
            var casted = (FinancialData)context.DataItem;
        }

        <input
            @bind="casted.Symbol"
            @bind:event="oninput" />
    </CellEditingTemplate>

</GridColumn>

After configuring a CellEditingTemplate, the specified editor is displayed whenever the cell enters edit mode.

As a result, FlexGrid supports customizable in-place editing experiences using ComponentOne controls, Blazor framework controls, or native HTML elements depending on application requirements.

Important:
Rendering large numbers of interactive component instances inside grid cells may increase rendering cost and affect scrolling performance.
For large datasets, native HTML elements are generally more efficient than component-based controls.
CellEditingTemplate works only with non-primitive data types.
Editor focus occurs automatically only when the editor inherits from C1View and implements focus functionality. For example, ComponentOne controls such as C1TextBox and C1ComboBox support automatic focus behavior.
For Blazor framework controls or native HTML elements, focus behavior may need to be handled separately depending on the editor implementation.