LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Display Context Menu in TreeView AngularJS

Created: 16 February 2015

IntegralUI Studio for Web includes a ContextMenu directive which allows you to add a custom context menu to any other HTML element. In this article we will explain how to use this directive to create and add context menu to the TreeView.

TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

By default, each tree item element has a context menu directive included in its declaration. However, when item is right-clicked a context menu will not appear, because it is not known by default.

Similar: Context Menu with Edit Options for Angular TreeView

Because we don’t have access to declaration on tree items, to add a context menu to a specific item, we will use the contextMenu field of item object. This field accept array of menu items. Each menu item can have a key, text, type and event handler. For example:

$scope.itemContextMenu = [

{ text: "Add", type: "header" },

{ key: 'ADD_ITEM', text: "Add Item", itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } },

{ type: "separator" },

{ text: "Remove", type: "header" },

{ key: 'REMOVE_ITEM', text: "Remove Item", itemClick: function(e){ return $scope.processMenuItemClicks(e.item); }

]

 

var item = {

text: "Item" + itemCount,

contextMenu: $scope.itemContextMenu

}

In above code, we have created a context menu which has five menu items: 2 sections, 1 separator and 2 items with event handler. Menu items that act as headers or separators don’t require a key and event handler to be set. The other two menu items, have a unique key which can be helpful in determination which item is clicked, and an event handler which is fired whenever the menu item is clicked.

In our case whenever a menu item is clicked, the processMenuItemClicks function is called. The body of this function can look like this:

// Different actions depending on which menu option is clicked

$scope.processMenuItemClicks = function(item){

if (item){

var selItem = $treeService.selectedItem($scope.treeName);

 

switch (item.key){

case 'ADD_ITEM':

$treeService.addItem($scope.treeName, createNewItem(), selItem);

break;

 

case 'REMOVE_ITEM':

$treeService.removeItem($scope.treeName, selItem);

break;

}

}

}

Depending on key value set in menu items, we can determine the kind of action to be processed. In our example, a new tree item is added to the currently selected tree item and an action which removes the currently selected tree item from the TreeView.

In similar way we can create and add a context menu to the TreeView. So when a right-click is made in TreeView space we can show a more general context menu. In this case we have access to the declaration of the TreeView where we can add a context menu directive as an attribute. Here is the code:

<iui-treeview name="{{treeName}}" items="data" iui-contextmenu menu-items="treeContextMenu"></iui-treeview>

As it can be seen from the code above, we are using the iui-contextmenu attribute to assign a context menu to the TreeView. The menu-items attribute is necessary to determine the content of the content menu. Now we only need to create the treeContextMenu variable in our application controller. Here how this may look like:

// Context menu data for TreeView

$scope.treeContextMenu = [

{ text: "TreeView Actions", type: "header" },

{ key: 'ADD_ROOT', text: "Add Item", itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } },

{ key: 'CLEAR_ALL', text: "Clear All", enabled: false, itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } }

]

As it can be seen from the code, we are using the same structure as in our previous example. The only difference is that this context menu will now be applied to the TreeView, instead of its items. Also, we are using the same event handler, only we need to add the new keys and related actions to complete it.

As a result the code for processMenuItemClicks function now looks like:

$scope.processMenuItemClicks = function(item){

if (item){

var selItem = $treeService.selectedItem($scope.treeName);

 

switch (item.key){

case 'ADD_ROOT':

$treeService.addItem($scope.treeName, createNewItem());

break;

 

case 'ADD_ITEM':

$treeService.addItem($scope.treeName, createNewItem(), selItem);

break;

 

case 'REMOVE_ITEM':

$treeService.removeItem($scope.treeName, selItem);

break;

 

case 'CLEAR_ALL':

$treeService.clearItems($scope.treeName);

break;

}

}

}

 

// Help methods to create and get the currently selected item

var itemCount = 0;

var createNewItem = function(){

itemCount++;

 

var item = {

id: itemCount,

text: "Item" + itemCount,

contextMenu: $scope.itemContextMenu

}

 

return item;

}

The appearance of context menu is fully customizable. There are several CSS styles which allow you to change it in a way which better matches the look of your application.

You can use this example to create any kind of custom context menu and assign it to other parts in your application. For example you can add a context menu to a button, simply by setting the iui-contextmenu attribute inside the <button> tag.

Related: AngularJS Context Menu to Custom HTML Elements

Demonstration above presents additional menu items with custom functionality not shown in this article. By downloading the IntegralUI Studio for Web, you can get access to a complete sample with full source code.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.