LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Column Templates


In this sample each column header is built using a custom template. Second column footer also uses a custom template. The following examples are presented:

  • column header with check box - a template showing a check box. We are using the IntegralUI CheckBox directive in this case, but any other HTML element is acceptable, like input element
  • column header with text in two lines - a template with two text paragraphs
  • column header with text and an icon - a template with a paragraph containing text and image
  • column footer with button and text - a template with a paragraph containing button and text

Whenever teh button in column footer is clicked, the text is updated showing how many rows are checked.

The template is created in code, using custom CSS styles and HTML elements, and then applied to the column by using the following field:

  • headerTemplate - holds a reference to a custom template used to replace the header text with custom HTML elements
  • footerTemplate - holds a reference to a custom template used to replace the footer 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.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">

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

<iui-checkbox name="{{checkName}}" checked-changed="columns[0].onColumnCheck(e)"></iui-checkbox>

</script>

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

<div class="column-header">

<p>This is a column with longer text</p>

<p>Second line</p>

</div>

</script>

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

<div class="column-header">

<p class="check-content">In convallis tellus a mauris <span class="icons more-info"></span></p>

</div>

</script>

<script type="text/ng-template" id="footer-count.html">

<div class="column-footer">

<button class="inline-button" ng-click="columns[1].onCount()">Count</button>

<p>Checked Rows: {{columns[1].counter.checkCount}} / {{columns[1].counter.totalCount}}</p>

</div>

</script>

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" expanding-column-index="1" allow-focus="false"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

 

$scope.columns = [

{

editorType: 'checkbox',

headerAlignment: 'center',

contentAlignment: 'center',

width: 30,

fixedWidth: true,

headerTemplate: "'column-check.html'",

onColumnCheck: function(e){

var list = $gridService.getFlatList($scope.gridName, true);

for (var i = 0; i < list.length; i++)

list[i].cells[0].value = e.checked;

}

},

{

headerTemplate: "'column-two-lines.html'",

headerAlignment: 'center',

width: 350,

footerTemplate: "'footer-count.html'",

counter: {

checkCount: 0,

totalCount: 0

},

onCount: function(){

var list = $gridService.getFlatList($scope.gridName, true);

 

$scope.columns[1].counter.totalCount = list.length;

$scope.columns[1].counter.checkCount = 0;

 

for (var i = 0; i < list.length; i++){

if (list[i].cells[0].value)

$scope.columns[1].counter.checkCount++;

}

}

},

{ headerTemplate: "'column-icon.html'", headerAlignment: 'center', width: 270 },

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],

rows: [

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

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],

rows: [

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

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],

expanded: false,

rows: [

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

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

]

},

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

]

},

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

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],

expanded: false,

rows: [

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

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

]

}

]

},

{

id: 2,

text: "Item2",

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

rows: [

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

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

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],

expanded: false,

rows: [

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

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

]

}

]

},

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

];

 

// Update data in the footer

var initTimer = $timeout(function(){

$scope.columns[1].onCount();

$timeout.cancel(initTimer);

}, 100);

}]);

.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell

{

padding: 1px 3px;

}

.iui-treegrid-row-cell-content

{

padding: 1px 3px;

}

.column-header

{

margin: 0;

padding: 0;

}

.column-header p

{

margin: 0;

padding: 0;

}

.column-header p:hover

{

color: white !important;

}

.column-header p:first-child

{

font-weight: bold;

}

.column-header p:last-child

{

color: #008000;

}

.check-content

{

font-style: italic;

font-weight: normal !important;

color: #800000 !important;

}

.more-info

{

background-position: -16px -80px;

}

.more-info:hover

{

background-position: 0 -80px;

}

.column-footer

{

margin: 0;

padding: 0;

white-space: nowrap;

}

.column-footer p

{

display: inline-block;

margin: 0;

padding: 0;

}

.inline-button

{

background: #2455b0;

border: thin solid black;

color: white;

display: inline-block;

margin: 0 25px 0 3px;

width: 60px;

}

.inline-button:hover

{

background-color: #153268;

}