TabContainer containing ContentPanes containing Grids doesn't render second Grid

Submitted by saschwarz on Wed, 11/21/2007 - 21:01.

I'm using a TabContainer to hold a Grid instance in each ContentPane managed by the TabContainer.
I'm finding that the Grid on the second tab isn't rendered full size when I switch to that tab. At most the Grid header is displayed. Clicking on the header causes a sort which then redisplays the Grid.

Here is my test page:

<head>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dojox/grid/_grid/tundraGrid.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
   dojo.require("dojox.grid.Grid");
   dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
dojo.addOnLoad(function () {
var availableData = [
['in', 'Linear inches'],
['mi', 'Linear miles'],
['sq in', 'Area square inches'],
['sq yd', 'Area square yards'],
['sq mi', 'Area square miles'],
['acres', 'Area square acres'],
['cu in', 'Volume cubic inches'],
['cu ft', 'Volume cubic feet'],
['cu yd', 'Volume cubic yards'],
];

var availableModel = new dojox.grid.data.Table(null, availableData);
var availableLayout = [{ type: 'dojox.GridView',
cells: [[ {name: 'Default Name', width:'95px'},
{name: 'Description', width:'150px'} ]] }];
unitsAvailWidget.setModel(availableModel);
unitsAvailWidget.setStructure(availableLayout);

var visibleData = [
['each', 'ea', 'A single unit'],
['ft', 'ft', 'Linear feet'],
['yds', 'yd', 'Linear yards'],
['sq ft', 'sq ft', 'Area square feet'],
];

var visibleModel = new dojox.grid.data.Table(null, visibleData);
var visibleLayout = [{ type: 'dojox.GridView',
cells: [[ {name: 'Display Name', width:'95px'},
{name: 'Default Name', width:'95px'},
{name: 'Description', width:'150px'} ]] }];
importsVisibleWidget.setModel(visibleModel);
importsVisibleWidget.setStructure(visibleLayout);

});
</script>
<title>test</title>
</head>
<body class="tundra">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 800px; height:400px">
   <div id="unitsTab" dojoType="dijit.layout.ContentPane" title="Configure Units" style="padding-top:10px">
<div id="available" jsId="unitsAvailWidget" dojoType="dojox.Grid" style="height:200px"></div>
</div>
<div id="importTab" dojoType="dijit.layout.ContentPane" title="Configure Import Names" style="padding-top:10px">
<div id="importsVisible" jsId="importsVisibleWidget" dojoType="dojox.Grid" style="height:200px"></div>
</div>
</div>
</body>

Any ideas for a solution or workaround?

Thanks,
Steve

Login or register to post comments
Subscribe post

Seems to be a problem with

Submitted by frankf on Wed, 11/21/2007 - 22:47.

Seems to be a problem with ContentPane and Grid.

If you remove the containing div "importsTab" and move its "title" to the "importsVisible" div, you should be "good to go".

In general, layout containers (TabContainer, in this case) don't need an additional ContentPane in them to hold widgets or regular html elements.

Also, you should remove the trailing "," after the last data element in availableData and visibleData. This usually causes a problem in IE.

However, if you want to keep the ContentPane, there is a little bit of a timing issue, but you can do this:

    dojo.connect(dijit.byId('importTab'),'onShow',fcn);
    function fcn(e){setTimeout("dijit.byId('importsVisible').render();",200);}

You could devise a way to tell if the table were showing, and, if no, loop back for another render...

Actually, update() might be better than render().

Remove content pane

Submitted by Juxta on Thu, 02/26/2009 - 03:12.

This is not a great solution. You need content panes sometimes. For instance, i am using a splitter container.
Any better solutions?
PS:Also the charts dont render either. Causes a huge crash in FF in svg.js.

Search