Angular TreeList Accessories Context Menu

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

The TreeList allows you to display a built-in context menu by using the ContextMenu component.

The context menu provides a convenient way to apply data processing features to specific rows or to the TreeList component. The user can add, edit, and delete records, reorder rows, or export the component to a PDF or an Excel file. You can customize the order of the menu items and create custom controls as necessary.

The following example demonstrates how to show a custom ContextMenu when using the kendoTreeListFlatBinding directive.

Change Theme

Theme

Loading ...

Setup

To display a custom ContextMenu on the user's right click when binding the data through the kendoTreeListFlatBinding directive, the kendoTreeListHierarchyBinding directive or the data property:

Get the ContextMenu instance through a @ViewChild decorator inside the component code.
ts
```
@ViewChild('contextmenu') public contextMenu: any;
```

To prevent the default browser context menu, handle the built-in cellClick event and use the preventDefault() method.

public onCellClick(event: any) {
    if (event.type === 'contextmenu') {
        const originalEvent = event.originalEvent;
        originalEvent.preventDefault();
        ...
    }
}

To display the menu on the exact row the user has clicked on, use the built-in show() method of the ContextMenu and the coordinates that the cellClick event returns.
ts
```
this.contextMenu.contextMenu.show({
    left: originalEvent.pageX,
    top: originalEvent.pageY,
});
```

Handle the select event of the ContextMenu component and determine the data operation that should be executed.

public onSelect({ item }): void {
    const menuItem = item.text;

    switch(menuItem) {
        case 'Add':
            this.addHandler.emit();
            break;
        case 'Edit':
            this.editHandler.emit();
            break;
        ...
    }
}

Angular Data TreeList Context Menu

Setup

Suggested Links