LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Cells Custom Check Box


An example on how to customize the appearance of check boxes in TreeGrid.

Instead of showing a check mark for checked state and an empty box for unchecked state of check boxes, we are using custom images. Depending on check box state, you can apply a different image. This is done by overriding the default styles of CheckBox with custom styles, which can be applied through code.

This sample also shows, how to disable a row at run-time. The row will become enabled/disabled depending on the state of its check box, checked/unchecked. Whenever a row is disabled, all mouse clicks are excluded and it is also excluded from keyboard navigation.

For more information check out the source code of this sample.

<!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" show-footer="false" cellvalue-changed="onCellValueChanged(e)" allow-cell-focus="false"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.gridLines = 'vertical';

 

$scope.columns = [

{

id: 9,

contentAlignment: 'center',

editorType: 'checkbox',

editorSettings: {

style: {

general: 'checkbox',

box: {

general: 'checkbox-box',

checked: 'checkbox-checked',

unchecked: 'checkbox-unchecked'

}

}

},

width: 42,

fixedWidth: true

},

{ id: 2, headerText: "Continents/Countries", width: 250 },

{ id: 3, headerText: "Population", headerAlignment: "center", contentAlignment: "right", width: 125 },

{ id: 4, headerText: "Date", headerAlignment: "center", contentAlignment: "center", width: 120 },

{ id: 6, headerText: "Land in km2", headerAlignment: "center", contentAlignment: "right", width: 90 },

{ id: 7, headerText: "Capital", headerAlignment: "center", width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Africa",

expanded: false,

cells: [{ cid: 9 }, { cid: 2, text: "Africa" }],

rows: [

{ id: 11, pid: 1, text: "Egypt", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Egypt" }, { cid: 3, text: "88,311,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "995,450" }, { cid: 7, text: "Cairo" }] },

{ id: 12, pid: 1, text: "Nigeria", cells: [{ cid: 9 }, { cid: 2, text: "Nigeria" }, { cid: 3, text: "185,043,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "910,768" }, { cid: 7, text: "Abuja" }] },

{ id: 13, pid: 1, text: "South Africa", cells: [{ cid: 9 }, { cid: 2, text: "South Africa" }, { cid: 3, text: "54,002,000" }, { cid: 4, text: "01 Jul 2014" }, { cid: 6, text: "1,214,470" }, { cid: 7, text: "Pretoria" }] }

]

},

{

id: 2,

text: "Asia",

enabled: false,

expanded: false,

cells: [{ cid: 9 }, { cid: 2, text: "Asia" }],

rows: [

{ id: 21, pid: 2, text: "China", cells: [{ cid: 9 }, { cid: 2, text: "China" }, { cid: 3, text: "1,369,140,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "9,326,410" }, { cid: 7, text: "Beijing" }] },

{ id: 22, pid: 2, text: "India", cells: [{ cid: 9 }, { cid: 2, text: "India" }, { cid: 3, text: "1,269,545,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,864,021" }, { cid: 7, text: "New Delhi" }] },

{ id: 23, pid: 2, text: "Japan", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Japan" }, { cid: 3, text: "126,910,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "364,485" }, { cid: 7, text: "Tokyo" }] },

{ id: 24, pid: 2, text: "Saudi Arabia", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Saudi Arabia" }, { cid: 3, text: "31,521,418" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,149,690" }, { cid: 7, text: "Riyadh" }] },

{ id: 25, pid: 2, text: "South Korea", cells: [{ cid: 9 }, { cid: 2, text: "South Korea" }, { cid: 3, text: "51,342,881" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "100,032" }, { cid: 7, text: "Seoul" }] }

]

},

{

id: 3,

text: "Europe",

cells: [{ cid: 9 }, { cid: 2, text: "Europe" }],

rows: [

{ id: 31, pid: 3, text: "France", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "France" }, { cid: 3, text: "66,109,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "640,427" }, { cid: 7, text: "Paris" }] },

{ id: 32, pid: 3, text: "Germany", cells: [{ cid: 9 }, { cid: 2, text: "Germany" }, { cid: 3, text: "80,925,000" }, { cid: 4, text: "30 Jun 2014" }, { cid: 6, text: "348,672" }, { cid: 7, text: "Berlin" }] },

{ id: 33, pid: 3, text: "Italy", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Italy" }, { cid: 3, text: "60,788,845" }, { cid: 4, text: "30 Nov 2014" }, { cid: 6, text: "294,140" }, { cid: 7, text: "Rome" }] },

{ id: 34, pid: 3, text: "Macedonia", cells: [{ cid: 9 }, { cid: 2, text: "Macedonia" }, { cid: 3, text: "2,065,769" }, { cid: 4, text: "31 Dec 2013" }, { cid: 6, text: "25,433" }, { cid: 7, text: "Skopje" }] }

]

},

{

id: 4,

text: "North America",

cells: [{ cid: 9 }, { cid: 2, text: "North America" }],

rows: [

{ id: 41, pid: 4, text: "Canada", cells: [{ cid: 9 }, { cid: 2, text: "Canada" }, { cid: 3, text: "35,702,707" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "9,093,507" }, { cid: 7, text: "Ottawa" }] },

{ id: 42, pid: 4, text: "Mexico", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Mexico" }, { cid: 3, text: "121,005,815" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "1,943,945" }, { cid: 7, text: "Mexico City" }] },

{ id: 43, pid: 4, text: "USA", cells: [{ cid: 9 }, { cid: 2, text: "USA" }, { cid: 3, text: "320,651,000" }, { cid: 4, text: "07 Apr 2015" }, { cid: 6, text: "9,161,966" }, { cid: 7, text: "Washington" }] }

]

},

{

id: 5,

text: "South America",

enabled: false,

cells: [{ cid: 9 }, { cid: 2, text: "South America" }],

rows: [

{ id: 51, pid: 5, text: "Argentina", cells: [{ cid: 9 }, { cid: 2, text: "Argentina" }, { cid: 3, text: "43,131,966" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,736,690" }, { cid: 7, text: "Buenos Aires" }] },

{ id: 52, pid: 5, text: "Brazil", cells: [{ cid: 9 }, { cid: 2, text: "Brazil" }, { cid: 3, text: "204,134,000" }, { cid: 4, text: "08 Apr 2015" }, { cid: 6, text: "8,460,415" }, { cid: 7, text: "Brasília" }] }

]

}

];

 

var updateCheckValues = function(){

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

 

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

list[i].cells[0].value = list[i].enabled != false;

}

 

var loadTimer = $timeout(function(){

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

updateCheckValues();

 

$timeout.cancel(loadTimer);

}, 1);

 

$scope.onCellValueChanged = function(e){

if (e.row){

e.row.enabled = (e.value == true || e.value == 'checked') ? true : false;

if (e.value == false)

$gridService.collapse($scope.gridName, e.row);

else

gridService.expand($scope.gridName, e.row);

 

gridService.refresh($scope.gridName, e.row);

}

}

}]);

.checkbox

{

width: 32px;

margin: auto;

}

.checkbox-box

{

border: 0;

display: inline-block;

width: 32px;

height: 14px;

}

.checkbox-checked

{

color: red;

background-image: url("../../../resources/checkbox/checkbox-checked-5.png");

}

.checkbox-unchecked

{

background-image: url("../../../resources/checkbox/checkbox-unchecked-5.png");

}