angularjsangular-ui-gridui-grid

Angularjs UI-Grid Right click is no longer working?


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;
                    }
                });
        }

Solution

  • 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>