I've run into a situation where I would love for a programmatic Grid to at least fetch necessary data during dojo.addOnLoad event (after a TabContainer and tabs have been declared and parsed). But, it seems that unless the tab pane is unhidden by selecting the tab, the grid won't render. I can not even get the grid to render from tab "on" selection events. The only way it will render is from a button on the tab contentpane. (The same button on another pane will not even render the grid.) Otherwise, the grid works fine - in fact it is quite nice.
So, 2 things:
1. How do I get the grid to at least startup/render when the tab is selected?
2. Why will the grid not render when the pane is hidden? Should it not at least be constructed even if height/width is unknown?
Overall structure: LayoutContainer -> TabContainer (client) -> ContentPane(tab 3) -> LayoutContainer -> (prog ->)Div(client) -> Grid
Thanks.
Same problem here:
Same issue:
http://dojotoolkit.org/forum/dojox-dojox/dojox-grid-support/grid-disappe...
Modify TabContainer.js to the below,it will work fine!
Add the onButtonClick method to the dijit.layout.TabController
dijit.layout.StackController,
{
// summary:
// Set of tabs (the things with titles and a close button, that you click to show a tab panel).
// description:
// Lets the user select the currently shown pane in a TabContainer or StackContainer.
// TabController also monitors the TabContainer, and whenever a pane is
// added or deleted updates itself accordingly.
templateString: "<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'></div>",
// tabPosition: String
// Defines where tabs go relative to the content.
// "top", "bottom", "left-h", "right-h"
tabPosition: "top",
// doLayout: Boolean
// TODOC: deprecate doLayout? not sure.
doLayout: true,
// buttonWidget: String
// The name of the tab widget to create to correspond to each page
buttonWidget: "dijit.layout._TabButton",
postMixInProperties: function(){
this["class"] = "dijitTabLabels-" + this.tabPosition + (this.doLayout ? "" : " dijitTabNoLayout");
this.inherited(arguments);
},
onButtonClick: function(/*Widget*/ page){
// summary:
// Called whenever one of my child buttons is pressed in an attempt to select a page
this.inherited(arguments);
dojo.forEach(page.getDescendants(), function(widget){
if(widget.resize)widget.resize();
});
},
//TODO: can this be accomplished in CSS?
_rectifyRtlTabList: function(){
//Summary: Rectify the length of all tabs in rtl, otherwise the tab lengths are different in IE
if(0 >= this.tabPosition.indexOf('-h')){ return; }
if(!this.pane2button){ return; }
var maxLen = 0;
for(var pane in this.pane2button){
maxLen = Math.max(maxLen, dojo.marginBox(this.pane2button[pane].innerDiv).w);
}
//unify the length of all the tabs
for(pane in this.pane2button){
this.pane2button[pane].innerDiv.style.width = maxLen + 'px';
}
}
});