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

Angular TreeList Custom Editing Service

Updated on Sep 10, 2026

The Angular TreeList provides built-in editing directives that handle data operations automatically. However, for complex scenarios where you need more control over the CRUD operations, data validation, or integration with external APIs, you can implement a custom editing service.

Each editing directive exposes an editService property that allows you to replace the default data handling with your own custom logic. The custom service manages the create, read, update, and delete operations and must implement the EditService interface.

If the TreeList is not bound to a plain array, you must specify an EditService.

The following example demonstrates how to implement a custom editing service.

Loading ...

Setup

To implement a custom editing service for the TreeList:

Create a service that implements the EditService interface to manage editing operations and track data changes.

@Injectable()
export class MyEditService implements EditService {
    // Implement CRUD operations for your data source.
}

Implement the required CRUD methods of the EditService interface. The TreeList will call these methods when users perform the corresponding editing operations.

public create(item: any): void {
    // Add the item to your data source.
}

public update(item: any): void {
    // Update the item in your data source.
}

public remove(item: any): void {
    // Remove the item from your data source.
}

public assignValues(target: unknown, source: unknown): void {
    Object.assign(target, source);
}

The assignValues method is used by the TreeList to update item values during editing operations.

Configure the TreeList to use your custom service by setting the editService property and providing the service in your component.

@Component({
    providers: [MyEditService],
    template: `
        <kendo-treelist
            [kendoTreeListInCellEditing]="createFormGroup"
            [editService]="editService"
            ...
        >
        </kendo-treelist>
    `
})
export class AppComponent {
    constructor(public editService: MyEditService) {}
}

Angular TreeList Custom Editing Service

Setup

See Also