How to programmatically create a dijit.Dialog with a dojox.grid.DataGrid

Question

I have the following problem:

Programmatically creating a dijit.Dialog and a dojox.grid.DataGrid (linked to a global Variable Data Store (dojo.store.Memory) ) the content of the Dialog is not shown while the Dialog size remains at a minimum.

The DataGrids Store is filled correctly and Firebug shows the Grid inside the Dialog.

data = new dojo.data.ObjectStore(
  { objectStore: new dojo.store.Memory({data:[]}) });

data.put({id:0,name:'Franklin'});

showDialog = function(){
  var dlg = dijit.byId('myDlg');
  if(dlg){
    dlg.show();
  }
  else{
    var cp = new dijit.layout.ContentPane({style:"width:500;height:500;"});
    var grid = new dojox.grid.DataGrid({
      store : data,
      structure : [
        {field:'id',name:'ID',width:'50px'},
        {field:'name',name:'Name',width:'400px'}]
    },cp);

    dlg = new dijit.Dialog({
      id:'myDlg',
      title:'Names',
      content:cp.domNode
    });

    grid.startup();
    dlg.show();
  }
);

Maybe I added something in the wrong order?

Also I do not know if my way of combining/appending dojo widgets using the domNode property is the correct way of doing things.

I do not know if the ContentPane I am using is necessary to place the Grid inside the Dialog. Both variants did not work so far.

Finally I am unsure if and where the Dialog needs static measurements to size correctly. In my experience the Dialog itself does not need static width or height, but I have no experience so far with adding a dynamic component like the Grid - which might change its size later at startup - to a Dialog.

Answer 1

Here is one possible sollution for my above problem. The Dialog needs to be in place and visible in this case. Only after that, the Grid is created, placed inside the Dialog and started up.

Both dialog and grid need explicid dimensions. In case the dialog has some other content it may not need additional width information.

var myDialog = dijit.byId('myDialog');
if(!myDialog){
    myDialog = new dijit.Dialog({
        id:'myDialog',
        title:'test dialog',
        style:'width:600px;height:600px;'
    });
}
myDialog.show();

var myMemoryStore = new dojo.store.Memory(
    {data:[
        {'id':'0','lastname':'Frank'},
        {'id':'1','lastname':'Herbert'}]});
var myObjectStore = new dojo.data.ObjectStore({objectStore:myMemoryStore });

var myStructure = [
    {field:'id',       name:'ID',   width:'20px'},
    {field:'lastname', name:'NAME', width:'200px'}];

var myGrid = dijit.byId('myGrid');
if(!myGrid){
    myGrid= new dojox.grid.DataGrid({
        id:'myGrid',
        store:myObjectStore ,
        structure:myStructure,
        style:'width:400px;height:400px;'
    });
}

dojo.place(myGrid.domNode,myDialog.containerNode,'first');
myGrid.startup();