In this
post we will setup a hamburger grid menu on the ui-grid.
The hamburger grid menu enables you to show all the grid level actions at one place .This is a
very simple task . Just include all the required modules and dependencies for
angular ui-grid to work as shown in the example plunker below . Once this is
done let’s configure the gridoptions to enable grid menu and populate the menu
options .
…
$scope.gridOptions = {
…
enableGridMenu: true,
gridMenuCustomItems : [
{
title:
'Option1',
action:
function ($event ) {
alert('Option1
Clicked!')
},
order
: 50
},
{
title:
'Option2',
action:
function ($event ) {
alert('Option2
Clicked!')
},
order
: 100
}
..
]
}
Configure the options to populate the menu options and define the functions that are invoked
when a particular menu option is selected . Each option under this menu has a title , action, order , shown attributes as shown ablove. The order attribute is used to set
the position of the menu option . Use 'shown' to specify
conditions when the menu option should be visible .The action attribute is a function that defines the logic that will be invoked when a particular option is selected.
For more
details refer the documentation for Grid Menu .
Here is
the link to plunker showing the demo.
Thanks for sharing information..
ReplyDeleteangularjs online training in hyderabad