AnsweredAssumed Answered

Display EnhancedGrid inside Custom Widget

Question asked by koder303 on Aug 22, 2014
Latest reply on Aug 25, 2014 by koder303

Hi There,

 

I've racked my brains around this for hours and thought I'd ask those who maybe can help me out. I am trying to create a custom dojo widget that contains a dojox EnhancedGrid. My widget will contain other things but this is a big part.

 

My widget is being created and I am able to add dojo buttons and labels to it no problem and everything is rendered fine. I can see the buttons and click on the buttons and the appropriate events fire. When I add an EnhancedGrid however it is not rendered and I can't see the thing.

 

My current HTML is as follows:

 

   

 

JS file is as follows:

 

define(["dojo/_base/declare", "dojo/ready", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin", "dojo/text!./templates/TestResults.html", "dojox/grid/EnhancedGrid", "dojo/data/ItemFileWriteStore", "dijit/layout/ContentPane", "dojo/domReady!"],
    function (declare, ready, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, htmlOutput, EnhancedGrid, ItemFileWriteStore, ContentPane) {
        return declare("TestResults", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

            templateString: htmlOutput,

            /* constructor */
            constructor: function () {
            },

            postCreate: function () {
                debugger;

                var items = [];

                for (var i = 0; i < 3; i++)
                    items.push({ A: i, B: (i + 1), C: (i + 2) });

                // create a new store
                var store = new ItemFileWriteStore({
                    data: {
                        items: items
                    }
                });

                var grid1 = new EnhancedGrid({
                    noDataMessage: "this is empty!",
                    id: "minGrido",
                    structure: [
                        { name: "A", field: "A", width: "100px" },
                        { name: "B", field: "B", width: "100px" },
                        { name: "C", field: "C", width: "100px" }
                    ],
                    store: store
                });

                grid1.startup();

                this.xyz.addChild(grid1);
            }
        })
    }
);









 

To make sure I am able to add widgets in a custom widget I added a button that preceded the grid and a button that came after the grid and those guys worked, but again the grid was not rendered. The weird thing is that if I use Firebug to explore it, the datagrid is created and I can see the div that has the id minGrido. But again, I can't see any of the headers or data that I assigned to the grid. I've tried grid1.resize() but no luck.

 

Has anyone experienced this before?

 

Thanks,

 

Alex

Outcomes