When to call DGrid.startup() - Calling it too early results in bad rendering

Question

I am having some difficulty with the dgrid component in Dojo. I am trying to build a widget containing a dgrid.

The dgrid renders like this:

After resizing the browser window, everything is fine and it displays like this:

I think the issue I am running into is related to calling the grid.startup() function too early. When I delay the call to grid.startup() by 10 seconds (see commented part of the code) everything works as expected.

This is my code:

define([
        // ...
    ],
    function(
        // ...
    ) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin] ,{
            templateString: template,

            startup: function(){

                this.inherited(arguments);
                var store = new Memory({data: this.someArray});
                var grid = new (declare([OnDemandGrid, DijitRegistry]))({
                    store: store,
                    columns: {
                        name: "Name column" 
                    }
                }, this.gridDiv);

                // If I wrap startup in this - everything is fine.  
                // window.setInterval(function(){
                grid.startup();
                // }, 1000*10);
            }
        });
    }
);

This is the template I am using:

<div style="height:100%">
    <table border="1">
        <tr>
            <td>
                <button data-dojo-attach-point="addBtn" data-dojo-type="dijit/form/Button">Add item</button>
                <div data-dojo-attach-point="gridDiv"></div>

            </td>
            <td>
                Insert Summary here.
            </td>
        </tr>
    </table>
</div>

Question: What is going on here? Where should I call startup on the dgrid?

Answer 1

As expected the issue was with calling the startup method too early - however the widget itself did not have an issue.

The problem encountered was with the parent widget. The parent widget (a TabContainer) was not being started properly. This is how the parent widget was working:

1. Create new TabContainer: var tc = new TabContainer({...});
2. Create new ContentPane: var cp1 = new ContentPane({content: <the above widget>, ...});
3. Add ContentPane to TabContainer: tc.addChild(cp1);
4. Call startup on TabContainer: tc.startup();

Changing the order to this, resolved the issue:

1. Create new TabContainer: var tc = new TabContainer({...});
2. Call startup on TabContainer: tc.startup();
3. Create new ContentPane: var cp1 = new ContentPane({content: <the above widget>, ...});
4. Add ContentPane to TabContainer: tc.addChild(cp1);