LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeGrid / Fast Load

Max columns: Max rows: Levels:

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

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

<!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="sampleColumns" rows="sampleRows" display-mode="optimal" show-footer="false" selection-mode="multi-extended"></iui-treegrid>

<div>

<table>

<tr>

<td>Max columns: </td>

<td class="align-left"><input type="number" ng-model="numColumns" min="1" max="100" style="width:75px" integer /></td>

</tr>

<tr>

<td>Max rows: </td>

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

</tr>

<tr>

<td>Levels: </td>

<td class="align-left"><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>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.sampleColumns = [];

$scope.sampleRows = [];

$scope.numColumns = 50;

$scope.numRows = 50000;

$scope.numLevels = 3;

 

var rowCount = 0;

 

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

var getRandomNumber = function(level){

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

 

if (level === 0)

{

if ($scope.numLevels == 0)

nCount = $scope.numRows;

else

{

var derivative = 1;

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

derivative = (derivative * nCount) + 1;

 

nCount = $scope.numRows / derivative + 1;

if (nCount < 1000)

nCount = 1000;

}

}

 

return nCount;

}

 

var addColumns = function(){

for (var j = 0; j < $scope.numColumns; j++){

var column = {

headerText : 'Column ' + (j+1).toString(),

id: j,

width: 150

};

 

$gridService.addColumn($scope.gridName, column);

}

}

 

// Recursive function for adding root and child rows to the TreeGrid

var addRows = function(parentRow, level){

if (level > $scope.numLevels)

return;

 

var numChilds = getRandomNumber(level);

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

if (rowCount < $scope.numRows){

var row = {

text : 'Row ' + (rowCount+1).toString(),

id: rowCount,

expanded : false,

cells: []

};

 

for (var j = 0; j < $scope.sampleColumns.length; j++){

row.cells.push({ text: "Item" + (rowCount+1).toString() + j });

}

 

$gridService.addRow($scope.gridName, row, parentRow);

rowCount++;

 

addRows(row, level + 1);

}

}

};

 

// Clear the content of TreeGrid

var clearList = function(){

$gridService.clearColumns($scope.gridName);

$gridService.clearRows($scope.gridName);

rowCount = 0;

}

 

$scope.add = function(){

clearList();

 

$gridService.suspendLayout($scope.gridName);

 

// Populate the TreeGrid with data

addColumns();

addRows(null, 0);

 

$gridService.resumeLayout($scope.gridName);

}

 

$scope.clear = function(){

clearList();

}

 

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

if (isNaN(newValue))

$scope.numColumns = oldValue;

});

 

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

if (isNaN(newValue))

$scope.numRows = oldValue;

});

 

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

if (isNaN(newValue))

$scope.numLevels = oldValue;

});

}]);