Display EnhancedGrid inside Custom Widget

AlexeiB

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:

<div style="border: 1px solid black; height: 100%; width: 100%; overflow: hidden;">
 <div data-dojo-attach-point="xyz" data-dojo-type="dijit/layout/ContentPane" style="border: solid 1px red; height: 200px; width: 400px;">
    </div>
</div>

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

AlexeiB

Playing with it some more, I have found a workaround although I don't want to call it a solution.

I have moved all of the code from postCreate into a function called doStuff().

Since I am creating a widget, it is async. When I call doStuff it returns the information async and the grid is returned BEFORE any headers or data is loaded.

So what I did was as follows. I created 2 separate function _loadHeaders() and _loadData(). The function doStuff() calls those 2 functions which each one returning a promise. Once _loadHeaders() and _loadData() have been resolved, I set the data grid layout and store to the returned information and then resolve my widget. This seems mighty complicated for something that seems to simple but it works.

Does anyone know how to call a method SYNCHRONOUSLY in a dojo widget?

Thanks,

Alex