# Angular TreeList Context Menu

The [Angular TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist) enables you to display a context menu by using the built-in [`ContextMenu`](https://www.telerik.com/kendo-angular-ui-develop/components/menus/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 TreeList to PDF or Excel. 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/accessories/context-menu/source.txt)

## Setup

To display a custom [`ContextMenu`](https://www.telerik.com/kendo-angular-ui-develop/components/menus/contextmenu) on the user's right click when binding the data through the [`kendoTreeListFlatBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/flatbindingdirective) directive, the [`kendoTreeListHierarchyBinding`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/hierarchybindingdirective) directive or the [`data`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#data) property:

1. Get the `ContextMenu` instance through a `@ViewChild` decorator inside the component code.

   ```ts
   @ViewChild('contextmenu') public contextMenu: any;
   ```

2. To prevent the default browser context menu, handle the built-in [`cellClick`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent#cellclick) event and use the `preventDefault()` method.

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

3. To display the menu on the exact row the user has clicked on, use the built-in [`show()`](https://www.telerik.com/kendo-angular-ui-develop/components/menus/api/contextmenucomponent#show) method of the `ContextMenu` and the coordinates that the `cellClick` event returns.

   ```ts
   this.contextMenu.contextMenu.show({
       left: originalEvent.pageX,
       top: originalEvent.pageY,
   });
   ```

4. Handle the [`select`](https://www.telerik.com/kendo-angular-ui-develop/components/menus/api/contextmenucomponent#select) event of the `ContextMenu` component and determine the data operation that should be executed.

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

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

## Suggested Links

* [API Reference of the `ContextMenu`](https://www.telerik.com/kendo-angular-ui-develop/components/menus/contextmenu)
* [API Reference of the `TreeListComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api)