I've been working on using the Dojo grid for display and editing of values from a database. Thanks to these forums, I've gotten things working fairly well over the past several months.
Today, though, I attempted to use dojox.grid.editors.Bool as the editor for one of my columns. This works great when the grid is originally loaded unsorted. I can check and uncheck boxes on various rows just like I want to.
After the user sorts the grid, however, by clicking on one of the column headings, a very strange behavior develops: clicking checkboxes often causes TWO checkboxes to change state, the clicked checkbox and another one.
You can experience this bizarre behavior for yourself at: http://www.mousetropolis.com/mouseTable.htm
I tried to debug this problem by writing my own editor and found that my editor developed the same behavior as dojox.grid.editors.Bool: it worked perfectly when the grid was unsorted and caused random changes in the wrong rows after the grid was sorted. By implenting doClickImpl, I was able to find that e.rowIndex returns the correct rowIndex (i.e., the index of the sorted row as it appears on screen) and the model is able to return other correct pieces of data from the same row. However, trying to use e.cell.grid.edit.applyCellEdit(newData, e.cell, e.rowIndex) causes random changes in the correct column but the wrong row of the grid.
By applying cell edits to all rows of the grid as follows:
for (var i = 0; i <= 24; i++) {
e.cell.grid.edit.applyCellEdit(i, e.cell, i); }
I found that the row numbering as understood by the grid is really messed up--and, of course, the apparently "random" rows that are altered by applyCellEdit actually have a row index as understood by the grid that corresponds to the e.rowIndex value I'm trying to change.
My synthesis of all this is that the event contains the "correct" row index as it appears on screen (0 at the top, regardless of sorting); the model also seems to have the row indices correct; but the sorted grid has "incorrect" row indices.
Thanks for any thoughts.
problems using editors with a sorted grid: fixed
OK, I finally got this working by manhandling the data in the store and model myself, then updating the cell's innerHTML. I guess that changing the innerHTML allows proper display in the short term, while changing data in the store and model allows that change to persist through scrolling, re-sorting, etc.
But there is definitely a problem in editing sorted grids. I'd appreciate any insight from others into what the problem might be, because I spent around 24 hours staring at the javascript source without figuring it out.
Here is the editor I wrote, called "toggleOnClick", that properly changes only the correct values in sorted grids:
dojo.declare("toggleOnClick", dojox.grid.editors.AlwaysOn, {
_valueProp: 'cellValue',
constructor: function(inCell) {
this.text = this.text || this.cell.text;
this.deleteAfter = false;
},
format: function(inDatum, rowIndex) {
return inDatum;
},
doclick: function(e){
this.doClickImpl(e);
},
doClickImpl: function(e) {
var newVal = "yes";
if (e.cellNode.innerHTML == "yes") newVal = "no";
var id = stationsModel.getDatum(e.rowIndex, 0);
var theItem = stationsStore._getItemByIdentity(id);
stationsStore._setValueOrValues(theItem, e.cell.field, newVal, false);
stationsModel.data[e.rowIndex][e.cell.field] = newVal;
e.cellNode.innerHTML = newVal;
}
});