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

Angular Data Grid Inline Editing on Row Click

The Angular Grid provides options for editing its data inline when the user clicks a row.

Change Theme

Theme

Loading ...

For more details on how to implement the inline editing functionality, refer to the example on editing the Grid in Reactive Forms.

Setup

To implement the inline editing through a row click:

Handle the cellClick event that contains references to both the index of the clicked row and the respective data item in its event data.
html
```
<kendo-grid id="productsGrid"
    (cellClick)="editClick($event)" ...>
</kendo-grid>
```

Depending on the behavior you wish to achieve, handle the click action outside the Kendo UI Grid for Angular by applying custom logic—for example, to save the currently edited item, use the following approach:

// common constants
const matches = (el, selector) => (el.matches || el.msMatchesSelector).call(el, selector);

// component class code

@ViewChild(GridComponent) private grid: GridComponent;

public ngOnInit(): void {
  this.view = this.service.products();

  this.docClickSubscription = this.renderer.listen('document', 'click', this.onDocumentClick.bind(this));
}

public ngOnDestroy(): void {
    this.docClickSubscription();
}

private onDocumentClick(e: any): void {
    if (this.formGroup && this.formGroup.valid &&
        !matches(e.target, '#productsGrid tbody *, #productsGrid .k-grid-toolbar .k-button')) {
        this.saveCurrent();
    }
}

private saveCurrent(): void {
    if (this.formGroup) {
        this.service.save(this.formGroup.value, this.isNew);
        this.closeEditor();
    }
}

private closeEditor(): void {
    this.grid.closeRow(this.editedRowIndex);

    this.isNew = false;
    this.editedRowIndex = undefined;
    this.formGroup = undefined;
}

Managing Focus

By default, when the user opens a row for editing, the Grid focuses the first available input. To disable this behavior or focus a different cell, pass an options object to the editRow method with a columnIndex or skipFocus set.

The following example demonstrates how to focus the input which corresponds to the clicked cell in the Grid.