Our company moved from dojox/DataGrid
to dgrid
some time back. Now we are finding out, dgrid doesn't seem to support dijit/dojox widgets out of the box.
dojox/DataGrid
has a formatter()
that can return a widget. So easy to doo it there! The API comparison on GitHub says
"dgrid supports formatter functions, but doesn't support returning a widget from them .dgrid also has renderCell, which is expected to return a DOM node. This could ostensibly be used for displaying widgets (and the editor column plugin does exactly this). Note that for cell editing purposes, use of the editor column plugin is highly encouraged."
How exactly?
I have tried using the editor plugin with {editor: ' ', editorArgs:' '}
. This does render a widget but is too restrictive. Eg How do I render a dijit/Button
with its label being the value of the cell? Or something more complex, how do I use a (lesser known) dojox/image/MagnifierLite
with an <img>
generated from a formatter function with the src
being the value of the store?
you can use this sample code
require(
[
"dgrid/List",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dgrid/editor",
"dgrid/Keyboard",
"dgrid/tree",
"dojo/_base/declare",
"dojo/store/JsonRest",
"dojo/store/Observable",
"dojo/store/Cache",
"dojo/store/Memory",
"dijit/form/Button",
"dojo/domReady!"
],
function(
List,
Grid,
Selection,
editor,
Keyboard,
tree,
declare,
JsonRest,
Observable,
Cache,
Memory,
Button
) {
var columns = [
{
label:"Actions",
field:"id",
width: "200px",
renderCell: actionRenderCell
}
];
var actionRenderCell = function (object, data, cell) {
var btnDelete = new Button({
rowId : object.id,
label: "Delete",
onClick: function () {
myStore.remove(this.rowId);
}
}, cell.appendChild(document.createElement("div")));
btnDelete._destroyOnRemove = true;
return btnDelete;
}
grid = new (declare([Grid, Selection, Keyboard]))({
store: myStore,
getBeforePut: false,
columns: columns
}, "grid");
}