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

Template-Driven Forms

Updated over 6 months ago

The TreeList provides options for editing its data by using the Template-Driven Angular Forms.

Basic Concepts

To implement the editing mode of the Kendo UI TreeList for Angular in Template-Driven Forms, define the EditTemplateDirective for every TreeList column.

Data-Binding Directives vs. Manual Setup

The TreeList includes a Template 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 Template-Driven Forms.

Change Theme

Theme

Loading ...

Setup

To enable the editing mode of the TreeList in Template-Driven Forms:

Wrap the component.

html

<form novalidate #myForm="ngForm">
    <kendo-treelist>
        <!-- the rest of TreeList configuration goes here -->
    </kendo-treelist>
</form>

Configure the columns editor template. Verify that each column of the TreeList has a defined editor template.

html

<kendo-treelist-column [expandable]="true" field="FirstName" title="First Name">
    <ng-template kendoTreeListEditTemplate let-dataItem="dataItem">
        <kendo-textbox [(ngModel)]="dataItem.FirstName" name="FirstName" required></kendo-textbox>
    </ng-template>
</kendo-treelist-column>

Configure the command column. You need to define the command buttons inside the CommandColumn template.

html

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

Attach handlers for 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.

html

<kendo-treelist
    [data]="rootData | async"
    idField="EmployeeId"
    [fetchChildren]="fetchChildren"
    [hasChildren]="hasChildren"
    (add)="addHandler($event, myForm)"
    (edit)="editHandler($event)"
    (remove)="removeHandler($event)"
    (save)="saveHandler($event)"
    (cancel)="cancelHandler($event)"
>
<!-- the rest of configuration -->
</kendo-treelist>

Toggling the Edit State

Inside the corresponding event handlers, you can toggle the edit state of the TreeList by using the:

add event
edit event
remove event
save event
cancel event

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.

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

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

    // Associate the new records with the parent employee, if any
    const employee = {
        ReportsTo: parent ? parent.EmployeeId : null
    };

    // Add the new row and put it in edit mode
    sender.addRow(employee, 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.

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

    // Store a copy of the original item values in case editing is cancelled
    this.editedItem = dataItem;
    this.originalValues = { ...dataItem };

    // Put the row in edit mode
    sender.editRow(dataItem);
}

Removing Records

The remove event fires when the kendoTreeListRemoveCommand is clicked. Inside the event handler, you can issue a request to remove the current data item from the data source.

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

public saveHandler({ sender, dataItem, parent, isNew }: SaveEvent, form: NgForm): void {
    if (!form.valid) {
        return;
    }

    this.editService
        // Publish the update to the remote service.
        .save(dataItem, 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.

public 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);

    if (this.editedItem) {
        // Revert to the original values
        Object.assign(this.editedItem, this.originalValues);
    }

    this.editedItem = undefined;
    this.originalValues = undefined;
}