How to put Dojox.grid in dijit.Dialog

Question

I read the posts about dojox.Grid here, including the tab container, but it doesn't seem to solve my problem.

I have a grid that I add programmatically that works if the grid is in the "main" markup, but stops showing if I put the grid in the dialog.

Any ideas on 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(); 

Markup:

  <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 am facing is that I am not adding an explicit style to the container container grid (gridNode). Once I have done this:

 <div dojoType="dijit.layout.ContentPane" id="gridNode" style="width:400px;height:300px"></div> 

He started to work.

Answer 2

FYI. I do this (grid in the dialog) and find that if I try to change the storage (or at least call setStore in the grid) while the dialog is hidden, errors occur. Just need to keep an eye on.

Answer 3

I created all this programmatically, so it didn’t work for me, I had to connect to the _getFocusItems method in the dialog box, this only happens when the dialog animation is finished.

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