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 Angular 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 multiple editing modes represented by the following 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.
External Editing Directive—provides external dialog 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.

External Editing

The kendoGridExternalEditing directive allows you to easily set up a Grid that opens a built-in external dialog for editing its data items using Reactive Forms.

The following example demonstrates the kendoGridExternalEditing directive in action.

Change Theme

Theme

Loading ...

To configure the Grid with the ExternalEditingDirective:

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

html

<kendo-grid [kendoGridExternalEditing]="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.

Customizing the External Editing

You have the ability to customize the edit form of the external editing dialog by utilizing the formSettings property that the kendoGridExternalEditing directive provides. This property enables you to configure the orientation of the edit form, the hints, labels, and error messages of each field, as well as display FloatingLabels instead of the default Label components.

html
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [formSettings]="formSettings">
    ...
</kendo-grid>
ts
public formSettings: FormSettings = {
    fields: {
        'ProductName': {
            hint: 'Enter a name for this product.',
            errors: {
                required: 'A product name is required.'
            },
            label: 'Name'
        }
    },
    floatingLabels: true,
    orientation: 'vertical'
};

The kendoGridExternalEditing directive also provides a dialogSettings option, which allows you to customize the dialog containing the edit form by passing a FormDialogSettings object with the desired properties.

html
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [dialogSettings]="dialogSettings">
    ...
</kendo-grid>
ts
public dialogSettings: FormDialogSettings = { 
    actionsLayout: 'end', 
    title: 'My Edit Form', 
    width: 400 
};

The following example demonstrates how to customize the default form and dialog settings of the kendoGridExternalEditing directive.

Change Theme

Theme

Loading ...

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.

Since version 19.0.0 the removeConfirmation option defaults to true. To prevent displaying the default confirmation dialog, set it to false.

If you want to display a custom confirmation dialog, pass a custom callback 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 custom 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 ...