New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Custom Editors

The Angular 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 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.

The following example demonstrates how to use the EditTemplateDirective and Reactive Forms to build a custom DropDownList editor for the "Category" column.

Change Theme

Theme

Loading ...

Setting Up Custom Editors

To implement custom editors for the Grid columns:

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>

Use the formGroup 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>

For manual control of the editing operations, handle the edit-related Grid events:

html

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

To perform the required editing operations, use the built-in Grid methods:
- addRow()—Creates a new row editor at the beginning of the Grid.
- editRow()—Places the specified row in edit mode. The EditTemplateDirective is evaluated.
- closeRow()—Closes the editor for a given row.
- editCell()—Puts a single cell in edit mode.
- 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 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.

Rendering many editors simultaneously can slow down the application. Consider limiting the number of editable columns and rows, for example, by using paging.

The following example demonstrates how to render DropDownList and NumericTextBox components in the cells of particular Grid columns using the CellTemplateDirective.

Change Theme

Theme

Loading ...

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

Define the CellTemplateDirective 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>

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)
    );
}

(Optional) Use the kendoGridFocusable directive to make the custom editor accessible with keyboard shortcuts. For more details, see Controlling the Focus.

html

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

Angular Data Grid Custom Editors

Setting Up Custom Editors

Always-Rendered Cell Editors

Suggested Links