Does ng-grid have a right button context menu?
Does ng-grid provide a right click context menu?
I couldn't find it at http://angular-ui.github.io/ng-grid/
However, I remember that within a few weeks ago (July 2014) there was a comprehensive demo page showing the context menu context menu at the row level and even at the cell level.
Unfortunately I don't have this URL right now and weirdly can't find it on Google anymore.
Thanks in advance.
source to share
Yes, ng-context menu is the way to go. Just don't put the dropdown code on the rowTemplate as the position will be wrong. Place it outside the ui-grid. The only problem with this approach is to get the current row of the ui-grid. I decided to keep it in the controller scope when opening the context menu. 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>
Pay attention to the context menu = "grid.appScope.contextMenuEntity = row.entity" data-target = "cml_menu" . This way I can use contextMenuEntity later where needed. Using it in the dropdown menu of the context menu:
<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>
source to share
to get the string
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});
});
});
};
});
}
})();
source to share