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

Angular Data Grid Built-In Editing Directives

The editing directives simplify the implementation of the editing operations. You can easily create common editing scenarios with less code and maintain clean and readable configurations.

The editing directives handle the necessary Grid events internally which helps you cut down the repetitive boilerplate code. As a result, the component code is cleaner, shorter, and more concise.

The Data Grid offers two editing modes represented by three built-in directives:

Inline Editing mode—enabled by the following directives:
- Reactive Editing Directive
- Template Editing Directive
In-Cell Editing Directive—provides cell editing that uses reactive forms

By default, the built-in editing directives automatically modify the data that is passed to the Grid. This is applicable regardless of the data binding mechanism being used (the kendoGridBinding directive or the data input property) if binding a plain array to the Grid.

The built-in editing directives of the Grid allows you to:

Easily display a Confirmation Dialog before removing a record.
Completely customize the editing behavior by specifying Custom Editing Service.

Inline Editing

The inline editing of the Grid toggles the entire Grid row into edit mode. To perform the necessary CRUD (create, remove, updated, and delete) operations, click the corresponding buttons.

Based on the used Angular Forms, the Grid exposes two built-in editing directives:

kendoGridReactiveEditing—for Reactive Forms.
kendoGridTemplateEditing— for Template-Driven Forms.

Reactive Editing Directive

The kendoGridReactiveEditing directive simplifies the setup when implementing an editable Grid with Reactive Forms.

The following example demonstrates the kendoGridReactiveEditing directive in action.

Change Theme

Theme

Loading ...

To configure the Grid with the ReactiveEditingDirective:

Provide a callback which returns the FormGroup for the edited item.

html

<kendo-grid [kendoGridReactiveEditing]="createFormGroup">
    ...
</kendo-grid>

In the custom createFormGroup callback, create and return the FormGroup for the row model. For the newly added rows, create a new instance of the model.

public formGroup: FormGroup = this.formBuilder.group({
    ProductID: null,
    ProductName: '',
    UnitPrice: null,
    UnitsInStock: null,
    Discontinued: false,
});

constructor(private formBuilder: FormBuilder) {
    this.createFormGroup = this.createFormGroup.bind(this);
}

public createFormGroup = (args: any): FormGroup => {
    const item = args.isNew ? new Product() : args.dataItem;

    this.formGroup = this.formBuilder.group({
        ProductID: item.ProductID,
        ProductName: [item.ProductName],
        ...
    });

    return this.formGroup;
};

Use the command directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the Command Column Directives section.

Template Editing Directive

The kendoGridTemplateEditing directive simplifies the setup when implementing an editable Grid with Template-Driven Forms.

The following example demonstrates the kendoGridTemplateEditing directive in action.

Change Theme

Theme

Loading ...

To configure the Grid with the TemplateEditingDirective:

Use the EditTemplateDirective of the Grid to display any custom control when the row is in edit mode. Bind the ngModel directive of the custom control to the corresponding value by using the dataItem field provided by the template context.

html

<kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem">
    <kendo-textbox
        [(ngModel)]="dataItem.ProductName"
        name="ProductName"
        required
    ></kendo-textbox>
    </ng-template>
</kendo-grid-column>

Provide a function that creates a new instance of the edited model.

html

<form novalidate #myForm="ngForm">
    <kendo-grid [kendoGridTemplateEditing]="createNewProduct">
    ...
    </kendo-grid>
</form>

export class Product {
    public ProductID: number;
    public ProductName = '';
    ...
}

public createNewProduct(): Product {
    return new Product();
}

Use the command directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the Command Column Directives section.

In-Cell Editing

The kendoGridInCellEditing directive simplifies the setup when implementing an in-cell editable Grid with Reactive Forms.

The following example demonstrates the kendoGridInCellEditing directive in action.

Change Theme

Theme

Loading ...

To configure the Grid with the InCellEditingDirective:

Provide a callback which returns the FormGroup for the edited item.

html

<kendo-grid [kendoGridInCellEditing]="createFormGroup">
    ...
</kendo-grid>

In the custom createFormGroup callback, create and return the FormGroup for the row model. For the newly added rows, create a new instance of the model.

public formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
     this.createFormGroup = this.createFormGroup.bind(this);
}

public createFormGroup = (args: CreateFormGroupArgs): FormGroup => {
    const item = args.isNew ? new Product() : args.dataItem;

    this.formGroup = this.formBuilder.group({
        ProductID: item.ProductID,
        ProductName: [item.ProductName],
        /*...*/
    });

    return this.formGroup;
};

Use the command directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the Command Column Directives section.

If you want to disable the default behavior for specific non-focusable elements, check the article on how to disable the click handler for specific elements.

Command Column Directives

The command directives (kendoGridEditCommand, kendoGridRemoveCommand, and others) encapsulate the logic behind each editing operation. They can be applied to any button element rendered inside the CommandColumnComponent and trigger the corresponding Grid events allowing further customizations.

html

<kendo-grid-command-column title="Commands">
    <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand>Edit</button>
        ...
    </ng-template>
</kendo-grid-command-column>

The following table lists the available built-in command directives.

Command Directive	Description
`AddCommandDirective`	Directive for adding a new item to the Grid. Triggers the `add` event. Can be used within a Toolbar template or `CommandColumnComponent`
`EditCommandDirective`	Directive for editing a row. Triggers the `edit` event.
`RemoveCommandDirective`	Directive for removing a records. Triggers the `remove` event.
`SaveCommandDirective`	Directive for saving the changes. Triggers the `save` event.
`CancelCommandDirective`	Directive for canceling the changes. Triggers the `cancel` event.

Confirmation Dialog on Row Removal

Using any of the built-in editing directives in your project allows you to display a built-in confirmation dialog when the user is about to remove a row.

To show the confirmation dialog, set a function to the removeConfirmation option. The function is expected to return a Boolean value which will indicate if the record will be removed.

If the function returns an Observable or a Promise, resolve it with a Boolean value.

The following example demonstrates how to display a confirmation dialog before removing a row.

Change Theme

Theme

Loading ...

Custom Editing Service

Each directive exposes a built-in editService option which allows you to use a custom editing service.

By default, the built-in editing directives modify the data that is passed to the Grid automatically. You can customize this behavior by implementing a custom service through the editService property. The custom service handles the create, update, and remove data operations and implements the EditService interface.

If the Grid is not bound to a plain array, specify EditService.

The following example demonstrates how to implement a custom editing service.

Change Theme

Theme

Loading ...