Is there a dojo enhanced grid example with context menu

Question

I am looking for an example of a dojo enhanced grid that contains a context menu on either a cell or row menu where the cell or row data is accessed. I have managed to create an enhanced grid with a row context menu. I can create a function that captures the event of clicking on the row menu item. However, I am not sure how to access the row data in the context of the menu item handler. I have not seen any example in the tests of the nightly build. Is there an example of this available online?

Answer 1

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.

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>

Of course, if you were programatically creating your DataGrid, you would just add onRowContextMenu: onRowContextMenuFunc to your declaration.

Answer 2

Here's how to access the selected row from the context menu:

// First create a menu object to hold the various menus
var menusObject = {
    //  headerMenu: new dijit.Menu(),
rowMenu: new dijit.Menu()//,
//  cellMenu: new dijit.Menu(),
//   selectedRegionMenu: new dijit.Menu()
};

Add a menu item

menusObject.rowMenu.addChild(new dijit.MenuItem({
    label: "Show me data",
    onClick: function(e){
        console.log(this.selectedRow)
    }
}));

menusObject.rowMenu.startup();

Create the grid

var grid = new dojox.grid.EnhancedGrid({
    store : store,
structure : layout,
rowsPerPage: 10,
escapeHTMLInData: false,
plugins: {
    menus: menusObject
}
}, 'some are to place');

// Activate message sending from data grid row to menu items

dojo.connect(grid, 'onRowContextMenu', function(e)
{
    // Set the "selectedItem" property of all of the menu items of a menu.  This lets you reference the row data!!

    var menuChildren = menusObject.rowMenu.getChildren();
    for(var i = 0; i<menuChildren.length; i++){
        menuChildren[i].selectedRow = this.getItem(e.rowIndex);
    }
});

Answer 3

I figured it out. On the row context menu even, capture the row number into a global. On a click even on the menu item, retrieve the row from the global and then use it to lookup the contents of the row in the grid. I have been using this method and it has worked perfect.