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:
- Reactive Editing Directive—for automatic editing in Reactive Forms.
- Template Editing Directive—for automatic editing in Template-driven Forms.
- In-Cell Editing Directive—for automatic In-cell Editing.
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.
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.
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.
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.
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.