CODEWITHSUNDEEP
javascriptangularangular-ui-grid
Adeel Asghar
Adeel Asghar

Reputation: 11

Angular ui-grid custom menu on cell right click

I am using Angular ui-grid and have the following requirement:

Sample Image

function SampleRightClickController($scope, $rootScope, $timeout){
  $scope.gridOptions = {data: myData};

   $scope.rightClick = function (event) {
     var scope = angular.element(event.toElement).scope()
     console.log('you clicked on row: ', scope.rowRenderIndex);
    };
}]);

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

HTML:
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection ui-grid-edit ui-grid-cellNav right-click="rightClick($event);"></div>

Tried the above code but it only right click on 'ROW' instead of 'Column'. Can someone help me how I can get the above 2 requirements using angular ui-grid?

Upvotes: 1

Views: 1535

Answers (1)

Sethupathy Mathirajan
Sethupathy Mathirajan

Reputation: 114

You can achieve this by using a contextmenu. Please take a look below.

https://github.com/Templarian/ui.bootstrap.contextMenu

Upvotes: 0

Related Questions