Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components

TreeGrid / CheckBox in Header

In this sample, first column header contains a checkbox, and the footer of second column use a custom template to show the number of checked rows. When checkbox in column header is clicked, it will change the value of all checkboxes in column cells. In addition, the footer of second column displays 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 default header with custom HTML elements
  • footerTemplate - holds a reference to a custom template used to replace the default footer 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>



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

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

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



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



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





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




headerText: "Header 2",

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)





{ headerText: "Header 3", width: 270 },



$scope.rows = [];


var createCell = function(i, j){

var cell = {

text: "Item" + i + j



return cell;



var getCells = function(i){

var cellList = [];


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

cellList.push(createCell(i, j));


return cellList;



var createRow = function(i){

var row = {

id: i,

text: "Item" + i,

cells: getCells(i)



return row;



var initRows = function(){

for (var i = 1; i <= 25; i++)






// Update data in the footer

var initTimer = $timeout(function(){



}, 100);




border: thin solid #dadada;

width: 700px;

height: 350px;




margin: 0;

padding: 0;

white-space: nowrap;


.column-footer p


display: inline-block;

margin: 0;

padding: 0;




background: #2455b0;

border: thin solid black;

color: white;

display: inline-block;

margin: 0 25px 0 3px;

width: 60px;




background-color: #153268;