LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Tree Lines



In this sample you can show/hide tree lines in TreeView directive. By clicking on check box on the right, you can change the built-in properties:

  • showLines - determines whether tree lines are visible

The appearance of expand boxes is also changed from arrows to plus/minus icons.

This sample also has indent property set to 25, this increases the distance between items of different levels by 25 pixels.

<!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-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="data" show-lines="showLines" indent="25"></iui-treeview>

<label><input type="checkbox" ng-click="toggleLines()" checked="checked" /> Show Lines</label><br />

</div>

</body>

</html>

angular

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

.controller("appCtrl", function($scope){

$scope.treeName = "treeSample";

$scope.showLines = true;

 

$scope.data = [

{

id: 1,

text: "Item1",

items: [

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

{

id: 12,

pid: 1,

text: "Item12",

expanded: false,

items: [

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

{

id: 122,

pid: 12,

text: "Item122",

expanded: false,

items: [

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

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

]

},

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

{ id: 124, pid: 12, text: "Item124" },

{ id: 125, pid: 12, text: "Item125" }

]

},

{ id: 13, pid: 1, text: "Item13" },

{

id: 14,

pid: 1,

text: "Item14",

items: [

{ id: 141, pid: 14, text: "Item141" },

{ id: 142, pid: 14, text: "Item142" }

]

}

]

},

{

id: 2,

text: "Item2",

expanded: false,

items: [

{ id: 21, pid: 2, text: "Item21" },

{ id: 22, pid: 2, text: "Item22" },

{

id: 23,

pid: 2,

text: "Item23",

expanded: false,

items: [

{ id: 231, pid: 23, text: "Item231" },

{ id: 232, pid: 23, text: "Item232" }

]

}

]

},

{ id: 3, text: "Item3" },

{ id: 4, text: "Item4" },

{ id: 5, text: "Item5" },

{

id: 6,

text: "Item6",

items: [

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

{ id: 62, pid: 6, text: "Item62" }

]

},

{ id: 7, text: "Item7" }

];

 

$scope.toggleLines = function(elem){

$scope.showLines = !$scope.showLines;

}

});

.iui-treeview-item

{

margin: 0;

border: 0;

}

.iui-treeview-item-content

{

margin-left: 3px;

}

.iui-treeview-expand-box-open

{

background: url(../../../resources/expandbox/plus.png) no-repeat 0 0;

}

.iui-treeview-expand-box-close

{

background: url(../../../resources/expandbox/minus.png) no-repeat 0 0;

}