# Customize Cell Editors Using CellEditingTemplate

## Content

`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.

```auto
<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.

```auto
<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.

```auto
<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.

>type=info
> 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.