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.

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.

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.

Sample code is available in JavaScript, Angular, React and Vue. It can help you to learn how to export tree view data in different frameworks.

The TreeView component is part of IntegralUI Web.