How to enable the browser context menu in dojox.grid.DataGrid?

Question

I'm trying to get the browser context menu to work inside a dojox.grid.DataGrid. When I right-click on the grid now, nothing happens. I tried overriding onCellContextMenu, onRowContextMenu, doContextMenu, and oncontextmenu with empty functions on the grid instance, but that didn't work. The method onCellContextMenu is called on a right-click, but it still doesn't show a context menu. I think the event is being stopped at another level, but I'm not sure where to look.

The grid has a list of links, and I want users to be able to right click on links so they can open them in a new tab. I know that I can make a custom context menu to provide that functionality, but I'd like to know how to disable this behavior in the future.

Answer 1

I know that this may be a bit late, but I ran into the same exact problem and found a resolution by studying the source code and asking around the dojo community chat. The solution involves creating a custom Grid widget that has the following modifications:

1. Create a custom _FocusManager that your custom grid will use, where the only update is removing the functionality of the doContextMenu method which executes a dojo.stopEvent by default - //extension to remove contextmenu dojo.stopEvent dojo.declare('myGrid.dojox.grid._FocusManager', dojox.grid._FocusManager, { doContextMenu: function() {} });

2. Remove the original callbacks in the grid that execute dojo.stopEvent by default:

   //remove original callbacks that call stopEvent

   onRowContextMenu: function(e) {},
   onHeaderContextMenu: function(e) {}
   

Here is a working example that I was given at the community chat: http://jsfiddle.net/kfranqueiro/SqYXd/

Answer 2

I know it's not exactly the solution you want for displaying the context menu, but have you tried telling your users to Ctrl-leftClick on those links rather right-click to display the context menu ?

Answer 3

You need to create a dijit.menu in a div and set its display to none. Here's an example where the context menu and grid are contained in a dijit ContentPane:

<div dojoType="dijit.layout.ContentPane" title="MyGrid">
    <div id="myGridContainer" style="width:100%;height:100%"></div>
    <div id="myGridContextMenu" dojoType="dijit.Menu" style="display: none;">
        <div dojoType="dijit.MenuItem" id="myGridContextMenu.delete" onClick="deleteItem">Delete</div>
    </div>
</div>

You will also need to connect the menu to your grid when you create it:

var myGrid = new dojox.grid.DataGrid({ ..., onRowContextMenu: myGridcontextMenu },...);