Angularjs UI-Grid Right click is no longer working? - angularjs

Question

I have a simple UI-Grid application that defines a grid like this
<div ui-grid="gridOptions" ui-grid-pagination class="grid clsVendorsGrid" ui-grid-selection ui-grid-exporter right-click="rightClick($event)" context-menu="menuOptions" context-menu-class="custom_class"></div>
And then the right click event is like this
$scope.rightClick = function (event) {
$scope.gridApi.selection.clearSelectedRows();
var element = angular.element(event.toElement);
var id = element[0].parentElement.id;
This was working fine for the past few years. But since last week the event is now always null. What gives ?
I am using angular-ui-grid version 3.2.9
The error I get on right click is
TypeError: Cannot read property 'parentElement' of undefined
at m.$scope.rightClick (administrativeController.js:281)
Appreciate any inputs on this
EDIT:
I am trying to get the ID on right click, I am binding the ID like this
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
//Register this to Capture Selected Item on right click
gridApi.selection.on.rowSelectionChanged($scope,
function (row) {
if (row.isSelected) {
$scope.selectedId = row.entity.iTempId;
$scope.selectedVendor = row.entity.sBusinessnameLegal;
}
});
}

Answer 1

You just need to change event.toElement to event.target:
$scope.rightClick = function (event) {
var element = angular.element(event.target);
var id = element[0].parentElement.id;
...
}
Here is working snippet:
angular.module("ng-context-menu",[]).factory("ContextMenuService",function(){return{element:null,menuElement:null}}).directive("contextMenu",["$document","ContextMenuService",function(e,n){return{restrict:"A",scope:{callback:"&contextMenu",disabled:"&contextMenuDisabled",closeCallback:"&contextMenuClose"},link:function(t,l,c){function o(n,t){t.addClass("open");var l=e[0].documentElement,c=(window.pageXOffset||l.scrollLeft)-(l.clientLeft||0),o=(window.pageYOffset||l.scrollTop)-(l.clientTop||0),u=t[0].scrollWidth,i=t[0].scrollHeight,a=l.clientWidth+c,d=l.clientHeight+o,p=u+n.pageX,s=i+n.pageY,r=Math.max(n.pageX-c,0),f=Math.max(n.pageY-o,0);p>a&&(r-=p-a),s>d&&(f-=s-d),t.css("top",f+"px"),t.css("left",r+"px"),m=!0}function u(e){e.removeClass("open"),m&&t.closeCallback(),m=!1}function i(e){!t.disabled()&&m&&27===e.keyCode&&t.$apply(function(){u(n.menuElement)})}function a(e){t.disabled()||!m||2===e.button&&e.target===n.element||t.$apply(function(){u(n.menuElement)})}var m=!1;l.bind("contextmenu",function(e){t.disabled()||(null!==n.menuElement&&u(n.menuElement),n.menuElement=angular.element(document.getElementById(c.target)),n.element=e.target,e.preventDefault(),e.stopPropagation(),t.$apply(function(){t.callback({$event:e})}),t.$apply(function(){o(e,n.menuElement)}))}),e.bind("keyup",i),e.bind("click",a),e.bind("contextmenu",a),t.$on("$destroy",function(){e.unbind("keyup",i),e.unbind("click",a),e.unbind("contextmenu",a)})}}}]);
var app = angular.module('app', ['ui.grid','ui.grid.selection']);
app.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);
app.controller('MainCtrl', ['$scope', '$interval', function ($scope, $interval) {
var myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true,
iTempId: 1,
sBusinessnameLegal:"sBusinessnameLegal1"
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false,
iTempId: 2,
sBusinessnameLegal: "sBusinessnameLegal2"
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false,
iTempId: 3,
sBusinessnameLegal: "sBusinessnameLegal3"
}];
$scope.gridOptions = {
data: myData,
enableRowSelection: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope,
function (row) {
if (row.isSelected) {
debugger
$scope.selectedId = row.entity.iTempId;
$scope.selectedVendor = row.entity.sBusinessnameLegal;
}
});
}
};
$scope.rightClick = function (event) {
var element = angular.element(event.target);
//get cellId which should look like
//1464688691229-2-uiGrid-0006-cell
var id = element[0].parentElement.id;
var regex = /(\d+)/g
var result = id.match(regex);
var rowIndex = parseInt(result[1]); //extract second numic match
// console.log(id);
//console.log("rowIndex=%d", rowIndex);
$scope.gridApi.selection.selectRowByVisibleIndex(rowIndex);
};
}]);
app.directive('rightClick', function ($parse) {
return function (scope, element, attrs) {
var fn = $parse(attrs.rightClick);
element.bind('contextmenu', function (event) {
scope.$apply(function () {
event.preventDefault();
fn(scope, { $event: event });
});
});
};
});
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.js"></script>
<script src="ng-context-menu.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.1/ui-grid.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<p>selectedId: {{selectedId}}</p>
<p>selectedVendor: {{selectedVendor}}</p>
<div id="grid1" ui-grid="gridOptions" ui-grid-selection right-click="rightClick($event)" class="grid"></div>
</div>
</body>
</html>