Dojo DataGrid Context Menu onRowContextMenu displays even when right-clicking in BLANK area of DataGrid

Question

I have a DataGrid that has items in it. When you right-click on one of the rows, a Dojo Context Menu is displayed with the option to delete that row. If you try to right-click on a blank area of the DataGrid, the context menu is NOT displayed.... BUT, if you first right click on a row, and then click the Cancel menu option (which does nothing) or if you left-click somewhere else on the page (which hides the Context Menu) and the go to right click on a blank area of the DataGrid, the Context Menu IS displayed and if you click the Delete Item option in the Context Menu, it removes the last item you right clicked on.

Why is it allowing the context menu to show when you right click in a blank area of the DataGrid but only AFTER you've already right clicked on a item in the DataGrid?

Any tips would be appreciated. Here is my code so far:

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);
}

.

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

.

<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenuFunc"></div>

Answer 1

Well, I'm not exactly sure why it's allowing the context menu to show when right clicking in a blank area only after first right clicking on an item, but I did come up with a work around to fix my root problem: Right clicking on a row item in a data grid, then clicking off to hide the context menu, then right clicking in a blank area of the data grid and selecting a menu item causes the rowIndex of the first right click to be passed

Here is my code; I hope this helps anyone in the future which has the same problem:

 var selectedItem;

 function onRowContextMenu(e) {
      grid5_rowMenu.bindDomNode(e.grid.domNode);
      selectedItem = e.grid.getItem(e.rowIndex);
 }

 function gridRowContextMenuExecute(task) {
      if((task == "remove") && (selectedItem != null)) {
           store3.deleteItem(selectedItem);
      }
      else {
           selectedItem = null;
      }
 }

.

 <div dojoType="dijit.Menu" id="grid5_rowMenu" jsId="grid5_rowMenu" style="display: none;" onBlur="gridRowContextMenuExecute('cancel')">
      <div dojoType="dijit.MenuItem" onMouseDown="gridRowContextMenuExecute('remove')">Remove from Transaction</div>
      <div dojoType="dijit.MenuItem">Cancel</div>
 </div>

.

 <div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutStructure" rowsPerPage="40" onRowContextMenu="onRowContextMenu"></div>

Answer 2

grid5_rowMenu is a menu.

e.grid.domNode is the DOM node of the datagrid.

*grid5_rowMenu.bindDomNode(e.grid.domNode);*

It is : give the context menu to the grid(anywhere inside the DOM node).

Because the content in datagrid changes allways, so it is not easy to assign the menu to the element inside the grid.

If your grid does not change its contents, you can do like this: *grid5_rowMenu.bindDomNode(e.target.parentElement);*