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

Angular Data Grid In-Cell Editing

The in-cell editing in the Angular Grid allows the user to click and update individual cells like in Excel. This eliminates the need of defining separate Edit, Update, and Cancel buttons.

Users can navigate through the cells with the arrow keys and update the cell value by pressing the Enter key. For all supported shortcuts, see the Keyboard Navigation section.

This article includes a step-by-step guide on how to enable the in-cell editing approach by manually handling the corresponding events.

Data-Binding Directives vs. Manual Setup

The Grid provides an In-Cell Editing Directive that significantly reduces the amount of boiler plate code required to implement the editing functionality. Try it out before using the more flexible, but verbose manual setup.

The following example demonstrates the Grid in-cell editing feature.

Change Theme

Theme

Loading ...

By default, the Grid handles user clicks on non-focusable elements within the cell. To change this behavior, you can disable the click handler for specific elements.

To enable the in-cell editing mode of the Grid:

Handle the built-in cellClick and cellClose events.

html

<kendo-grid
    ...
    (cellClick)="cellClickHandler($event)"
    (cellClose)="cellCloseHandler($event)"
>
</kendo-grid>

Use the editCell method in the cellClick event handler to put a cell in edit mode. The editCell method expects the following arguments:
- The row index of the Grid row which contains the edited cell
- The column index of the Grid column row which contains the edited cell
- A FormGroup instance based on the data item that is associated with the edited cell
ts
```
public cellClickHandler(args: CellClickEvent) {
    ...
    args.sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
}
```

Use the cellClose event handler to update and persist the data accordingly.

public cellCloseHandler(args: CellCloseEvent) {
    ...
    this.editService.update(dataItem);
}

Use the closeCell method to put the edited cell back in read-only mode.

public saveChanges(grid: GridComponent): void {
    grid.closeCell();
    ...
}

In-Cell Editing upon Double Click

The following example demonstrates how to edit the cells on a double click.

Change Theme

Theme

Loading ...

By default, the cell enters edit mode with a single mouse click. To change this behavior and activate edit mode only on double click:

Handle the cellClick event of the Grid and store the information provided in the event handler.
ts
```
public cellClickHandler(args: CellClickEvent): void {
    this.cellArgs = args;
}
```

Handle the dblclick HTML event.

html

<kendo-grid ...
    (dblclick)="onDblClick()"
    (cellClick)="cellClickHandler($event)"
></kendo-grid>

Enable in-cell editing by following the instructions at the beginning of the article.

public onDblClick(): void {
    if (!this.cellArgs.isEdited) {
        this.cellArgs.sender.editCell(
            this.cellArgs.rowIndex,
            this.cellArgs.columnIndex,
            this.createFormGroup(this.cellArgs.dataItem)
        );
    }
}

Disabling the Click Handler for Specific Elements

By default, the Grid handles user clicks on non-focusable elements within the cell. To disable the default behavior for specific non-focusable elements, apply the k-grid-ignore-click class. You can use the same approach for elements that are outside the Grid.

The following example demonstrates the described approach.

Change Theme

Theme

Loading ...

You can also extend the kendoGridInCellEditing directive to prevent editing on specific cells based on conditions derived from the dataItem of the row the cell represents. For more details, refer to the Extending the In-Cell Editing Directive to Prevent Editing knowledge base article.

Angular Data Grid In-Cell Editing

In-Cell Editing upon Double Click

Disabling the Click Handler for Specific Elements

Suggested Links