Angular Data Grid In-Cell Editing

Updated on Jul 8, 2026

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

The Grid provides a built-in editing directive that significantly simplifies the implementation of in-cell editing, allowing for a quick and straightforward setup. For more control over the editing behavior, you can also implement in-cell editing manually.

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

The following example demonstrates the quick setup for implementing in-cell editing using Reactive Forms.

Change Theme

Theme

Loading ...

Quick Setup

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

To configure the Grid with the InCellEditingDirective:

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

   html

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

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

   ts

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

3. Use the built-in command or toolbar directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the Editing Action Buttons section.

To disable the default behavior for specific non-focusable elements, see Disabling the Click Handler for Specific Elements.

Manual Setup

For scenarios requiring full control over the editing behavior, you can manually handle the editing operations. This approach gives you complete flexibility but requires more code to implement.

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:

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

   html

   <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

   The args.isEdited check prevents creating a new FormGroup when the user clicks a cell that is already open for editing.

   ts

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

3. Use the cellClose event handler to validate the input and persist the changes. The cellClose event fires when the user moves focus away from the cell, presses Enter, or calls closeCell().

   • Call args.preventDefault() to keep the cell open when the FormGroup is invalid.
   • Check formGroup.dirty before calling the data service to avoid unnecessary updates when the value did not change.
   • Return early when the user presses Escape so that the original value is restored.
   ts

   public cellCloseHandler(args: CellCloseEvent): void {
       const { formGroup, dataItem } = args;
   
       if (!formGroup.valid) {
           // Keep the cell open when there are invalid values.
           args.preventDefault();
       } else if (formGroup.dirty) {
           if (args.originalEvent && args.originalEvent.keyCode === Keys.Escape) {
               return;
           }
   
           this.editService.assignValues(dataItem, formGroup.value);
           this.editService.update(dataItem);
       }
   }

   editService in the example above is a custom data service that you create to handle CRUD operations for your data source. See the demo for a reference implementation.

4. Use the closeCell method to put the edited cell back in read-only mode. Calling closeCell() triggers the cellClose event, which handles validation and data persistence.

   ts

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

In-Cell Editing upon Double Click

By default, the cell enters edit mode with a single mouse click.

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

Change Theme

Theme

Loading ...

To change the default cell click 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.

   ts

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

2. Handle the dblclick HTML event.

   html

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

3. Enable in-cell editing by following the manual setup instructions.

   ts

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

In-Cell Editing with OData Service

The Grid has representational functionality and is not affected by how the data is updated or where it comes from. The Grid can display data from different types of sources, including the OData v4 protocol.

This section demonstrates how to implement in-cell editing when your data source uses the OData v4 protocol. The setup follows the same approach as the manual approach described earlier, but integrates with an OData service for data operations.

The following example demonstrates how to configure the in-cell editing of the Grid by consuming OData v4.

Change Theme

Theme

Loading ...

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.

Suggested Links

• Angular Grid Editing Basics
• API Reference of the GridComponent
• Grid Editing Validation
• API Index of the Grid