LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Column DropDown Menu


In this sample each column header contains a menu button. When this button is clicked, a dropdown menu will appear with several options that allows you to move a column or make it visible or hidden.

To add a menu button to the column header, we are creating a template with custom header directive, using custom CSS styles and HTML elements. To apply the template to each column, the following field of column object is used:

  • headerContent - holds a reference to a custom template used to replace the header text with custom HTML elements

There is no limit on what kind of template that you can create. Any combination of HTML elements is acceptable, along with custom events.

<!DOCTYPE html>

<html>

<head>

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

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

<link rel="stylesheet" href="css/integralui.contextmenu.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.treegrid.min.js"></script>

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

</head>

<body>

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

<script type="text/ng-template" id="column-menu.html">

<div class="column-header">

<span>{{obj.text}}</sspan>

<span class="column-menu-button" iui-contextmenu="obj.menu"></span>

</div>

</script>

<iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" show-footer="false" allow-focus="false" update-complete="onUpdateComplete()"></iui-treegrid>

</div>

</body>

</html>

angular

.directive('customHeader', function() {

return {

restrict: 'E',

templateUrl: 'column-menu.html',

scope: {

obj: '='

}

};

})

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

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

$scope.gridName = "gridSample";

$scope.columns = [];

$scope.rows = [];

 

var activeColumn = null;

 

var getMenuIcon = function(column){

return column.visible != false ? 'icons check-mark' : null;

}

 

var getColumnList = function(){

var list = [];

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

list.push({

icon: getMenuIcon($scope.columns[j]),

text: $scope.columns[j].headerObj.text

});

}

 

return list;

}

 

var getExpIndex = function(){

var expIndex = 0;

 

var count = 0;

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

if ($scope.columns[j].visible != false){

if ($scope.columns[j].id == 1){

expIndex = count;

break;

}

 

count++;

}

}

 

return expIndex;

}

 

var showColumnsMenu = {

text: 'Show Columns',

items: getColumnList()

}

 

$scope.menu = {

activate: 'both',

itemIcon: 'icons empty',

items: [

{ text: 'Move First', key: 'MOVE_FIRST' },

{ text: 'Move Left', key: 'MOVE_LEFT' },

{ text: 'Move Right', key: 'MOVE_RIGHT' },

{ text: 'Move Last', key: 'MOVE_LAST' },

{ type: 'separator' },

showColumnsMenu

],

position: 'below',

itemClick: function(e){

if (e.item){

$gridService.suspendLayout($scope.gridName);

 

switch (e.item.key){

case 'MOVE_FIRST':

if (activeColumn)

$gridService.moveColumn($scope.gridName, activeColumn, 'first');

break;

 

case 'MOVE_LEFT':

if (activeColumn)

$gridService.moveColumn($scope.gridName, activeColumn, 'left');

break;

 

case 'MOVE_RIGHT':

if (activeColum)

$gridService.moveColumn($scope.gridName, activeColumn, 'right');

break;

 

case 'MOVE_LAST':

if (activeColumn)

$gridService.moveColumn($scope.gridName, activeColumn, 'last');

break;

 

default:

var index = showColumnsMenu.items.indexOf(e.item);

if (index >= 0 && index < $scope.columns.length){

$scope.columns[index].visible = $scope.columns[index].visible == undefined ? false : true;

e.item.icon = getMenuIcon($scope.columns[index]);

}

break;

}

 

$gridService.expandColIndex($scope.gridName, getExpIndex());

 

$gridService.resumeLayout($scope.gridName);

}

 

activeColumn = null;

},

open: function(e){

activeColumn = $gridService.getHoverColumn($scope.gridName);

}

}

 

$scope.header1 = { text: "Header 1", menu: $scope.menu }

$scope.header2 = { text: "Header 2", menu: $scope.menu }

$scope.header3 = { text: "Header 3", menu: $scope.menu }

 

