LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Context Menu


In this sample you can see how to attach context menu to the column, row or TreeGrid component. By using the menu options listed in context menus you can create and modify the tree structure during run-time.

Context menu is a native AngularJS directive (attribute only), which can be applied to any other directive. In our example only TreeGrid and its columns and rows have their context menu set.

By right-clicking on some column or row, a context menu will pop-up showing options specific for that column or row. To simplify our example, all columns and rows have the same context menu, but you can apply a different one for a specific column or row, if required. Also you can apply a different context menyu to each cell, but in this demonstration this option is excluded.

Each column, row or cell has a contextMenu field, which accepts an array object with all menu options which will appear in context menu when they are clicked using the right mouse button.

<!DOCTYPE html>

<html>

<head>

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

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

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

<link rel="stylesheet" href="css/themes/theme-flat-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.checkbox.min.js"></script>

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

</head>

<body>

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

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" iui-contextmenu menu-items="gridContextMenu" selection-changed="onSelectionChanged(e)" row-rightclick="onRowRightClick(e)"></iui-treegrid>

</div>

</body>

</html>

angular

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

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", function($scope, $gridService){

$scope.gridName = "gridSample";

 

// Context menu data for TreeGrid

$scope.gridContextMenu = [

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

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

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

{ type: "separator" },

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

];

 

// Context menu data for Columns

$scope.columnContextMenu = [

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

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

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

{ key: 'INSERT_COLUMN_AFTER', text: "Insert Column After", itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } },

{ type: "separator" },

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

];

 

// Context menu data for Rows

$scope.rowContextMenu = [

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

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

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

{ key: 'INSERT_ITEM_AFTER', text: "Insert Row After", itemClick: function(e){ return $scope.processMenuItemClicks(e.item); } },

{ type: "separator" },

{ key: 'REMOVE_ITEM', text: "Remove Row", 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); } }

];

 

// Initial data

$scope.columns = [

{ headerText: "Header1", footerText: "Footer1", width: 200, contextMenu: $scope.columnContextMenu },

{ headerText: "Header2", footerText: "Footer2", width: 250, contextMenu: $scope.columnContextMenu },

{ headerText: "Header3", footerText: "Footer3", width: 120, contextMenu: $scope.columnContextMenu }

];

 

$scope.rows = [

{ id: 1, text: "Row1", cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }], contextMenu: $scope.rowContextMenu },

{

id: 2,

text: "Row2",

cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],

contextMenu: $scope.rowContextMenu,

rows: [

{ id: 21, text: "Row21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }], contextMenu: $scope.rowContextMenu },

]

 

},

{ id: 3, text: "Row3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }], contextMenu: $scope.rowContextMenu }

];

 

// Help methods to create a new column and row

var colCount = 3;

var createNewColumn = function(){

colCount++;

 

var column = {

id: colCount,

headerText: "Header" + colCount,

footerText: "Footer" + colCount,

contextMenu: $scope.columnContextMenu

}

 

return column;

}

 

var rowCount = 3;

var createNewRow = function(){

rowCount++;

 

var row = {

id: rowCount,

text: "Row" + rowCount,

cells: [],

contextMenu: $scope.rowContextMenu

}

 

for (var j = 1; j <= $scope.columns.length; j++)

row.cells.push({ text: "Item" + rowCount + j, contextMenu: $scope.rowContextMenu });

 

return row;

}

 

// Different actions depending on which menu option is clicked

$scope.processMenuItemClicks = function(item){

if (item){

var selColumn = $gridService.selectedColumn($scope.gridName);

var selRow = $gridService.selectedRow($scope.gridName);

 

switch (item.key){

case 'ADD_COLUMN':

$gridService.addColumn($scope.gridName, createNewColumn());

break;

 

case 'INSERT_COLUMN_BEFORE':

$gridService.insertColumnBefore($scope.gridName, createNewColumn(), selColumn);

break;

 

case 'INSERT_COLUMN_AFTER':

$gridService.insertColumnAfter($scope.gridName, createNewColumn(), selColumn);

break;

 

case 'REMOVE_COLUMN':

$gridService.removeColumn($scope.gridName, selColumn);

break;

 

case 'ADD_ROOT':

$gridService.addRow($scope.gridName, createNewRow());

break;

 

case 'ADD_ITEM':

$gridService.addRow($scope.gridName, createNewRow(), selRow);

break;

 

case 'INSERT_ITEM_BEFORE':

$gridService.insertRowBefore($scope.gridName, createNewRow(), selRow);

break;

 

case 'INSERT_ITEM_AFTER':

$gridService.insertRowAfter($scope.gridName, createNewRow(), selRow);

break;

 

case 'REMOVE_ITEM':

$gridService.removeRow($scope.gridName, selRow);

break;

 

case 'CLEAR_CHILD':

$gridService.clearRows($scope.gridName, selRow);

break;

 

case 'CLEAR_ALL':

$gridService.clearColumns($scope.gridName);

$gridService.clearRows($scope.gridName);

 

colCount = 0;

rowCount = 0;

break;

 

case 'EDIT_CELL':

$gridService.clearRows($scope.gridName);

break;

}

}

}

 

var isThereChildren = function(row){

return row && row.rows && row.rows.length > 0 ? true : false;

}

 

$scope.onRowRightClick = function(e){

if (e.row){

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

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

$scope.rowContextMenu[i].enabled = isThereChildren(e.row);

}

}

}

}]);