LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Even-Odd Items


An example of TreeView with items displayed in alternate colors.

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

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

<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

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

<iui-treeview name="{{treeName}}" items="items" control-style="ctrlStyle" item-icon="itemIcon" after-expand="onAfterExpand(e)" after-collapsed="onAfterCollapse(e)"></iui-treeview>

</div>

</body>

</html>

angular

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

.controller("appCtrl", ["$scope", "IntegralUITreeViewService", "$timeout", function($scope, $treeService, $timeout){

$scope.treeName = "treeSample";

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

 

$scope.ctrlStyle = {

item: {

content: 'item-content'

}

}

 

var evenItemStyle = {

general: {

normal: 'even-item',

hovered: 'even-item',

selected: 'even-item-selected'

}

}

 

var oddItemStyle = {

general: {

normal: 'odd-item',

hovered: 'odd-item',

selected: 'odd-item-selected'

}

}

 

$scope.items = [

{

id: 1,

text: "Favorites",

icon: "icons-medium favorites",

items: [

{ id: 11, pid: 1, text: "Desktop" },

{ id: 12, pid: 1, text: "Downloads", icon: "icons-medium downloads" }

]

},

{

id: 2,

text: "Libraries",

icon: "icons-medium folder",

items: [

{

id: 21,

pid: 2,

text: "Documents",

icon: "icons-medium documents",

expanded: false,

items: [

{ id: 211, pid: 21, text: "My Documents" },

{ id: 212, pid: 21, text: "Public Documents" }

]

},

{ id: 22, pid: 2, text: "Music", icon: "icons-medium music-note" },

{ id: 23, pid: 2, text: "Pictures", icon: "icons-medium pictures" },

{ id: 24, pid: 2, text: "Videos", icon: "icons-medium videos" }

]

},

{

id: 3,

text: "Computer",

icon: "icons-medium pc",

expanded: false,

items: [

{ id: 31, pid: 3, text: "Local Disk (C:)", icon: "icons-medium disk" },

{ id: 32, pid: 3, text: "Storage (D:)", icon: "icons-medium disk" }

]

},

{ id: 4, text: "Network", icon: "icons-medium network" },

{ id: 5, text: "Recycle Bin", icon: "icons-medium recycle" }

];

 

var initTimer = $timeout(function(){

$treeService.selectedItem($scope.treeName, $scope.items[1].items[0]);

updateAppearance();

 

$timeout.cancel(initTimer);

}, 1);

 

var updateAppearance = function(){

var updateTimer = $timeout(function(){

var list = $treeService.getList($scope.treeName, null, true);

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

list[i].style = i % 2 == 0 ? evenItemStyle : oddItemStyle;

 

$treeService.refresh($scope.treeName);

 

$timeout.cancel(updateTimer);

}, 1);

}

 

$scope.onAfterExpand = function(e){

updateAppearance();

}

 

$scope.onAfterCollapse = function(e){

updateAppearance();

}

}]);

.item-content

{

background: transparent;

}

.even-item

{

background: #f5f5f5;

}

.even-item-selected

{

background: #f5f5f5;

font-weight: bold;

}

.odd-item

{

background: #e1e1e1;

}

.odd-item-selected

{

background: #e1e1e1;

font-weight: bold;

}