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.

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:

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

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.

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:

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

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:

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 manual setup instructions.

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 the way how the data gets updated and 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 manner 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.

Angular Data Grid In-Cell Editing

Quick Setup

Manual Setup

In-Cell Editing upon Double Click

In-Cell Editing with OData Service

Disabling the Click Handler for Specific Elements

Suggested Links