Search code examples
javascriptdojodojo.gridxgridx

use of onCellWidgetCreated in Dojo Gridx (to add button to cell)


I try to add a button to the last column of my Gridx, however, the button is not shown and above the other table data the grid just says "loading...".

enter image description here

Cell Widget is required and declared, widgetInCell is set and onCellWidgetCreated function added. When replacing the onCellWidgetCreated function with alert, an alert message for each row is shown and the "loading..." disappears. My feeling is that the onCellWidgetCreated function is wrong?

My code looks like the following and when comparing it against some examples on the Gridx website I cannot find the problem.

require([
    "gridx/Grid",
    "gridx/core/model/cache/Sync",
    "dojo/store/Memory",
    "dojo/domReady!",
    "gridx/modules/CellWidget",
    "dijit/form/Button"
], function(Grid, Cache, Memory,Button,CellWidget,domConstruct){
        var store = new Memory({
            idProperty:"CategoryID",
            data: jsondata
        });

        var grid = new Grid({
            id:"gridId",
            store: store,
            cacheClass: Cache,
            structure: [
                { 
                    id: "0", 
                    field: "CategoryID", 
                    name: "Kategorie (ID)", 
                    width: "100px" 
                },
                { 
                    id: "1", 
                    field: "CategoryName", 
                    name: "Kategoriename" 
                },
                { 
                    id: "2", 
                    field: "Attributes", 
                    name: "Attribute" 
                },
                { 
                    id: "3", 
                    field: "Actions", 
                    name: "Aktion", 
                    widgetsInCell: true,
                    onCellWidgetCreated: function(cellWidget, column){
                        var btn = new Button({
                            label: "Click me!"
                        });
                        btn.placeAt(cellWidget.domNode);
                    }
                }
            ],
            modules: [
                CellWidget
            ]
        });
        grid.placeAt("aGrid");
        grid.startup();


    }
);

Solution

  • I came across anotheer problem with VirtualVScrolling and found out that this was due to a defective gridx css file which contained a custom layout. When using the standard css file, "onCellWidgetCreated" worked for me as well.