LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Overview


IntegralUI TreeView is a high performance native AngularJS directive which allows you to create and modify hierarchical structures on the fly. You can quickly load data locally, remotely, or on demand. It has multiple methods optimized to quickly update the tree structure and current view.

TreeView appearance is fully customizable, including icons and images that represent custom state of each item. There are multiple styles available, which allows you to customize the appearance of each control part, dynamically from code.

Drag Drop is also included and allows you to move items within the same TreeView, to other TreeViews or other controls like TreeGrid. During these operations many events are triggered, like: DragEnter, DragLeave, DragOver, DropDrop, which you can override and add your own code.

Using links in left panel, you can check out different features of TreeView directive.

<!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.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.checkbox.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="data" show-check-boxes="true" checkbox-settings="checkBoxSettings" item-checkstate-changing="itemCheckStateChanging(e)"></iui-treeview>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

 

$scope.checkBoxSettings = {

autoCheck: true,

threeState: true

}

 

$scope.data = [

{

id: 1,

text: "Books",

icon: "icons-medium library",

items: [

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

{

id: 12,

pid: 1,

text: "Business",

icon: "icons-medium people",

items: [

{ id: 121, pid: 12, text: "Economics" },

{

id: 122,

pid: 12,

checkState: 'checked',

text: "Investing",

expanded: false,

icon: "icons-medium economics",

items: [

{ id: 1221, pid: 122, text: "Bonds" },

{ id: 1222, pid: 122, text: "Options" },

{ id: 1223, pid: 122, text: "Stocks" }

]

},

{ id: 123, pid: 12, text: "Management" },

{ id: 124, pid: 12, text: "Small Business" }

]

},

{ id: 13, pid: 1, text: "Health", icon: "icons-medium heart", checkState: 'checked' },

{ id: 14, pid: 1, text: "Literature" },

{

id: 15,

pid: 1,

text: "Science",

expanded: false,

items: [

{ id: 151, pid: 15, text: "Astronomy" },

{ id: 152, pid: 15, text: "Mathematics" },

{ id: 153, pid: 15, text: "Evolution" },

{ id: 154, pid: 15, text: "Nature" }

]

}

]

},

{ id: 2, text: "Computers" },

{

id: 3,

checkState: 'checked',

text: "Electronics",

items: [

{ id: 31, pid: 3, text: "Camera", icon: "icons-medium camera" },

{ id: 32, pid: 3, text: "Cell Phones" },

{ id: 33, pid: 3, text: "Video Game Consoles" }

]

},

{

id: 4,

text: "Music",

expanded: false,

icon: "icons-medium album",

items: [

{ id: 41, pid: 4, text: "Blues" },

{ id: 42, pid: 4, text: "Classic Rock" },

{ id: 43, pid: 4, text: "Pop" },

{ id: 44, pid: 4, text: "Jazz" }

]

},

{

id: 5,

text: "Software",

icon: "icons-medium software",

items: [

{ id: 51, pid: 5, text: "Games", checkState: 'checked' },

{ id: 52, pid: 5, text: "Operating Systems" },

{ id: 53, pid: 5, text: "Network & Servers" },

{ id: 54, pid: 5, text: "Security" }

]

},

{

id: 6,

text: "Sports",

expanded: false,

icon: "icons-medium sports",

items: [

{ id: 61, pid: 6, text: "Baseball" },

{ id: 62, pid: 6, text: "Martial Arts", checkState: 'checked' },

{ id: 63, pid: 6, text: "Running" },

{

id: 64,

pid: 6,

text: "Tennis",

expanded: false,

items: [

{ id: 641, pid: 64, text: "Accessories" },

{ id: 642, pid: 64, text: "Balls" },

{ id: 643, pid: 64, text: "Racquets" }

]

}

]

},

{ id: 7, text: "Video Games" },

{ id: 8, text: "Watches", icon: "icons-medium clock" }

];

 

var initTimer = $timeout(function(){

$treeService.updateCheckValues($scope.treeName);

 

$timeout.cancel(initTimer);

}, 1);

 

$scope.itemCheckStateChanging = function(e){

if (e.value == 'unchecked')

e.item.checkState = 'checked';

}

});

.iui-checkbox-box

{

border: 0;

width: 16px;

height: 16px;

}

.iui-checkbox-checked

{

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

}

.iui-checkbox-unchecked

{

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

}

.iui-checkbox-indeterminate

{

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

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

overflow: hidden;

padding: 0 !important;

margin: 0 1px 0 5px;

width: 24px;

height: 24px;

vertical-align: middle;

}

.library

{

background-position: 0 -72px;

}

.economics

{

background-position: -24px -72px;

}

.software

{

background-position: -48px -72px;

}

.clock

{

background-position: -72px -72px;

}

.sports

{

background-position: -96px -72px;

}

.people

{

background-position: -120px -72px;

}

.heart

{

background-position: -168px -72px;

}

.album

{

background-position: -144px -48px;

}

.camera

{

background-position: -168px -48px;

}