In this post we will see how to setup a
custom right click menu (context menu) on a ui-grid row .
1) Use the AngularJS UI Bootstrap module to add context menus to elements .
2) You will have to add
bootstrap to your application .
3) Once that is done , copy the contextMenu.js file provided in link or just copy the file from the plunker example shared below
in this post . Refer the documentation and examples provided in this link for more details on how to use the contextMenu.js .
4) Add ui.bootstrap.contextMenu as a dependency module .
angular.module('app',
['ngTouch', 'ui.grid', 'ui.grid.selection','ui.bootstrap'
,'ui.bootstrap.contextMenu'])
Add the row template in the gridoptions to
enable the context menu on the grid row.In the controller define the row
template as shown below:
$scope.gridOptions = {
...
rowTemplate :
'<div
ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex,
col) in colContainer.renderedColumns track by col.colDef.name"
class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\':
col.isRowHeader }" ui-grid-cell context-menu="grid.appScope.contextmenuOptions(row)" data-target="myMenu"
></div>'
}
Here we will pass the menu options to context-menu as an array containing objects to represent each item in the context menu . We can also pass a function that returns an array of objects or a Promise returning an array of objects or a function . For details please refer the documentation.
Define the contextmenuOptions(row) function used in the row template to return an array that populates the right click menu. Each object in this array defines the menu option title and the function that should be executed when the menu option is selected .
In the controller:
Define the contextmenuOptions(row) function used in the row template to return an array that populates the right click menu. Each object in this array defines the menu option title and the function that should be executed when the menu option is selected .
In the controller:
$scope.contextmenuOptions
= function(row)
{ ...
contextMenuData.push(['Menu
Option1', function() {
…
}]);
…
return
contextMenuData
}
In the view :
<div
id="grid1" ui-grid="gridOptions" ui-grid-selection
class="grid ui-grid-selectable"></div>
Implement the function logic that needs to be executed when a particular context menu option is selected . This has to be done when configuring the context menu options . The most common actions are showing alert messages or launching a modal popup. Please refer my blog posts to see examples on how to launch a modal popup .
Here is the link to plunker showing the demo .
No comments :
Post a Comment