# Angular Data Grid Custom Editors

The [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) enables you to customize the built-in editing functionality by implementing custom editor components using templates. You can replace the default editors with a suitable Kendo UI for Angular component or custom input control to create a tailored editing experience.

The Grid provides several [built-in cell editor types](https://www.telerik.com/kendo-angular-ui/components/grid/editing/basics#quick-setup) by default. You have the ability to customize the built-in editors and render custom ones that better meet your application's requirements by using the [`EditTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/edittemplatedirective).

The following example demonstrates how to use the `EditTemplateDirective` and [Reactive Forms](https://angular.dev/guide/forms/dynamic-forms#bootstrap) to build a custom [DropDownList](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist) editor for the "Category" column.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/editing/custom-editing/source.txt)

## Setting Up Custom Editors

To implement custom editors for the Grid columns:

1. Use the `EditTemplateDirective` of the Grid to define editor templates for the columns that need custom editing components.

   ```html
   <kendo-grid-column field="CategoryID" title="Category">
     <ng-template kendoGridEditTemplate let-formGroup="formGroup" let-dataItem="dataItem">
       ...
     </ng-template>
   </kendo-grid-column>
   ```

2. Use the [`formGroup`](https://www.telerik.com/kendo-angular-ui/components/grid/api/edittemplatedirective) field passed by the `EditTemplateDirective` to bind your custom editor to the form and set its value:

   ```html
   <ng-template kendoGridEditTemplate let-formGroup="formGroup">
       <kendo-dropdownlist [formControl]="formGroup.get('CategoryID')">
       </kendo-dropdownlist>
   </ng-template>
   ```

3. For manual control of the editing operations, handle the edit-related [Grid events](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#events):

   ```html
   <kendo-grid
       (edit)="editHandler($event)"
       (cancel)="cancelHandler($event)"
       (save)="saveHandler($event)"
       (remove)="removeHandler($event)"
       (add)="addHandler($event)">
   </kendo-grid>
   ```

4. To perform the required editing operations, use the built-in [Grid methods](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#methods):

   * [`addRow()`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#addrow)—Creates a new row editor at the beginning of the Grid.
   * [`editRow()`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#editrow)—Places the specified row in edit mode. The `EditTemplateDirective` is evaluated.
   * [`closeRow()`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#closerow)—Closes the editor for a given row.
   * [`editCell()`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#editcell)—Puts a single cell in edit mode.
   * [`closeCell()`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#closecell)—Closes the editor for the current cell in edit mode and fires the `cellClose` event.

   > You can find more details on how to implement manual editing for the Grid in the [Manual Setup](https://www.telerik.com/kendo-angular-ui/components/grid/editing/basics#manual-setup) article.

## Always-Rendered Cell Editors

For scenarios where you want editing to be immediately available without entering explicit edit mode, you can render editor components directly in the Grid cells using the [`CellTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/celltemplatedirective).

> Rendering many editors simultaneously can slow down the application. Consider limiting the number of editable columns and rows, for example, by using [paging](https://www.telerik.com/kendo-angular-ui/components/grid/paging/manual-paging).

The following example demonstrates how to render [`DropDownList`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist) and [`NumericTextBox`](https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox) components in the cells of particular Grid columns using the `CellTemplateDirective`.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/editing/render-editors-in-cell-template/source.txt)

To implement editors for the Grid columns that are always rendered, eliminating the need to enter edit mode:

1. Define the [`CellTemplateDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/columns/templates#cell-template) for columns that need constantly displayed editors and render the desired component:

   ```html
   <kendo-grid-column field="ProductName" title="Product Name">
       <ng-template kendoGridCellTemplate let-dataItem let-column="column">
           <kendo-dropdownlist
               [data]="names"
               [formControl]="getFormControl(dataItem, column.field)">
           </kendo-dropdownlist>
       </ng-template>
   </kendo-grid-column>
   ```

2. Create a `FormGroup` for each data item (row) in the Grid and implement a method to bind the custom editor component to the appropriate `FormControl`.

   ```typescript
   // Return the appropriate FormControl for each data item and field.
   public getFormControl(dataItem: Product, field: string): FormControl {
       return <FormControl>(
           (this.formGroups.get('items') as FormArray).controls
               .find((i) => i.value.ProductID === dataItem.ProductID)
               .get(field)
       );
   }
   ```

3. (Optional) Use the `kendoGridFocusable` directive to make the custom editor accessible with keyboard shortcuts. For more details, see [Controlling the Focus](https://www.telerik.com/kendo-angular-ui/components/grid/keyboard-navigation#controlling-the-focus).

   ```html
   <kendo-dropdownlist
       kendoGridFocusable
       [data]="names"
       [formControl]="getFormControl(dataItem, column.field)">
   </kendo-dropdownlist>
   ```

## Suggested Links

* [Angular Grid Editing Basics](https://www.telerik.com/kendo-angular-ui/components/grid/editing/basics)
* [Grid Editing Validation](https://www.telerik.com/kendo-angular-ui/components/grid/editing/validation)
* [Inline Editing](https://www.telerik.com/kendo-angular-ui/components/grid/editing/inline-editing)
* [In-Cell Editing](https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)