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

Angular TreeList Custom Editing Service

Updated on Jun 11, 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.

Change Theme

Theme

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 the required CRUD methods.
}

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 {
    // Handle creating a new item.
}

public update(item: any): void {
    // Handle updating an existing item.
}

public remove(item: any): void {
    // Handle removing an item.
}

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