Dojo DataGrid not populating Data in Custom widget

I am trying to generate Data Grid from custom widget in Dojo 1.6, but only HTML corresponding to DataGrid is getting generated and no data is populated into Grid.

Here is custom widget code :-

 dojo.require("dojox.grid.DataGrid"); 
 dojo.require("dojo.parser");

 dojo.require("dijit._Widget"); 
 dojo.require("dijit._Templated");

 dojo.declare("FormGenerator", [dijit._Widget, dijit._Templated],   {

    widgetsInTemplate: true,

    templateString: dojo.cache("widget", "templates/dummyHTML.html"),

    postCreate : function(){
        this.inherited(arguments);

          layout =
                [
                    { name: 'Name', field: 'name', width: '100px' },
                    { name: 'Color', field: 'color', width: '100px' }
                ];
         dataStore = {
                    data :
                    {items :[
                    { name : 'John Doe', color: 'green' },
                    { name : 'Jane Doe', color: 'red' }
                    ],
                    label:'name',
                    identifier:'color'
                    }
                };
          var grid = new dojox.grid.DataGrid
            (
                {
                store: new dojo.data.ItemFileReadStore(window.dataStore),
                autoRender : true,
                structure: window.layout
                },
                "dummy" // this id should be there in HTML .
            );

          grid.startup();

    },

});

Here is the dummyHTML.html template :-

 <div>
 <div id="dummy"></div>
 </div>

This HTML is generated by above code :-

    <div id="formRequirement" widgetid="formRequirement">
    <div align="left" dojoattachevent="onmouseout:_mouseOut" role="grid" hidefocus="hidefocus" tabindex="0" aria-multiselectable="true" class="dojoxGrid" id="dummy" widgetid="dummy" aria-readonly="true" style="height: 0px; -moz-user-select: none;">
        <div role="presentation" dojoattachpoint="viewsHeaderNode" class="dojoxGridMasterHeader" style="display: none; height: 0px;"><div role="presentation" dojoattachpoint="headerNode" class="dojoxGridHeader" style="width: 1270px; left: 1px; top: 0pt;">
            <div role="presentation" style="width: 9000em;" dojoattachpoint="headerNodeContainer">
                <div role="row" dojoattachpoint="headerContentNode">
                              <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="dojoxGridRowTable">
                             <tbody><tr>
                                 <th dndtype="gridColumn_dummy" style="width: 100px;" idx="0" class="dojoxGridCell dojoDndItem " id="dummyHdr0" role="columnheader" aria-readonly="true" tabindex="-1">
                               <div class="dojoxGridSortNode">Name</div>
                                 </th>
                                 <th dndtype="gridColumn_dummy" style="width: 100px;" idx="1" class="dojoxGridCell dojoDndItem " id="dummyHdr1" role="columnheader" aria-readonly="true" tabindex="-1"><div class="dojoxGridSortNode">Color</div></th>
                            </tr>
                  </tbody>
               </table>
              </div>
        </div>
        </div></div>
        <div role="presentation" dojoattachpoint="viewsNode" class="dojoxGridMasterView"><div role="presentation" class="dojoxGridView" id="dojox_grid__View_1" widgetid="dojox_grid开发者_开发问答__View_1" style="width: 1270px; height: 0px; left: 1px; top: 0px;">

        <input type="checkbox" role="presentation" dojoattachpoint="hiddenFocusNode" class="dojoxGridHiddenFocus">
        <input type="checkbox" role="presentation" class="dojoxGridHiddenFocus">
        <div role="presentation" dojoattachpoint="scrollboxNode" class="dojoxGridScrollbox" style="height: 0px;">
            <div role="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" class="dojoxGridContent" style="height: 64px; width: 1255px;"></div>
        </div>
    </div></div>
        <div dojoattachpoint="messagesNode" style="display: none;" class="dojoxGridMasterMessages"></div>
        <span tabindex="0" dojoattachpoint="lastFocusNode"></span>
    </div>
</div>

You can see that above code is not populating any data. You can also see that I have made layout and dataStore as Global variables but no success. Even I have tried putting DataGrid into Template file(dummyHTML.html) itself and initializing DataGrid by Markup but it was also not working.

Please tell me if I am missing anything.

Thanks

---

First, because dojox.grid.Datagrid is itself a Widget, you should set the attribute "widgetInTemplate" to true in your custom widget class.

widgetInTemplate : true 

Secondly, you should not call the method "startup" from your grid when it has not yet been attached to the DOM. The method "postCreate" renders the widget while disconnected from the DOM. This is not the way dojox.grid.Datagrid is supposed to be set. Indeed, dojox.grid.Datagrid figures out its size once it has been placed in the DOM. By doing the following:

1) Remove the call to

grid.startup(); 

2) Create a class reference to your object gird using this

this.grid = new dojox.grid.DataGrid
...

3) Call the method startup on your reference to your object grid when it has been attached to the DOM

var yourForm = new FormGenerator();
yourForm.placeAt("container");
yourForm.startup();

It should work :-)

---

You need specify height and width. Without them your grid will render only header.