LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Fast Load

Max items:
Levels:

In this sample you can add large set of items to the TreeView. Although there is no limit on how many items you can add, for demonstration purposes we have limited the maximum number of items to 100,000.

Using controls in right panel, you can add maximum of 100,000 items with maximum depth of 100 tree levels.

<!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="localData"></iui-treeview>

<div>

<table>

<tr>

<td style="white-space:nowrap;">Max items: </td>

<td><input type="number" ng-model="numItems" min="1" max="100000" style="width:75px" integer /></td>

</tr>

<tr>

<td>Levels: </td>

<td><input type="number" ng-model="numLevels" min="0" max="100" style="width:75px" integer /></td>

</tr>

</table>

<div align="center" style="margin-top:20px">

<button ng-click="add()" style="width:65px; margin-right:10px">Add</button>

<button ng-click="clear()" style="width:65px">Clear</button>

</div>

<div align="center" style="margin-top:20px">

<button ng-click="expandAll()" style="margin-bottom:5px;width:140px">Expand All</button>

<button ng-click="collapseAll()" style="width:140px">Collapse All</button>

</div>

</div>

</div>

</body>

</html>

angular

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

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

$scope.treeName = "treeSample";

$scope.localData = [];

$scope.numItems = 50000;

$scope.numLevels = 3;

$scope.treeName = "treeSample";

 

var itemCount = 0;

 

// Make sure each node has a random set of child items

var getRandomNumber = function(level){

var nCount = 1 + Math.floor(Math.random() * 10);

 

if (level === 0)

{

if ($scope.numLevels == 0)

nCount = $scope.numItems;

else

{

var derivative = 1;

for (var k = 1; k <= $scope.numLevels; k++)

derivative = (derivative * nCount) + 1;

 

nCount = $scope.numItems / derivative + 1;

if (nCount < 1000)

nCount = 1000;

}

}

 

return nCount;

}

 

// Recursive function for adding root and child items to the TreeView

var addLarge = function(parentItem, level){

if (level > $scope.numLevels)

return;

 

var numChilds = getRandomNumber(level);

for (var i = 0; i < numChilds; i++){

if (itemCount < $scope.numItems){

var item = {

text : 'Item ' + (itemCount+1).toString(),

id: itemCount,

expanded : false

}

 

$treeService.addItem($scope.treeName, item, parentItem);

itemCount++;

 

addLarge(item, level + 1);

}

}

};

 

// Clear the content of TreeView

var clearList = function(){

$treeService.clearItems($scope.treeName);

itemCount = 0;

}

 

$scope.add = function(){

clearList();

 

$treeService.suspendLayout($scope.treeName);

 

// Populate the TreeView with data

addLarge(null, 0);

 

$treeService.resumeLayout($scope.treeName);

}

 

$scope.clear = function(){

clearList();

}

 

$scope.expandAll = function(){

$treeService.expand($scope.treeName);

}

 

$scope.collapseAll = function(){

$treeService.collapse($scope.treeName);

}

 

$scope.$watch("numItems", function(newValue, oldValue){

if (isNaN(newValue))

$scope.numItems = oldValue;

});

 

$scope.$watch("numLevels", function(newValue, oldValue){

if (isNaN(newValue))

$scope.numLevels = oldValue;

});

}]);