Widgets inside dojo dgrid

Question

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?

Answer 1

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");

}