TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 30 June 2014
Updated: May 15, 2015
When creating tree structure in TreeView directive for AngularJS the expanded variable for all items by default is undefined. This is the same as setting this variable to true, meaning that by default all items are expanded. If this value is changed to false for a specific item, it will become collapsed.
Similar: TreeView Component for Angular 2
There are different ways to expand and collapse items in TreeView directive for AngularJS. Here is a list of what’s available:
The InteralUITreeViewService is a service which contains most of the public methods in TreeView directive for AngularJS. In order to expand all items or a specific item in the TreeView we are going to use the same method. Here is an example:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITreeViewService", function($scope, $treeService){
$scope.data = [];
$scope.treeName = "treeSample";
var getCurrentSelection = function(){
return $treeService.selectedItem($scope.treeName);
}
$treeService.expand($scope.treeName, getCurrentSelection());
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.css" />
<link rel="stylesheet" href="css/integralui.checkbox.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.checkbox.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" show-check-boxes="true" checkbox-settings="checkBoxSettings"></iui-treeview>
</div>
</body>
</html>
In above code at first we are retrieving the currently selected node and then we use the expand method to expand the selected item. If the item is already expanded, nothing happens.
If the argument for this method is not provided, it is presumed that all items should become expanded.
Related: Load on Demand in TreeView
In similar way we can call the collapse method and collapse the specified item or all items. In following code we are using the collapse method without setting a specific item, and as a result all items will become collapsed:
$treeService.collapse($scope.treeName);
The use of TreeView service mentioned in above examples is not required, it is entirely optional. You can expand or collapse items in TreeView just by using the expanded variable for each item. This variable can be set during creation of tree structure or later, dynamically when it is necessary. Its use is very simple. To expand an item set this variable to true, to collapse it set it to false:
var selItem = $treeService.selectedItem($scope.treeName);
selItem.expanded = true;
Whenever an item is in the process of expanding its content, two events are fired: beforeExpand and afterExpand. In similar way whenever item becomes collapsed beforeCollapse and afterCollapse events are fired. By handling this events you can add a specific action to take place or even prevent item from expanding or collapsing.
Related: Expand Items on Mouse Hover or Text Click
In this example we are going to show how to handle the beforeExpand event and prevent a specific item from expanding. In order to cancel the expand process, we only need to return a false value when specific condition is fulfilled.
$scope.onBeforeExpand = function(e){
if (e.item.id === '2')
return false;
}
<integralui-treeview items="data" before-expand="onBeforeExpand"></integralui-treeview>
In above code item with identifier set to value 2 cannot become expanded. It will remain collapsed all the time.
Note If we change the value of expanded variable for a specific item, the beforeExpand and beforeCollapse events will not be fired. This is because item is epxnaded within the scope of your application and in AngularJS there is no way to handle changing of values of scope variables, only we can watch whether the value has changed afterwards.