The solution is simple, you want to have a button on a cell.
Just think about editor !
By extending the class dojox.grid.editors.AlwaysOn, the button will allways appear during the viewing of the grid.
Source code
dojo.provide("foo.Button");
dojo.require("dojox.grid._data.dijitEditors");
dojo.require("dijit.form.Button");
dojo.declare("foo.Button", dojox.grid.editors.AlwaysOn, {
_valueProp: 'cellValue',
constructor: function(inCell) {
this.text = this.text || this.cell.text;
this.deleteAfter = this.deleteAfter || this.cell.deleteAfter;
},
format: function(inDatum, rowIndex){
return '<input class="dojoxGrid-input" type="button" cellValue="' +
inDatum + '" value="' + (this.text ? this.text : inDatum) + '" ></input>';
},
doclick: function(e){
if(e.target.tagName == 'INPUT'){
this.doClickImpl(e);
if(this.deleteAfter = true) {
e.cell.editor.cancel(e.rowIndex);
e.grid.model.remove([e.rowIndex]);
}
}
},
doClickImpl: function(e) {
}
});
dojo.require("dojox.grid._data.dijitEditors");
dojo.require("dijit.form.Button");
dojo.declare("foo.Button", dojox.grid.editors.AlwaysOn, {
_valueProp: 'cellValue',
constructor: function(inCell) {
this.text = this.text || this.cell.text;
this.deleteAfter = this.deleteAfter || this.cell.deleteAfter;
},
format: function(inDatum, rowIndex){
return '<input class="dojoxGrid-input" type="button" cellValue="' +
inDatum + '" value="' + (this.text ? this.text : inDatum) + '" ></input>';
},
doclick: function(e){
if(e.target.tagName == 'INPUT'){
this.doClickImpl(e);
if(this.deleteAfter = true) {
e.cell.editor.cancel(e.rowIndex);
e.grid.model.remove([e.rowIndex]);
}
}
},
doClickImpl: function(e) {
}
});
Usage
Grid configuration
For use it you can define your column like that do like that:
{
editor: foo.Button,
text: "Text to display onto the button",
deleteAfter: true
}
editor: foo.Button,
text: "Text to display onto the button",
deleteAfter: true
}
- editor :
- Say to the grid to use this editor for the column
- text :
- Text to display onto the button. If this proterty not exists, the button will display the data of the cell (from the grid model)
- deleteAfter:
- Set to true for delete the current line after done the click operation. If not set, no lines are deleted
Specify an action
Specification of action can be done by the doClickImpl function.
Just create a new class which extend this one and fill this function.
Data consideration
The data of the cell (from the datastore) can still be fetched by the editor.getValue(rowIndex) function.
Because we still save the value into the node of editor.
But this function is now bugged. It's don't work correctly even if _valueProp is set to 'cellvalue'