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: 27 June 2014
Whenever an item in TreeView is clicked using the right mouse button, the itemRightClick event is fired. This event can be handled in your code to create custom action like showing a context menu. In following sections we will explain how to handle right-clicks in TreeView directive for AngularJS.
Similar: TreeView Component for Angular 2
At first we need some sample data to pupulate the TreeView.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
$scope.data = [
{
id: "1",
text: "Dairy",
items: [
{ id: "11", pid: "1", text: "Milk" },
{ id: "12", pid: "1", text: "Butter" },
{ id: "13", pid: "1", text: "Cheese" }
]
},
{
id: "2",
text: "Fruits",
items: [
{ id: "21", pid: "2", text: "Berries" },
{ id: "22", pid: "2", text: "Pits" },
{ id: "23", pid: "2", text: "Citrus Fruits" }
]
},
{
id: "3",
text: "Meat",
expanded: false,
items: [
{ id: "31", pid: "3", text: "Beef" },
{ id: "32", pid: "3", text: "Lamb" },
{ id: "32", pid: "3", text: "Pork" }
]
},
{ id: "4", text: "Vegetables" }
];
});
<!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>
There are two ways to handle the itemRightClick event:
In our example we will use the events attribute. The code looks like this:
$scope.onItemRightClick = function(e){
if (e.item)
alert("Item: " + e.item.text + " is right-clicked at position: { x: " + e.mousePos.x + ", y: " + e.mousePos.y + " }");
}
$scope.treeEvents = {
itemRightClick: function(e){
return $scope.onItemRightClick(e);
}
}
<integralui-treeview items="data" events="treeEvents"></integralui-treeview>
In above code we are setting the events attribute to point to the treeEvents variable in our scope. This will link the itemRightClick event within the directive to our function in our application scope. In this way whenever item is right clicked a message box will pop-up stating the item which is clicked and the position of mouse cursor in page coordinates. You can replace the content of onItemRightClick function with your own custom code and process this event in conditions dependent on your application requirements: either showing item related context menu or some other custom action.
Related: How to Display Context Menu in TreeView AngularJS
The events attribute allows you to handle also other events available in TreeView directive. For more information on which events are supported, check out the online help for events in TreeView.