Login Register
Home » Support » Forums » DojoX (dojox.*) » DojoX Support » Grid not rendering in ContentPane when Pane is display:none

Grid not rendering in ContentPane when Pane is display:none

Submitted by IanJ on Mon, 12/03/2007 - 16:05.

I have been eagerly waiting for the Grid. I currently have a page that makes extensive use of hidden ContentPanes. I was using os3grid, but wished to switch to an single toolkit. The grid I defined doesn't display in the ContentPane when the style of the ContentPane is changed to "block".

I modified the existing test_grid.html page as a test case.

After clicking the "Show Hidden ContentPane" button the column headings show as only two small boxes.

Here is an excerpt from the code: 


dojo.require("dijit.form.Button");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");



	// a grid view is a group of columns
	var view1 = {
		cells: [[
			{name: 'Column 0'}, {name: 'Column 1'}, {name: 'Column 2'}, {name: 'Column 3', width: "150px"}, {name: 'Column 4'}
		],[
			{name: 'Column 5'}, {name: 'Column 6'}, {name: 'Column 7'}, {name: 'Column 8', field: 3, colSpan: 2}
		]]
	};
	// a grid layout is an array of views.
	var layout = [ view1 ];
	
	function onclick_Showbutton(object){
		dojo.byId("Pane").style.display = 'block';
	}





dojox.Grid Basic Test
‹ Grid onStyleRow highlighting problem set Grid height ›

Force the grid to render

Submitted by Maine on Tue, 12/04/2007 - 13:11.

Simply put, you have to force the grid to render after making it visible - use: grid.render();

If you were using a container here (e.g. dijit.layout.TabContainer), you could also use onShow function:

<div id="Pane" dojoType="dijit.layout.ContentPane" style="display:none">
  <script type="dojo/method" event="onShow">
    grid.render();
  </script>
  <div id="grid" jsId="grid" dojoType="dojox.Grid" model="model" structure="layout">
</div>

Container calls child's onShow when it sets it visible.
For syntax see Understanding The Parser.

Force the grid to render

Submitted by IanJ on Tue, 12/04/2007 - 15:40.

Maine, I tried your suggestions. Unfortunately, I have still had no luck in correctly displaying the grid.

I still get only two small boxes on the left of the window that correspond to the two header lines. If I click in either box the headings are rendered, since the grid is assuming I want to sort the first columns (Column 0 or Column 5). The rest of the grid doesn't render.

Simply changing the ContentPane from 'display:none' to 'display:block' causes the grid to render correctly. This is what has caused me to think this is a Grid issue rather than a ContentPane issue.

In looking at the HTML generated in Firebug, following elements are created:


        
            
              Column 0

The actual grid elements are NOT visible:


      


Comments or suggestions?

    

  


  

    
Check the height
    
Submitted by Maine on Tue, 12/04/2007 - 15:56.

    
Ok, if not display, how about the other style properties? You didn't include any CSS in the excerpt you sent, but I suppose you set the grid height with CSS. Check that you also set some height for all ancestors: #Pane { height: 300px } and so on...



    

  


  

    
Check the height
    
Submitted by IanJ on Tue, 12/04/2007 - 19:13.

    
I will readily admit I'm not the best with HTML, Java and Ajax, but I can't understand how not displaying a ContentPane using display:none would have that much effect on rendering a grid.


I did change the initial style definitions used in the test_grid.html to:




	Test dojox.Grid Basic
	
	
		@import "../dijit/themes/tundra/tundra.css";
		@import "../dojo/resources/dojo.css";
		@import "../_grid/Grid.css";
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
		}
		.heading {
			font-weight: bold;
			padding-bottom: 0.25em;
		}
				
		#grid {
			border: 1px solid #333;
			width: 35em;
			height: 30em;
		}
		#Pane {
			height: 300px;
			width: 200px;
		}
	

These changes did not effect the display of the page.



    

  


  

    
This may have already been
    
Submitted by frankf on Wed, 12/05/2007 - 02:05.

    
This may have already been mentioned, but a widget within a hidden widget has difficulty sizing itself to its parent (which appears to have 0 size).


