LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Add-Remove











In this sample you can create and/or modify data into the tree grid using several different methods:

  • addColumn - adds a new column
  • removeColumn - removes a column (in this sample the selected column)
  • clearColumns - removes all columns

  • addRow - adds a new row
  • insertRowAfter - adds a new row after specified row (in this sample the selected row)
  • insertRowAt - adds a new row at specified position
  • insertRowBefore - adds a new row before specified row (in this sample the selected row)
  • removeRow - removes a row (in this sample the selected row)
  • removeRowAt - removes a row at specified position
  • clearRows - removes all rows

You can also insert a column at specific position using other methods, in similar way as its done for rows, but to simplify this sample they are excluded from it.

<!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" selection-changed="onSelectionChanged()" row-removing="onRowRemoving(e)" row-removed="onRowRemoved(e)"></iui-treegrid>

<div>

<button ng-click="addColumn()">Add Column</button><br />

<button ng-click="removeColumn()">Remove Column</button><br />

<button ng-click="clearColumns()">Clear Columns</button>

<hr></hr>

<button ng-click="addRoot()">Add Root Row</button><br />

<button ng-click="addChild()" ng-disabled="disableButtons">Add Child Row</button><br />

<button ng-click="insertRowAfter()" ng-disabled="disableButtons">Insert Row After</button><br />

<button ng-click="insertRowBefore()" ng-disabled="disableButtons">Insert Row Before</button><br />

<div class="inline-block">

<button class="inline-button" ng-click="insertRowAt()">Insert Row At</button><input ng-model="insertPos" type="number" min="0" max="100" style="width:35px" />

</div>

<button ng-click="removeRow()" ng-disabled="disableButtons">Remove Row</button><br />

<div class="inline-block">

<button class="inline-button" ng-click="removeRowAt()">Remove Row At</button><input ng-model="removePos" type="number" min="0" max="100" style="width:35px" /><br />

</div>

<button ng-click="clearRows()">Clear Rows</button>

</div>

</div>

</body>

</html>

angular

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

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

$scope.sampleColumns = [];

$scope.sampleRows = [];

 

$scope.insertPos = 0;

$scope.removePos = 0;

$scope.gridName = "gridSample";

 

$scope.disableButtons = true;

 

var columnCount = 0;

var rowCount = 0;

 

// Columns

var getSelectedColumn = function(){

return $gridService.selectedColumn($scope.gridName);

}

 

var createNewColumn = function(){

columnCount++;

var column = {

headerText: "Header" + columnCount,

footerText: "Footer" + columnCount

}

 

return column;

}

 

$scope.addColumn = function(){

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

}

 

$scope.removeColumn = function(){

$gridService.removeColumn($scope.gridName, getSelectedColumn());

}

 

$scope.clearColumns = function(){

$gridService.clearColumns($scope.gridName);

$scope.disableButtons = true;

columnCount = 0;

}

 

// Rows

var getCurrentSelection = function(){

return $gridService.selectedRow($scope.gridName);

}

 

var createNewRow = function(){

rowCount++;

var row = {

text: "Item" + rowCount,

cells: []

}

 

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

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

 

return row;

}

 

$scope.addRoot = function(){

$gridService.addRow($scope.gridName, createNewRow());

}

 

$scope.addChild = function(){

$gridService.addRow($scope.gridName, createNewRow(), getCurrentSelection());

}

 

$scope.insertRowAfter = function(){

$gridService.insertRowAfter($scope.gridName, createNewRow(), getCurrentSelection());

}

 

$scope.insertRowAt = function(){

$gridService.insertRowAt($scope.gridName, createNewRow(), $scope.insertPos);

}

 

$scope.insertRowBefore = function(){

$gridService.insertRowBefore($scope.gridName, createNewRow(), getCurrentSelection());

}

 

$scope.removeRow = function(){

$gridService.removeRow($scope.gridName, getCurrentSelection());

}

 

$scope.removeRowAt = function(){

$gridService.removeRowAt($scope.gridName, $scope.removePos);

}

 

$scope.clearRows = function(){

$gridService.clearRows($scope.gridName);

$scope.disableButtons = true;

rowCount = 0;

}

 

$scope.onSelectionChanged = function(){

$scope.disableButtons = getCurrentSelection() ? false : true;

$scope.$apply();

}

 

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

if (isNaN(newValue))

$scope.insertPos = oldValue;

});

 

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

if (isNaN(newValue))

$scope.removePos = oldValue;

});

 

 

// Code which updates current selection after row is removed

var rowIndex = -1;

var parent = null;

 

$scope.onRowRemoving = function(e){

rowIndex = -1;

 

parent = $gridService.getRowParent($scope.gridName, e.obj);

var list = $gridService.getList($scope.gridName, parent);

if (list && list.length > 0)

rowIndex = list.indexOf(e.obj);

}

 

$scope.onRowRemoved = function(e){

var updateTimer = $timeout(function(){

var selRow = null;

var list = $gridService.getList($scope.gridName, parent);

 

if (list && list.length > 0){

if (rowIndex == list.length)

rowIndex = list.length - 1;

 

if (rowIndex >= 0 && rowIndex < list.length){

if (rowIndex < list.length)

selRow = list[rowIndex];

else

selRow = list[list.length-1];

}

}

else if (parent)

selRow = parent;

 

$gridService.selectedRow($scope.gridName, selRow);

 

$timeout.cancel(updateTimer);

}, 1);

}

}]);