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.

Dud

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();

Dud

This sollution has worked for me, but checking back at this question I see possible better sollutions - so Im opening this question again to check those. – Dud

I did the same thing. the problem is if you are trying to add more than a grid in your dialog. i was able to do a workaround but somehow the dialog is not centered. – Decanter

@Decanter I have the same issue, its not getting centered! Wonder if you have sorted it out? – Tsushima

@Tsushima no, i still have same issue. – Decanter

Answer 2

You shouldn't need to show the dialog first, that beats the purpose of having a dialog. You need to create the grid, append the domNode to the dialog, then show the dialog. That works for me in all my codes. Best

Morsel