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

Question

I have the following problem:

By programmatically creating dijit.Dialog and dojox.grid.DataGrid (associated with the global data storage of variables (dojo.store.Memory)), the contents of the Dialog are not displayed while the size of the dialog remains at a minimum.

The DataGrids store is full and Firebug displays the grid inside the dialog box.

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 don't know, the way I combine / add dojo widgets using the domNode property is the right way to do things.

I do not know if ContentPane is needed to place the Grid inside the dialog box. Both options have not worked so far.

Finally, I'm not sure what and where the Dialog needs static measurements for the right size. In my experience, the dialog itself does not need a static width or height, but so far I have no experience adding a dynamic component as a grid - which can change its size later on when launching - in the dialog box.

Answer 1

Here is one possible solution to my problem. The dialogue should be in place and visible in this case. Only after that a grid is created, placed inside the dialog box and launched.

Both dialogs and grids need explicid sizes. If there is other content in the dialog box, 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(); 

Answer 2

You do not need to first show a dialogue that is superior to the purpose of the dialogue. You need to create a grid, add domNode to the dialog, and then show the dialog. This works for me in all my codes. Best