How to Add Context Menu to TreeView

By default, TreeView component doesn't have a Context Menu attached. Having a context menu is useful in cases when you want to extend the TreeView functionality and provide better user interface. For example, if you want to add or remove items, you can create a context menu with options that can provide that kind of functionality. In this article, you will learn how to do that.

You will find sample code that shows how to add a context menu to TreeView items in JavaScript, Angular, React and Vue, in following sections below.

To open the context menu, right-click anywhere inside the TreeView space. Five options will appear:

• Add Item - adds a new root node at the end of tree hierarchy
• Add Child Item - adds a new child node to the selected node
• Insert Item Before - adds a new node before currently selected node
• Insert Item After - adds a new node after currently selected node
• Remove Item - removes the currently selected item from the tree hierarchy

As demo shows, using a context menu you can dynamically add and remove nodes in the TreeView component.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Create a Context Menu and Attach it to the TreeView Component

At first, to add a context menu to the TreeView, you need to create an object that will hold all menu settings. Then, you need to create an item template and add the ContextMenu component to each tree node. Using the object with menu settings, you can apply it to the context menu settings property in HTML.

• JavaScript
• Angular
• React
• Vue

Now, whenever an item in TreeView is right-clicked, the context menu will appear. However, it is not yet functional.

How to Handle Context Menu Events

The context menu in current example has options to add and remove items in the TreeView component. However, these options are not active it. You need to handle menuClick event and based on selected option, process a corresponding action.

• JavaScript
• Angular
• React
• Vue

In addition, whenever item is menu appears the menuOpening event fires, you can handle it and select the item.

How to Add and Remove Items using Context Menu

Depending on which menu options is selected, in this example you can add or remove an item in the tree view. The TreeView component has a set of built-in methods that allows you to add or remove items from code on demand. You can add items at specific position or using other items as a reference.

More detailed information is available here: built-in methods for add/remove of items in TreeView component.

• JavaScript
• Angular
• React
• Vue

Conclusion

To add a context menu to the TreeView, you can use the IntegralUI ContextMenu component. By creating a custom item template, you can attach the context menu to each node individually. Within the template, you can set custom conditions and have a different menu for each node. The menu is customizable, as an example, you can add and remove items from the TreeView during run-time.

A sample code is available in JavaScript, Angular, React and Vue that shows how to add context menu to items in tree view. The TreeView is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.