Angularjs UI-Grid Right click is no longer working?

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

Alireza Ahmadi · Accepted Answer · 2021-07-29 19:53:39Z

1

+200

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>

edited Jul 29, 2021 at 19:53

answered Jul 29, 2021 at 19:22

Alireza Ahmadi

10.2k8 gold badges28 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

w2olves Over a year ago

this is definitely the right way to do this, however, how can I get the ID on right click ? I have added the code of how I am adding the ID to the grid.

Alireza Ahmadi Over a year ago

@w2olves I also show the id in console and also rowindex

w2olves Over a year ago

I see the rowindex but I do not see ID in console ?

Alireza Ahmadi Over a year ago

1627587677860-1 this is id of second row for example

w2olves Over a year ago

It says I have to wait 22 hours to give the bounty. I will award this tomorrow to you.

|

Collectives™ on Stack Overflow

Angularjs UI-Grid Right click is no longer working?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related