LIDOR SYSTEMS

Advanced User Interface Controls and Components

How to Handle Events in TreeView for AngularJS

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:

  • {{ev.name}}{{ev.info}}
TreeView directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

There are two ways to handle events in TreeView directive for AngularJS:

  • By using a specific event attribute
  • By using the events attribute

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>

How to Prevent Item Selection

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.

How an Item Can Remain Always Expanded

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.

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.