$scope.columns = [

{

id: 1,

headerObj: $scope.header1,

headerContent: '<custom-header obj="header1"></custom-header>',

width: 230

},

{

id: 2,

headerObj: $scope.header2,

headerContent: '<custom-header obj="header2"></custom-header>',

width: 180

},

{

id: 3,

headerObj: $scope.header3,

headerContent: '<custom-header obj="header3"></custom-header>',

width: 150

}

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ cid: 1, text: "Item11" }, { cid: 2, text: "Item12" }, { cid: 3, text: "Item13" }],

rows: [

{ id: 11, pid: 1, text: "Item11", cells: [{ cid: 1, text: "Item111" }, { cid: 2, text: "Item112" }, { cid: 3, text: "Item113" }] },

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ cid: 1, text: "Item121" }, { cid: 2, text: "Item122" }, { cid: 3, text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ cid: 1, text: "Item1211" }, { cid: 2, text: "Item1212" }, { cid: 3, text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ cid: 1, text: "Item1221" }, { cid: 2, text: "Item1222" }, { cid: 3, text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ cid: 1, text: "Item12211" }, { cid: 2, text: "Item12212" }, { cid: 3, text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ cid: 1, text: "Item12221" }, { cid: 2, text: "Item12222" }, { cid: 3, text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ cid: 1, text: "Item1231" }, { cid: 2, text: "Item1232" }, { cid: 3, text: "Item1233" }] }

]

},

{ id: 13, pid: 1, text: "Item13", cells: [{ cid: 1, text: "Item131" }, { cid: 2, text: "Item132" }, { cid: 3, text: "Item133" }] },

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ cid: 1, text: "Item141" }, { cid: 2, text: "Item142" }, { cid: 3, text: "Item143" }],

expanded: false,

rows: [

{ id: 141, pid: 14, text: "Item141", cells: [{ cid: 1, text: "Item1411" }, { cid: 2, text: "Item1412" }, { cid: 3, text: "Item1413" }] },

{ id: 142, pid: 14, text: "Item142", cells: [{ cid: 1, text: "Item1421" }, { cid: 2, text: "Item1422" }, { cid: 3, text: "Item1423" }] }

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ cid: 1, text: "Item21" }, { cid: 2, text: "Item22" }, { cid: 3, text: "Item23" }],

rows: [

{ id: 21, pid: 2, text: "Item21", cells: [{ cid: 1, text: "Item211" }, { cid: 2, text: "Item212" }, { cid: 3, text: "Item213" }] },

{ id: 22, pid: 2, text: "Item22", cells: [{ cid: 1, text: "Item221" }, { cid: 2, text: "Item222" }, { cid: 3, text: "Item223" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ cid: 1, text: "Item231" }, { cid: 2, text: "Item232" }, { cid: 3, text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ cid: 1, text: "Item2311" }, { cid: 2, text: "Item2312" }, { cid: 3, text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ cid: 1, text: "Item2321" }, { cid: 2, text: "Item2322" }, { cid: 3, text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ cid: 1, text: "Item31" }, { cid: 2, text: "Item32" }, { cid: 3, text: "Item33" }] }

];

 

$scope.onUpdateComplete = function(){

showColumnsMenu.items = getColumnList();

}

}]);

.directive

{

border: thin solid #dadada;

width: 600px;

height: 350px;

}

.iui-contextmenu-block

{

border-radius: 0;

padding: 2px;

}

.iui-contextmenu-item

{

width: 140px;

}

.icons

{

margin-right: 5px;

vertical-align: middle;

}

.check-mark

{

background-position: -96px -48px;

}

.column-header

{

margin: 0;

padding: 0 3px;

}

.column-menu-button

{

background-image: url(../../../resources/icons.png);

background-position: -176px -80px;

background-repeat: no-repeat;

border: thin solid #bebebe;

display: inline-block;

position: absolute;

top: 5px;

right: 3px;

margin: 0;

padding: 0;

width: 16px;

height: 16px;

cursor: default;

}

.column-header:hover > .column-menu-button

{

background-position: -192px -80px;

border-color: white;

}