How to put a Dojox.grid in a dijit.Dialog - dialog

Question

I've read through the posts about dojox.Grid here, including the one about the tabcontainer, but it doesn't seem to solve my problem.
I have a grid that I am adding programmatically which works a treat if the grid is in the "main" markup, but ceases to display if I put the grid in a dialog.
Any ideas as to why? Using dojo 1.3.1.
dijit.byId("myDialog").show();
var gridStore = new dojo.data.ItemFileReadStore({
data : {
identifier : "id",
items : [
{"id" : 1, "label" : "foo"},
{"id" : 2, "label" : "bar"},
{"id" : 3, "label" : "baz"}
]
}
});
/* A simple layout that specifies column headers and
* mappings to fields in the store */
var gridLayout = [
{name : "ID", field : "id", width : "50%"},
{name : "Label", field : "label", width : "50%"}
];
/* Programmatically construct a data grid */
var grid = new dojox.grid.DataGrid({
store : gridStore,
structure : gridLayout
}, "gridNode");
/* Tell the grid to lay itself out since
* it was programmatically constructed */
grid.startup();
The markup is:
<div dojoType="dijit.Dialog" id="myDialog" title="Multiple Addresses" style="width:400px;height:300px" >
<div dojoType="dijit.layout.ContentPane" id="gridNode" style="positon:relative;width:100%;height:100%"></div>
Thanks for any help,
Ruprict

Answer 1

So, the problem I was having seeem to stem from not putting an explicit style on the grid container div (gridNode) Once I did this:
<div dojoType="dijit.layout.ContentPane" id="gridNode" style="width:400px;height:300px"></div>
It started working.

Answer 2

FYI. I am doing a similar thing (grid in a dialog) and have discovered if I try to modify the store (or at least call setStore on the grid) while the dialog is hidden, errors occur. Just something to watch out for.

Answer 3

I was creating all of it programatically so that didnt work for me, i had to connect to _getFocusItems method of the dialog, thats happen only the animation of the dialog ended.
lov.connect(lov,"_getFocusItems",dojo.hitch(this,function(){
var dijitTitle = new dijit.TitlePane({
title: "Resultados",
toggleable:false,
open:true,
style:"min-width:98%;display:inline-block;width:98%;height:"+dialogStyle.h-100+"px;",
baseClass:"dijitTitlePane qtResultsTitle"
},div);
dijitTitle.startup();
var fisaSubGrid = new dojox.grid.EnhancedGrid({
store:store,
structure: layoutRate,
autoHeight:"true",
autoWidth:true,
initialWidth:dialogStyle.w-50+"px",
plugins: {
pagination: {
description: false,
sizeSwitch: false,
pageStepper: true,
gotoButton: false,
maxPageStep: 5,
position: "bottom",
defaultPage: 2,
defaultPageSize: 10
}
}
});
dijitTitle.addChild(fisaSubGrid);
fisaSubGrid.startup();
}));