LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Add/Remove Items in TreeView for AngularJS

Created: 30 June 2014

Creating a tree structure in AngularJS is simple. There are few variables that need to be set in order to create a tree hierarchy:

  • id – Specifies a unique identifier used to differentiate items from each other
  • pid – Specifies the identifier of parent item to which an item is child of
  • text – Specifies the item label
  • expanded – Optional, determines whether the item is in expanded or collapsed state

Although creating a tree hierarchy on your own in your application scope is possible, it is better to use the already built-in methods in TreeView service which is part of IntegralUI TreeView directive, all above variables are optional, except for the text variable. In following section we will show you how to use these methods which are part of this service.

TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps






Adding an Item to the TreeView

The simplest way to add an item to a tree structure is to use the javascript push method, like this:

angular

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

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

$scope.data = [];

$scope.treeName = "treeSample";

 

var createNewItem = function(){

return { text: "Item" + $scope.data.length };

}

 

$scope.data.push(createNewItem());

}]);

<!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-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.treeview.min.js"></script>

</head>

<body>

<div ng-app="appModule" ng-controller="appCtrl">

<iui-treeview name="{{treeName}}" items="data"></iui-treeview>

</div>

</body>

</html>

The same can be done using the addItem method in our tree view service:

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

One additional advantage of this method is that allows you to specify the parent item to which the newly created item will be added as a child. In this way instead of using the plain javascript methods to create your tree structure, use of tree view service is cleaner and faster.

Note The treeName variable we have set in our application scope is used by the TreeView directive to distinguish it from other TreeView directives which may be present in our application. This name is also used by the IntegralUITreeViewService to apply callings to specific methods for the TreeView which name attribute matches the value of treeName variable.

Insert Item at Specific Position

Above method will only add items to the end of the tree hierarchy. However in some case we may need to insert a new item to a specific location. To do this we wil use different methods, there are three available methods:

  • insertItemAt – Inserts the specified item at specified position in tree hierachy
  • insertItemAfter – Inserts the specified item as a sibling at position after the target item
  • insertItemBefore – Insert the specified item as a sibling at position before the target item

For example, here is how to add a new item at position 1 as a child of currently selected item:

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

Whenever a new item is added to the TreeView, the itemAdding and itemAdded events are fired. This gives you further control on how and when you want to add new items to the tree view. By handling the itemAdding event you can cancel the whole process.

Delete Item from Tree Structure

Finally, any existing item in tree structure can also be removed from it. For this purpose three methods are available:

  • removeItem – Removes a specified item from tree hierachy
  • removeItemAt – Removes an item which is located at specified index
  • clearItems – Removes all items from the TreeView

In following example we are showing how to remove the currently selected item from the TreeView.

var getCurrentSelection = function(){

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

}

 

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

In similar way as with adding methods, whenever an item is deleted from the TreeView, the itemRemoving and itemRemoved events are fired. The itemRemoving event can also ne handled to prevent a specific item to become deleted when some condition is fullfilled.

To check how this works out, look at the Add/Remove Items in TreeView for AngularJS online sample.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.