LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


TreeView / Add-Remove








In this sample you can create and/or modify a tree hierarchy using several different methods:

  • addItem - adds a new item
  • insertItemAfter - adds a new item after specified item (in this sample the selected item)
  • insertItemAt - adds a new item at specified position
  • insertItemBefore - adds a new item before specified item (in this sample the selected item)
  • removeItem - removes a item (in this sample the selected item)
  • removeItemAt - removes a item at specified position from parent collection
  • clearItems - removes all items

<!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" selection-changed="onSelectionChanged()" tabindex="0"></iui-treeview>

<div>

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

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

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

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

<div>

<button ng-click="insertAt()">Insert At</button><input ng-model="insertPos" type="number" min="0" max="100"/>

</div>

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

<div>

<button ng-click="removeAt()">Remove At</button><input ng-model="removePos" type="number" min="0" max="100"/><br />

</div>

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

</div>

</div>

</body>

</html>

angular

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

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

$scope.data = [];

$scope.insertPos = 0;

$scope.removePos = 0;

$scope.treeName = "treeSample";

$scope.disableButtons = true;

 

var itemCount = 0;

 

var getCurrentSelection = function(){

return $treeService.selectedItem($scope.treeName);

}

 

var createNewItem = function(){

return { text: "Item" + itemCount };

}

 

$scope.addRoot = function(){

$treeService.addItem($scope.treeName, createNewItem());

}

 

$scope.addChild = function(){

$treeService.addItem($scope.treeName, createNewItem(), getCurrentSelection());

}

 

$scope.insertAfter = function(){

$treeService.insertItemAfter($scope.treeName, createNewItem(), getCurrentSelection());

}

 

$scope.insertAt = function(){

$treeService.insertItemAt($scope.treeName, createNewItem(), $scope.insertPos, getCurrentSelection());

}

 

$scope.insertBefore = function(){

$treeService.insertItemBefore($scope.treeName, createNewItem(), getCurrentSelection());

}

 

$scope.remove = function(){

$treeService.removeItem($scope.treeName, getCurrentSelection());

}

 

$scope.removeAt = function(){

$treeService.removeItemAt($scope.treeName, $scope.removePos, getCurrentSelection());

}

 

$scope.clear = function(){

$treeService.clearItems($scope.treeName);

$scope.disableButtons = true;

itemCount = 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;

});

}]);