LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Even-Odd Rows


An example of TreeGrid with rows displayed in alternate colors.

Each row can have a unique look. This is done by setting custom CSS class to the style of specific row. In case of this sample, we want to have even rows in same color, and different colro for odd rows. This is done by creating two custom CSS classes which will be applied to even or odd rows, accordingly to their order.

We are using a list of currently visible rows to apply style changes. And because this list doesn't include child rows of collapsed parent row, whenever row is expanded or collapsed, the appearance is updated. By handling afterExpand and afterCollapsed events, we can update their appearance, so that even/odd row look is sustained.

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" control-style="ctrlStyle" allow-focus="false" show-footer="false" grid-lines="gridLines" after-expand="onAfterExpand(e)" after-collapsed="onAfterCollapse(e)"></iui-treegrid>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.rows = [];

$scope.defaultIcon = "icons-medium empty-doc";

$scope.gridLines = 'horizontal';

 

$scope.columns = [

{ id: 1, headerText: "Name", width: 225 },

{ id: 2, headerText: "Date Modified", headerAlignment: "center", contentAlignment: "center", width: 125 },

{ id: 3, headerText: "Type", headerAlignment: "center", width: 150 },

{ id: 4, headerText: "Size", headerAlignment: "center", contentAlignment: "right", width: 90 }

];

 

var evenRowStyle = {

general: {

normal: 'even-row'

}

}

 

var oddRowStyle = {

general: {

normal: 'odd-row'

}

 

$scope.flatData = [

{

id: 1,

text: "Favorites",

icon: "icons-medium favorites",

cells: [{ cid: 1, text: "Favorites" }]

},

{

id: 11,

pid: 1,

text: "Desktop",

cells: [{ cid: 1, text: "Desktop" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "7 KB" }]

},

{

id: 12,

pid: 1,

text: "Downloads",

icon: "icons-medium downloads",

cells: [{ cid: 1, text: "Downloads" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "23,719 KB" }]

},

{

id: 2,

text: "Libraries",

icon: "computer-icons folder",

cells: [{ cid: 1, text: "Libraries" }]

},

{

id: 21,

pid: 2,

text: "Documents",

icon: "icons-medium documents",

expanded: false,

cells: [{ cid: 1, text: "Documents" }, { cid: 3, text: "Library" }, { cid: 4, text: "104 KB" }]

},

{

id: 211,

pid: 21,

text: "My Documents",

cells: [{ cid: 1, text: "My Documents" }, { cid: 2, text: "4/7/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "61 GB" }]

},

{

id: 212,

pid: 21,

text: "Public Documents",

cells: [{ cid: 1, text: "Public Documents" }, { cid: 2, text: "2/17/2015" }, { cid: 3, text: "File Folder" }, { cid: 4, text: "43 KB" }]

},

{

id: 22,

pid: 2,

text: "Music",

icon: "icons-medium music-note",

cells: [{ cid: 1, text: "Music" }, { cid: 2, text: "3/19/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "12,748 KB" }]

},

{

id: 23,

pid: 2,

text: "Pictures",

icon: "icons-medium pictures",

cells: [{ cid: 1, text: "Pictures" }, { cid: 2, text: "1/29/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "1,079 KB" }]

},

{

id: 24,

pid: 2,

text: "Videos",

icon: "icons-medium videos",

cells: [{ cid: 1, text: "Videos" }, { cid: 2, text: "4/5/2015" }, { cid: 3, text: "Library" }, { cid: 4, text: "37,251 KB" }]

},

{

id: 3,

icon: "icons business",

text: "Computer",

icon: "icons-medium pc",

cells: [{ cid: 1, text: "Computer" }]

},

{

id: 31,

pid: 3,

text: "Local Disk (C:)",

icon: "icons-medium disk",

cells: [{ cid: 1, text: "Local Disk (C:)" }, { cid: 2, text: "4/3/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "249 GB" }]

},

{

id: 32,

pid: 3,

text: "Storage (D:)",

icon: "icons-medium disk",

cells: [{ cid: 1, text: "Storage (D:)" }, { cid: 2, text: "1/27/2015" }, { cid: 3, text: "Local Disk" }, { cid: 4, text: "449 GB" }]

},

{

id: 4,

text: "Network",

icon: "icons-medium network",

cells: [{ cid: 1, text: "Network" }]

},

{

id: 5,

text: "Recycle Bin",

icon: "icons-medium recycle",

cells: [{ cid: 1, text: "Recycle Bin" }, { cid: 2, text: "2/7/2015" }, { cid: 4, text: "5,296 KB" }]

}

];

 

var loadTimer = $timeout(function(){

$gridService.loadData($scope.gridName, $scope.flatData);

 

updateAppearance();

 

$timeout.cancel(loadTimer);

}, 1);

 

var updateAppearance = function(){

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

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

list[i].style = i % 2 == 0 ? evenRowStyle : oddRowStyle;

}

 

$scope.onAfterExpand = function(e){

var updateTimer = $timeout(function(){

updateAppearance();

 

$timeout.cancel(updateTimer);

}, 1);

}

 

$scope.onAfterCollapse = function(e){

var updateTimer = $timeout(function(){

updateAppearance();

 

$timeout.cancel(updateTimer);

}, 1);

}

}]);

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

{

padding: 0 2px;

}

.iui-treegrid-row-cell-content

{

padding: 4px 2px;

}

.even-row

{

background: #f5f5f5;

}

.odd-row

{

background: #e1e1e1;

}