LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Context Menu


In this sample you can see how to attach context menu to the TreeView and each tree view item. Initially TreeView is empty, right-click to show the initial context menu.

By right-clicking on some item, a context menu will pop-up showing options specific for that item. To simplify our example, all items have the same context menu, but you can apply a different one for a specific item,if required.

Each tree item has a contextMenu field, which accepts an array object with all menu options which will appear in context menu when item is right-clicked.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.contextmenu.css" />

<link rel="stylesheet" href="css/integralui.treeview.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treeview.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.contextmenu.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" items="data" iui-contextmenu menu-items="treeContextMenu" item-rightclick="onItemRightClick(e)"></iui-treeview>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){

$scope.data = [];

$scope.treeName = 'treeSample';

 

// 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); } }

]

 

// Context menu data for Tree Items

$scope.itemContextMenu = [

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

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

{ key: 'INSERT_BEFORE_ITEM', text: 'Insert Item Before', itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } },

{ key: 'INSERT_AFTER_ITEM', text: 'Insert Item After', 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); } },

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

]

 

// 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;

}

 

var getCurrentSelection = function(){

return $treeService.selectedItem($scope.treeName);

}

 

// Different actions depending on which menu option is clicked

$scope.processMenuItemClicks = function(item){

if (item){

var selItem = getCurrentSelection();

 

switch (item.key){

case 'ADD_ROOT':

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

break;

 

case 'ADD_ITEM':

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

break;

 

case 'INSERT_BEFORE_ITEM':

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

break;

 

case 'INSERT_AFTER_ITEM':

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

break;

 

case 'REMOVE_ITEM':

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

break;

 

case 'CLEAR_CHILD':

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

break;

 

case 'CLEAR_ALL':

$treeService.clearItems($scope.treeName);

break;

}

}

}

 

var isThereChildren = function(item){

return item && item.items && item.items.length > 0 ? true : false;

}

 

$scope.onItemRightClick = function(e){

if (e.item){

for (var i = 0; i < $scope.itemContextMenu.length; i++){

if ($scope.itemContextMenu[i].key === 'CLEAR_CHILD')

$scope.itemContextMenu[i].enabled = isThereChildren(e.item);

}

}

else

$scope.treeContextMenu[2].enabled = $treeService.getList($scope.treeName).length > 0;

}

}]);