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

Angular TreeList In-Cell Editing

Updated on Jun 11, 2026

The in-cell editing mode in the Angular TreeList allows the user to click and update individual cells directly, eliminating the need for separate Edit, Update, and Cancel buttons.

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

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

Change Theme

Theme

Loading ...

Quick Setup

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

To configure the TreeList with the InCellEditingDirective:

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

html

<kendo-treelist [kendoTreeListInCellEditing]="createFormGroup">
    ...
</kendo-treelist>

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() {
    this.createFormGroup = this.createFormGroup.bind(this);
}

public createFormGroup({ isNew, dataItem }: CreateFormGroupArgs): FormGroup {
    const item = isNew ? {} : dataItem;

    this.formGroup = new FormGroup({
        id: new FormControl(item.id),
        parentId: new FormControl(item.parentId),
        name: new FormControl(item.name, Validators.required),
        role: new FormControl(item.role),
    });

    return this.formGroup;
}

Use the built-in command 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 Disabling the Click Handler for Specific Elements section below.

Manual Setup

For scenarios requiring full control over the editing behavior, you can manually handle the in-cell editing operations.

Built-In Directives vs. Manual Setup

The TreeList includes an In-Cell Editing Directive that significantly reduces the amount of boilerplate code required for editing. Try it out before using the more flexible, but verbose manual setup.

The following example demonstrates how to manually set up the in-cell editing mode of the Kendo UI TreeList for Angular using Reactive Forms.

Change Theme

Theme

Loading ...

To enable the in-cell editing mode of the TreeList manually:

Handle the built-in cellClick and cellClose events.

html

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

Use the editCell method in the cellClick event handler to put a cell in edit mode.

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

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

public cellCloseHandler({ formGroup, dataItem }: CellCloseEvent): void {
    if (formGroup.valid) {
        Object.assign(dataItem, formGroup.value);
    }
}

Disabling the Click Handler for Specific Elements

By default, the TreeList triggers the cellClick event when the user clicks on non-focusable elements within the cell. To disable the default behavior for specific non-focusable elements, set the "k-treelist-ignore-click" class. You can use the same approach for elements which are outside the TreeList, such as pop-ups.

The following example demonstrates how to disable the click handler for specific elements.

Change Theme

Theme

Loading ...

Angular TreeList In-Cell Editing

Quick Setup

Manual Setup

Disabling the Click Handler for Specific Elements

See Also