Reactive Forms

The TreeList provides options for editing its data by using the Reactive Angular Forms.

Basic Concepts

By default, the built-in column editors in the Kendo UI TreeList for Angular utilize the Model-driven Angular Forms directives. To manipulate a TreeList row, you need to call the addRow or the editRow method respectively and then pass the FormGroup property as one of its parameters. The FormGroup configuration is part of the Angular Forms package.

To configure the editing mode of the TreeList, you have to:

1. Configure the type of the column editors.
2. Configure the command column by defining the command buttons.
3. Attach handlers for the CRUD data operations and update the data.

Data-Binding Directives vs. Manual Setup

The TreeList includes a Reactive 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 inline editing mode of the Kendo UI TreeList for Angular using Reactive Forms.

Setup

To enable the editing mode of the TreeList in the Angular Reactive Forms:

1. Configure the type of the columns editor.

   The default editor that is created by the TreeList is the text editor. To change this behavior, set the editor property.

   Copy Code<!-- setting numeric editor -->
   <kendo-treelist-column field="Extension" title="Extension" editor="numeric">
   </kendo-treelist-column>

2. Configure the command column by defining the command buttons inside the command column template.

   Copy Code<kendo-treelist-command-column width="140">
       <ng-template kendoTreeListCellTemplate let-isNew="isNew" let-cellContext="cellContext">
           <!-- "Add Child" command directive, will not be visible in edit mode -->
           <button [kendoTreeListAddCommand]="cellContext"
                   [svgIcon]="addExpressionIcon" title="Add Child">
           </button>
   
           <!-- "Edit" command directive, will not be visible in edit mode -->
           <button [kendoTreeListEditCommand]="cellContext"
                   [svgIcon]="pencilIcon" title="Edit" [primary]="true">
           </button>
   
           <!-- "Remove" command directive, will not be visible in edit mode -->
           <button [kendoTreeListRemoveCommand]="cellContext"
                   [svgIcon]="trashIcon" title="Remove">
           </button>
   
           <!-- "Save" command directive, will be visible only in edit mode -->
           <button [kendoTreeListSaveCommand]="cellContext"
                   [disabled]="formGroup?.invalid"
                   [svgIcon]="saveIcon" title="{{ isNew ? 'Add' : 'Update' }}">
           </button>
   
           <!-- "Cancel" command directive, will be visible only in edit mode -->
           <button [kendoTreeListCancelCommand]="cellContext"
                   [svgIcon]="cancelIcon" title="{{ isNew ? 'Discard changes' : 'Cancel' }}">
           </button>
       </ng-template>
   </kendo-treelist-command-column>

3. Attach handlers for the CRUD data operations.

   When a command button is clicked, the TreeList emits the corresponding event. To instruct the component what action to perform, handle the event that is emitted.

   Copy Code<kendo-treelist
     [data]="view | async"
     (add)="addHandler($event)"
     (edit)="editHandler($event)"
     (remove)="removeHandler($event)"
     (save)="saveHandler($event)"
     (cancel)="cancelHandler($event)"
   >
   <!-- the rest of the configuration -->
   </kendo-treelist>

Toggling the Edit State

The TreeList enables you to toggle its edit state by using the following events:

• add
• edit
• remove
• save
• cancel

Adding Records

The add event fires when the kendoTreeListAddCommand is clicked. Inside the event handler, you can show the new row editor by calling the addRow method and by providing a FormGroup configuration that describes the view model for that editor (similar to the editRow method).

Copy Codepublic addHandler({ sender, parent }: AddEvent): void {
    // Close the current edited row, if any.
    this.closeEditor(sender);

    // Expand the parent.
    if (parent) {
        sender.expand(parent);
    }

    // Define all editable fields validators and default values
    this.formGroup = new FormGroup({
        'ReportsTo': new FormControl(parent ? parent.EmployeeId : null),
        'FirstName': new FormControl('', Validators.required),
        'LastName': new FormControl('', Validators.required),
        'Position': new FormControl(''),
        'Extension': new FormControl('', Validators.compose([Validators.required, Validators.min(0)]))
    });

    // Show the new row editor, with the `FormGroup` build above
    sender.addRow(this.formGroup, parent);
}

Editing Records

The edit event fires when the kendoTreeListEditCommand is clicked. Inside the event handler, you can set the row to the editing mode by calling the editRow method and by providing a FormGroup configuration that describes the view model for that editor.

Copy Codepublic editHandler({ sender, dataItem }: EditEvent): void {
    // Close the current edited row, if any.
    this.closeEditor(sender, dataItem);

    // Define all editable fields validators and default values
    this.formGroup = new FormGroup({
        'EmployeeId': new FormControl(dataItem.EmployeeId),
        'ReportsTo': new FormControl(dataItem.ReportsTo),
        'FirstName': new FormControl(dataItem.FirstName, Validators.required),
        'LastName': new FormControl(dataItem.LastName, Validators.required),
        'Position': new FormControl(dataItem.Position),
        'Extension': new FormControl(dataItem.Extension, Validators.compose([Validators.required, Validators.min(0)]))
    });

    this.editedItem = dataItem;

    // Put the row in edit mode, with the `FormGroup` build above
    sender.editRow(dataItem, this.formGroup);
}

Removing Records

The remove event fires when the kendoTreeListRemoveCommand is clicked.

Inside the event handler, you can perform the following actions:

• Issue a request to remove the current data item from the data source.
• Invoke reload with the parent node as parameter to reflect the changes.

Copy Codepublic removeHandler({ sender, dataItem, parent }: RemoveEvent): void {
    this.editService
        // Publish the update to the remote service.
        .remove(dataItem, parent)
        .pipe(take(1))
        .subscribe(() => {
            if (parent) {
                // Reload the parent node to reflect the changes.
                sender.reload(parent);
            }
        });
}

Saving Records

The save event fires when the kendoTreeListSaveCommand is clicked.

Inside the event handler, you can perform the following actions:

• Update the value of the form in the data source.
• Call the closeRow method to switch the current row back to the view mode.
• Invoke reload with the parent node as parameter to reflect the changes.

Copy Codepublic saveHandler({ sender, dataItem, parent, formGroup, isNew }: SaveEvent): void {
    // Collect the current state of the form.
    // The `formGroup` argument is the same as was provided when calling `editRow`.
    const employee: Employee = formGroup.value;

    if (!isNew) {
        // Reflect changes immediately
        Object.assign(dataItem, employee);
    }

    this.editService
        // Publish the update to the remote service.
        .save(employee, parent, isNew)
        .pipe(take(1))
        .subscribe(() => {
            if (parent) {
                // Reload the parent node to reflect the changes.
                sender.reload(parent);
            }
        });

    sender.closeRow(dataItem, isNew);
}

Cancelling Editing

The cancel event fires when the kendoTreeListCancelCommand is clicked. Inside the event handler, you can switch the row back to the view mode by calling the closeRow method.

Copy Codepublic cancelHandler({ sender, dataItem, isNew }: CancelEvent): void {
    // Close the editor for the given row
    this.closeEditor(sender, dataItem, isNew);
}

private closeEditor(treelist: TreeListComponent, dataItem: any = this.editedItem, isNew: boolean = false): void {
    treelist.closeRow(dataItem, isNew);
    this.editedItem = undefined;
    this.formGroup = undefined;
}

Suggested Links

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