LIDOR SYSTEMS

Advanced User Interface Controls and Components

Handling Right Click Event in TreeView for AngularJS

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.

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

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:

  • Using the item-rightclick attribute
  • Using the events attribute

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.

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.