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

Built-In Directives

The TreeList provides built-in directives which simplify the implementation of its editing operations.

Overview

The TreeList provides directives which automate common editing scenarios:

The editing directives can be used together with the data binding directives or custom data binding.

Reactive Editing Directive

The kendoTreeListReactiveEditing directive helps you to skip the boilerplate code, which is required to set up the TreeList for editing with Reactive Forms. The directive requires a createFormGroup input that has to be set to a function, which creates a FormGroup for the row model or for the new model when the user adds a new row.

The following example demonstrates how to use the kendoTreeListReactiveEditing directive.

Example
View Source
Change Theme:

Template Editing Directive

The kendoTreeListTemplateEditing directive simplifies the setup when you use the Angular Template-Driven Forms in your project. The directive requires a createNewItem input (which has to be set to a function) that creates a new instance of the edited model.

The following example demonstrates how to use the kendoTreeListTemplateEditing directive.

Example
View Source
Change Theme:

In-Cell Editing Directive

The kendoTreeListInCellEditing directive sets up the TreeList for in-cell editing with Reactive Forms. The directive requires a createFormGroup input that has to be set to a function, which creates a FormGroup for the row model or for the new model when the user adds a new row.

For more information on how to disable the clicking on specific elements, refer to the article on in-cell editing.

The following example demonstrates how to use the kendoTreeListInCellEditing directive.

Example
View Source
Change Theme:

Custom Service

By default, the built-in editing directives modify the data in memory. You can plug-in different persistence methods by implementing a custom service through the editService input. The custom service handles the create, update, and remove data operations and implements the EditService interface

The following example demonstrates how to implement a custom service.

Example
View Source
Change Theme:

Confirmation Dialog on Row Removal

If you use any of the built-in editing directives, you can also display a confirmation dialog when the user is about to remove a row. To show the Remove dialog, set a function to the removeConfirmation input. The function is expected to return a Boolean value which will indicate if the record will be removed. If the function returns an observable or a promise, resolve it with a Boolean value.

The following example demonstrates how to display a Remove confirmation dialog.

Example
View Source
Change Theme: