LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / How to Highlight Rows


This sample demonstrates how to highlight rows in TreeGrid, whenever a row is checked. Selection of rows for this sample is disabled.

By default all rows have their appearance set by general CSS styles. TreeGrid has an option to alter the appearance of each column, row or cell by simply overriding these CSS styles, through code. You may also notice that check box has a different appearance: blue border which when checked goes red with red check mark.

You can dynamically change the overall appearance of rows by simply applying a different CSS class to a specific row, based on its current state. There are 5 different states for a row: disabled, hovered, normal, focused and selected. By default each row is in normal state. As it can be seen from code of this sample, we are are making checked rows to become highlighted by simply setting a CSS class.

In similar way you can customize the appearance of other parts of TreeGrid like: expand box, individual cells, column headers or footers, etc.

<!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-focus="false" selection-mode="none"></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,

editorType: 'checkbox',

editorSettings: {

threeState: false,

style: {

general: 'checkbox',

box: {

checked: 'checkbox-checked',

unchecked: 'checkbox-unchecked'

}

}

},

contentAlignment: 'center',

width: 30,

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", cells: [{ cid: 9 }, { cid: 2, text: "Egypt" }, { cid: 1, value: '../../../resources/flags/egypt.png' }, { 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: 1, value: '../../../resources/flags/nigeria.png' }, { 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: 1, value: '../../../resources/flags/south-africa.png' }, { 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",

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

rows: [

{ id: 21, pid: 2, text: "China", cells: [{ cid: 9 }, { cid: 2, text: "China" }, { cid: 1, value: '../../../resources/flags/china.png' }, { 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: 1, value: '../../../resources/flags/india.png' }, { 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", cells: [{ cid: 9 }, { cid: 2, text: "Japan" }, { cid: 1, value: '../../../resources/flags/japan.png' }, { 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", cells: [{ cid: 9 }, { cid: 2, text: "Saudi Arabia" }, { cid: 1, value: '../../../resources/flags/saudi-arabia.png' }, { 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: 1, value: '../../../resources/flags/south-korea.png' }, { 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", cells: [{ cid: 9 }, { cid: 2, text: "France" }, { cid: 1, value: '../../../resources/flags/france.png' }, { 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: 1, value: '../../../resources/flags/germany.png' }, { 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", cells: [{ cid: 9 }, { cid: 2, text: "Italy" }, { cid: 1, value: '../../../resources/flags/italy.png' }, { 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: 1, value: '../../../resources/flags/macedonia.png' }, { 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: 1, value: '../../../resources/flags/canada.png' }, { 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", cells: [{ cid: 9 }, { cid: 2, text: "Mexico" }, { cid: 1, value: '../../../resources/flags/mexico.png' }, { 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: 1, value: '../../../resources/flags/usa.png' }, { 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",

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

rows: [

{ id: 51, pid: 5, text: "Argentina", cells: [{ cid: 9 }, { cid: 2, text: "Argentina" }, { cid: 1, value: '../../../resources/flags/argentina.png' }, { 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: 1, value: '../../../resources/flags/brazil.png' }, { cid: 3, text: "204,134,000" }, { cid: 4, text: "08 Apr 2015" }, { cid: 6, text: "8,460,415" }, { cid: 7, text: "Brasília" }] }

]

}

];

 

var loadTimer = $timeout(function(){

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

 

$timeout.cancel(loadTimer);

}, 1);

 

$scope.onCellValueChanged = function(e){

if (e.value == true || e.value == 'checked'){

e.row.style = {

general: {

normal: 'row-highlight',

hovered: 'row-highlight',

selected: 'row-highlight'

}

}

}

else

e.row.style = null;

 

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

}

 

$scope.getState = function(){

if ($scope.rows[1].cells[0].value == true)

$scope.rows[1].cells[0].value = false;

else

$scope.rows[1].cells[0].value = true;

}

}]);

.row-highlight

{

background: #008000;

}

.checkbox

{

width: 14px;

margin: auto;

}

.checkbox-checked

{

border-color: red;

color: red;

}

.checkbox-unchecked

{

border-color: #000080;

}