In-Cell

The TreeList provides an option for editing individual cells.

Basic Concepts

The in-cell editing mode allows users to edit the value of each cell without toggling the edit mode

To implement in-cell editing use the following methods and events:

• To put a cell into the in-cell editing mode, use the editCell method. To put a cell out of the in-cell editing mode, use the closeCell method.
• To put a cell into the in-cell editing mode on click, use the cellClick event. To save the updated items, use the cellClose event.

Data-Binding Directives vs. Manual Setup

The TreeList includes a In-Cell Editing Directive that significantly reduces the amount of boiler plate 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 ...

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

Suggested Links

• API Reference of the TreeListComponent
• Overview of Editing
• Built-In Editing Directives
• Custom Editors with Reactive Forms
• API Index of the TreeList