Angular TreeList Custom Editors
The Angular TreeList enables you to customize the built-in editing functionality by implementing custom editor components using templates. You can replace the default editors with a suitable Kendo UI for Angular component or custom input control to create a tailored editing experience.
The TreeList provides several built-in cell editor types by default. You have the ability to customize the built-in editors and render custom ones that better meet your application's requirements by using the EditTemplateDirective.
The following example demonstrates how to use the EditTemplateDirective and Reactive Forms to build custom AutoComplete and NumericTextBox editors.
Setting Up Custom Editors
To implement custom editors for the TreeList columns, use the EditTemplateDirective to define editor templates for the columns that need custom editing components:
<kendo-treelist-column field="Position" title="Position">
<ng-template kendoTreeListEditTemplate let-formGroup="formGroup" let-dataItem="dataItem">
...
</ng-template>
</kendo-treelist-column>Use the formGroup field passed by the EditTemplateDirective to bind your custom editor to the form and set its value:
<ng-template kendoTreeListEditTemplate let-formGroup="formGroup">
<kendo-autocomplete [formControl]="formGroup.get('Position')">
</kendo-autocomplete>
</ng-template>