Inline Editing on Row Click

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

Setup

To implement the inline editing through a row click:

  1. Handle the cellClick event that contains references to both the index of the clicked row and the respective data item in its event data.

    <kendo-grid id="productsGrid"
        (cellClick)="editClick($event)"
  2. Depending on the behavior you wish to achieve, handle the click action outside the Kendo UI Grid for Angular by applying custom logicfor 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;
    }

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

The following example demonstrates the full implementation of the approach.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?