How to access (enhanced-) grid cell data from a cell context menu?

Question

my web application is based on dojo 1.6.0. The problem that I have is based on event handlers basically and/or their utilization in dojos "dojox.grid.EnhancedGrid" library.

My application contains a dojox Enhanced Grid with a great number of rows. (100+)

This Enhanced Grid makes use of the "cellMenu"-Plugin to show a context menu for each Grid Cell on right click.

My goal is to use the context menu for "smart" selection of rows.

For example:

The user right clicks on a cell wich is positioned in the column "lastname" and has the value "miller". He then clicks "smart select" in the context menu. The application will then loop over the row data and select all rows wich have "miller" as "lastname". In the aftermath the user will innitiate actions with the selected rows through press of a button.

Here is a small sourcecode example illustrating the declarative approach for visualization of the Enhanced Grid with Context Menu:

<table dojoType="dojox.grid.EnhancedGrid" plugins="{cellMenu:'myMenu'}">
<div id="myMenu" dojoType="dijit.Menu">
  <div id="mi1" dojoType="dijit.MenuItem">Do something with this cell</div>
  <div id="mi2" dojoType="dijit.MenuItem">Do something else with this cell</div>
</div>
<thead>
  definition of columns
</thead>
</table>

Action code is handled separate from the visualization in js-Files:

<script type="text/javascript">
dojo.addOnLoad(function(){
  dojo.connect(dijit.byId('mi1'),'onClick',function(event){ 
    //Use Data from the cell clicked to do something
  });
  dojo.connect(dijit.byId('mi2'),'onClick',function(event){
    //Use Data from the cell clicked to do something else
  });
});
</script>

I am relatively new to dojo and do not have experience with the handling of the EnhancedGrid.

So my problem is the following:

When I click inside the context-menu which is a "dijit.Menu" the "onClick" event of the "dijit.MenuItem" contained therein is triggered.

Inside this event handler I need to read the contents of the "Grid Cell" the context menu was opened on, but I do not have (or do not currently know) a way to get a reference to the "Grid Cell".

With default tactics I might be able to get a reference to the MenuItem and from there maybe to the Menu, but I was unable to find an attribute containing the reference to the "Grid Cell" or a row/column ID that would enable me to access the Cell clicked.

Since context menus are there to do something with the "item" they were opened with by right clicking I think that there has to be a way (as meant by the designer) to access this "item".

I have not yet found a documentation or example illustrating this and would appreciate all your help.

Answer 1

Here is a possible sollution (maybe not the best there is) for using a context menu on a dojo grid for selection purposes:

Visual Part (Declarative)

<table id="grid" dojoType="dojox.grid.EnhancedGrid"
  plugins="{indirectSelection:true,menus:{cellMenu:'GridCellMenu'}}">
  <div dojoType="dijit.Menu" id="GridCellMenu" style="display:none;">
    <div dojoType="dijit.MenuItem" id="mi_selectSimilar">select similar items</div>
    <div dojoType="dijit.MenuItem" id="mi_deSelectSimilar">DEselect similar items</div>
  </div>
  <thead>
    <tr>
      <th field="id">ID</th>
      <th field="lastname">Lastname</th>
      <th field="firstname>firstname</th>
    </tr>
  </thead>
</table>

JavaScript Background

// Stylesheets and Dojo Groundwork are neglected in this example

<script type="text/javascript">
  dojo.require('dijit.Menu');
  dojo.require('dijit.MenuItem');
  dojo.require('dojox.grid.EnhancedGrid');
  dojo.require('dojox.grid.enhanced.plugins.IndirectSelection');
  dojo.require('dojox.grid.enhanced.plugins.Menu');

  var currentEvent = null;

  var fn_selectSimilar = function(){
    var data = currentCell.grid.store.objectStore.data;
    dojo.forEach(data,function(row,idx){
      if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
        currentEvent.cell.grid.selection.addToSelection(idx);
      }
    }
  }
  var fn_deSelectSimilar = function(){
    var data = currentEvent.cell.grid.store.objectStore.data;
    dojo.forEach(data,function(row,idx){
      if(row[currentEvent.cell.field] == data[currentEvent.rowIndex][currentEvent.cell.field]){
        currentEvent.cell.grid.selection.deselect(idx);
      }
    }
  }

  dojo.addOnLoad(function(){
    dojo.connect(dijit.byId('grid'),"onCellContextMenu",function(e){
      currentEvent = e;
    });
    dojo.connect(dijit.byId('mi_selectSimilar'),"onClick",fn_selectSimilar);
    dojo.connect(dijit.byId('mi_deSelectSimilar'),"onClick",fn_deSelectSimilar);
  });

</script>

Answer 2

You can link an event handler into the mouse and keyboard events that will bring up the context menu. The event has a row index that you can store in a place where the menu item will find it.

Answer 3

This will go through all the selected items in the grid and get the value of the cell named "YourGridColumnName".

var items = YourDataGridId.selection.getSelected();
if (items.length) {
    dojo.forEach(items, function(selectedItem) {
        alert(YourDataGridId.store.getValues(selectedItem, "YourGridColumnName"));
    })
}

Hope it helps.