So, you may need to either create the widget offscreen as a child of another html element that is at (-10000,-10000) and then append it to the content pane when the onShow event occurs or set a timeout to display (render/resize) the hidden widget a short time after the content pane is "shown".



    

  


  

    
Simple example for rendering initially hidden grid
    
Submitted by Maine on Wed, 12/05/2007 - 09:07.

    
It's not the prettiest sample ever, but it works (just change the paths). Hopefully it helps you to find the root of the problem.


<html>

  <head>

    <title>Grid in Hidden ContentPane</title>

    <style type="text/css">

      @import "../../../../dojo/dojo/resources/dojo.css";

      @import "../../../../dojo/dijit/themes/dijit.css";

      @import "../../../../dojo/dijit/themes/tundra/tundra.css";

      @import "../../../../dojo/dojox/grid/_grid/Grid.css";

      body { font-size: 1em; font-family: Geneva, Arial, Helvetica, sans-serif; }

      #grid { width: 65em; height: 25em; padding: 1px; }

    </style>

    <script type="text/javascript" src="../../../../dojo/dojo/dojo.js.uncompressed.js"

        djConfig="isDebug:true, parseOnLoad: true"> </script>

    <script type="text/javascript">

      dojo.require("dojo.data.ItemFileReadStore");

      dojo.require("dijit.layout.ContentPane");

      dojo.require("dojox.grid.Grid");

      dojo.require("dojox.grid._data.model");

      dojo.require("dojo.parser");

    </script>

    <script type="text/javascript">

      var layoutCountries = [

        { cells: [[

          { field: 'type', width: 8 },

          { field: 'name', width: 4 },

          { field: 'population', width: 'auto' }

        ]]}

      ];

    </script>

  </head>

  <body class="tundra">

      <div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"

          url="../../../../dojo/dijit/tests/_data/countries.json"></div>

      <span dojoType="dojox.grid.data.DojoData" jsId="dataModel2"

          rowsPerPage="20" store="continentStore" query="{ name : '*' }"></span>

      Use Firebug console for running these:

      1) Show the ContentPane: dojo.byId('Pane').style.display='block'

      2) Render the Grid: grid.render()

      <div id="Pane" dojoType="dijit.layout.ContentPane"

          style="display: none; height: 300px; width: 300px;">

          <div id="grid" jsId="grid" dojoType="dojox.Grid" elasticView="0"

              model="dataModel2" structure="layoutCountries">

          </div>

      </div>

  </body>

</html>



    

  


  

    
SOLVED - Simple example for rendering initially hidden grid
    
Submitted by IanJ on Wed, 12/05/2007 - 15:29.

    
Thanks for the example Maine.  I continued to poke at the test_grid.html.  


As you have pointed out, the key to rendering and initially hidden grid is to 1) show the ContentPane, 2) render the grid.


I initially used render() to show the grid in the ContentPane and it worked exactly as it should.  If I moved through the grid, and hid the ContentPane and then redisplayed the ContentPane, the grid was rendered again and reset the grid to it's initial state.  I changed the render() to update() after reviewing the GRID code.  Now if I move throught the grif and hide the ContentPane and then redisplay the ContentPane, the grid rendered without resetting to the initial state.  The update() will also work for the initial rendering of the grid.


Thanks to all for your help.


Ian



    

  


  

    
wrong thread - moved
    
Submitted by ggpauly on Wed, 12/12/2007 - 18:27.

    
"Nothing to see here.  Please move along"



    

  


  

    
Same problem with AccordionPane
    
Submitted by jbella on Fri, 12/14/2007 - 20:59.

    
I have the same problem above, but the grid I am trying to render is in an AccordionPane that is initially hidden. When I select the Pane, the grid is not rendered properly. I tried to attach an event to onload, but it seems this event is never called! The only event that I have been able to catch is onSelected. Unfortunately when this event is thrown, the widget is still in it's hidden state, so it does me no good to re-render the grid at that time. Any suggestions on how to get around this problem?