Event log:
- {{ev.name}}{{ev.info}}
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: 22 August 2014
Whenever an item is clicked, selected, deleted or expand/collapse is taken place a corresponding event is fired. Each of these events can help you to add your own custom action to further enhance the interaction with TreeView component. Here you can find a full list of all events available in TreeView for AngularJS. In following section we will present how to handle some of these events.
Event log:
There are two ways to handle events in TreeView directive for AngularJS:
In first case, using a specific event attribute, for each event available there is a corresponding attribute. By setting a value to this attribute we can create a link between our application scope and the TreeView directive.
For example, for a itemClick event we will use the item-click attribute and set its value to onItemClick(e) method in our application scope:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
$scope.data = []
$scope.onItemClick = function(e){
if (e.item)
alert("Item: " + e.item.text + " is clicked at position: { x: " + e.mousePos.x + ", y: " + e.mousePos.y + " }");
}
});
<!DOCTYPE html>
<html>
<head>
<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.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<integralui-treeview items="data" item-click="onItemClick(e)"></integralui-treeview>
</div>
</body>
</html>
In above code whenever an item is clicked, a pop-up message will appear stating the position at which the item is clicked.
Related: Handling Right Click Event in TreeView AngularJS
In second case, using the events attribute is best when we want to handle multiple events. This attribute accepts an object which holds references to each event and their corresponding handler function. We can use the same event handler from above code, with little modifications:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
$scope.data = []
$scope.treeEvents = {
itemClick: function(e){
return $scope.onItemClick(e);
}
}
});
<!DOCTYPE html>
<html>
<head>
<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.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<integralui-treeview items="data" events="treeEvents"></integralui-treeview>
</div>
</body>
</html>
Whenever item is clicked it will automatically become selected. There may be cases when we don't want some specific item to be selected, for example we may have a parent item act like header and only its child items can become selected. In order to create this scenario, in our code we need to handle the beforeSelect event and if our condition is fulfilled, will prevent selection of specified item:
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
$scope.data = []
$scope.onBeforeSelect = function(e){
if (!e.item.pid)
return false;
}
});
<!DOCTYPE html>
<html>
<head>
<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.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<integralui-treeview items="data" before-select="onBeforeSelect "></integralui-treeview>
</div>
</body>
</html>
In our code all root items cannot become selected. We are using the pid property value to determine whether an item is a root item or not. If item is a root item, this property value will be either undefined or null.
By default all items are expanded, because their expanded property value is undefined. But items can become expanded/collapsed if their text is double-clicked or its expand box is clicked.
If we want a specific item to remain expanded always or depending on some condition, we can add a handler to the beforeCollapse event and prevent the item from collapsing.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
$scope.data = []
$scope.onBeforeCollapse = function(e){
if (e.item.items.length > 3)
return false;
}
$scope.treeEvents = {
beforeCollapse: function(e){
return $scope.onBeforeCollapse(e);
}
}
});
<!DOCTYPE html>
<html>
<head>
<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.treeview.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<integralui-treeview items="data" events="treeEvents"></integralui-treeview>
</div>
</body>
</html>
In our example, whenever an item has more than 3 child items, it will remain expanded.