Dojo: how to get row data in grid's context menu item handler? - dojo

Question

I'm using Dojo 1.4.
Given a dojox.grid.DataGrid in markup:
<table jsId="grid1" dojoType="dojox.grid.DataGrid"
structure="layout"
delayScroll="true"
columnReordering="true"
selectable="true"
onRowDblClick="onRowDblClick"
onRowContextMenu="onRowContextMenu"
headerMenu="grid1_headerMenu"
>
<div dojoType="dijit.Menu" id="grid1_rowMenu" jsId="grid1_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Edit</div>
</div>
</table>
I haven't found a better way to show grid's contex menu that this one:
function onRowContextMenu(e) {
grid1_rowMenu.bindDomNode(e.grid.domNode);
}
It works, menu pops up and function 'gridRowContextMenu_onClick' has being called.
function gridRowContextMenu_onClick(e) {
// how to get a row data???
}
My question is how inside menuitem's onClick handler (gridRowContextMenu_onClick) can I get original row for which menu was poped up?

Answer 1

You can use the event grid object:
var item = e.grid.getItem(e.rowIndex);

Answer 2

I had a similar question. I wanted to create a context menu which allowed the user to remove the item that they right clicked on from the datagrid and delete the item from the datastore. Thought it should be pretty simple and with your help and some other sites, I came up with the following code. I hope this helps someone in the future.
Javascript
var selectedItem; // This has to be declared "globally" outside of any functions
function onRowContextMenuFunc(e) {
grid5_rowMenu.bindDomNode(e.grid.domNode);
selectedItem = e.grid.getItem(e.rowIndex);
}
function gridRowContextMenu_onClick(e) {
store3.deleteItem(selectedItem);
}
HTML
<div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onClick="gridRowContextMenu_onClick">Delete</div>
<div dojoType="dijit.MenuItem">Cancel</div>
</div>
and
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>
Of course, if you were programatically creating your DataGrid, you would just add onRowContextMenu: onRowContextMenuFunc to your declaration, as you did in your question above.
Finally, to actually get information about the item:
console.log(e.grid.store.getValue(selectedItem, 'type'));
console.log(e.grid.store.getValue(selectedItem, 'color'));
// Where type and color are fields specified in the DataGrid Layout Structure //

Answer 3

Did you try e.rowIndex?