Does ng-grid have a right click context menu?

Question

Does ng-grid provide a right click context menu?

I couldn't find it on http://angular-ui.github.io/ng-grid/

However I do remember there was a comprehensive demo page available few weeks back (July 2014) where row level and even cell level right click context menu was shown.

Unfortunately I don't have that URL now and strangely not able to find this on Google anymore.

Thanks in advance.

[Directive for right click](http://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js) — Malkus, Aug 12 '14 at 12:00
Thank you @HarishR One more question: is NG-GRID will be named as UI-GRID in v3.0? — Parimal, Aug 13 '14 at 15:43
Thank you @Malkus The "right click" demo is helpful. However I am looking for a Context "Menu" to be shown when user will right click on "NG-GRID" — Parimal, Aug 13 '14 at 15:46

score 4 · Answer 1 · answered Dec 01 '15 at 11:34

Yes, ng-context-menu is the way to go. Just don't put the dropdown code withing rowTemplate as the position would be incorrect. Place it outside of ui-grid. The only issue with this approach is to get the current ui-grid row. I decided to save it to controller scope on context menu opening. My rowTemplate:

<script type="text/ng-template" id="member-list.row.html">
        <div ng-click="col.isRowHeader || grid.appScope.selectNode(row.entity)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'" class="ui-grid-cell" ng-class="{'ui-grid-row-header-cell': col.isRowHeader, '__selected': row.entity.id===grid.appScope.selectedNodeId }" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell style='cursor:pointer' context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="cml_menu"></div>
    </script>

Note the context-menu="grid.appScope.contextMenuEntity = row.entity" data-target="cml_menu" part in it. That way I can use contextMenuEntity later wherever needed. Using it in context menu dropdown:

<ul class="menu __context" role="menu" id="cml_menu">
  <li class="menu-item" ng-click='blade.showDetailBlade(contextMenuEntity, contextMenuEntity.displayName)'>
    <i class="menu-ico fa fa-edit"></i> Manage
  </li>
  <li class="menu-item" ng-click='delete(contextMenuEntity)'>
    <i class="menu-ico fa fa-trash-o"></i> Delete
  </li>
</ul>

score 1 · Answer 2 · answered Jun 03 '16 at 06:30

to get the row

html:

<div id="grid1" ui-grid="vm.gridOptions1" ng-right-button="vm.rightClick($event)" ui-grid-pagination  ui-grid-move-columns  ui-grid-selection class="grid"></div>

js:

    angular.module('Context')
           .controller('ContextM', ContextM)
           .directive('ngRightButton', ngRightButton );

 ContextM.$inject = ['$scope', '$rootScope', '$state', '$timeout'];
 ngRightButton.$inject = ['$parse'];

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

Works but there is "event.stopPropagation();" inside "render" function of "ng-contextmenu.js" which should be removed for that to work. You may add that statement to "rightClick" directive if needed though. — Vladyslav, Aug 08 '16 at 09:51

Does ng-grid have a right click context menu?

2 Answers2