Angular Data Grid In-Cell Editing

The in-cell editing 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.

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:

1. Handle the built-in cellClick and cellClose events.

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

2. 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

   Copy Codepublic cellClickHandler(args: CellClickEvent) {
       ...
       args.sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
   }

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

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

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

   Copy Codepublic 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.

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

1. Handle the cellClick event of the Grid and store the information provided in the event handler.

   Copy Codepublic cellClickHandler(args: CellClickEvent): void {
       this.cellArgs = args;
   }

2. Handle the dblclick HTML event.

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

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

   Copy Codepublic 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.

Suggested Links

• API Reference of the GridComponent
• Overview of Editing
• Built-In Editing Directives
• Customization of Editing Options in Reactive Forms
• API Index of the Grid