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

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?

score 3 · Answer 1 · edited Jan 30 '17 at 11:44

3

You can use the event grid object:

 var item = e.grid.getItem(e.rowIndex);

edited Jan 30 '17 at 11:44

cнŝdk

31,391
7
56
78

answered Sep 09 '10 at 04:29

rika-t

91
4

score 1 · Answer 2 · edited Feb 15 '14 at 15:06

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 //

EDIT: Had some problems with the above code in that it allowed a user to right click on a row, then click cancel or otherwise hide the context menu and then right click in a BLANK area of the data grid and click the Delete menu option and it would remove the item that was right clicked on previously. If you're having the same problem, check out my modified code [HERE](http://stackoverflow.com/questions/8187693/dojo-datagrid-context-menu-onrowcontextmenu-displays-even-when-right-clicking-in/8216093#8216093) — Andrew Bucklin, Nov 21 '11 at 19:00

score 0 · Answer 3 · answered Sep 03 '10 at 09:24

0

Did you try e.rowIndex?

answered Sep 03 '10 at 09:24

StanislavL

56,971
9
68
98

e.rowIndex is not available from the gridRowContextMenu_onClick function, only from onRowContextMenu. – Reuben Jan 31 '12 at 06:00

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

3 Answers3