Grid not working in ContentPane?

Submitted by Antronin on Sun, 12/30/2007 - 20:17.

It seems that Grid is not loading when inside a ContentPane.
I used the dojox/grid/tests/test_edit.html file from the package (v1.0.2) and I have the following experience:

when loading it simple in a browser, everything is working properly.
loading it into my ContentPane (which is a member of a tabContainer, it is not loading anymore.

Is there anything I can do? There is no error message in the Firebug console, and it shows that grid object is created. But where I should see the table is only a greyish box.

Login or register to post comments
Unsubscribe post

is the tab the selected tab

Submitted by dante on Sun, 12/30/2007 - 21:15.

is the tab the selected tab at startup? there are a couple known issues with trying to layout widgets inside of a container display:none (which is the default for non-visible tabs)

It is...

Submitted by Antronin on Sun, 12/30/2007 - 21:23.

the default tab. It is displaying th loading animation, and the html buttons (controlling the tests) are correctly showed on the top of the page. Just the grid is not rendered. I tryed to fire up the render() method from Firebug manually, but nothing is happenedand there were no error messages.

Antronin, Could you post

Submitted by frankf on Mon, 12/31/2007 - 13:23.

Antronin, Could you post here, in a reply, a simple version of your code that shows the problem, for review? Include the html code within the <code>your html</code> tags. Including a very small sample of json data would also help.

Code sample

Submitted by Antronin on Mon, 12/31/2007 - 13:40.

Aa I'm using a test page from dojox there is no JSON data for it. HTML is the following:


    
    
    
    
        @import "../js/ajax/dojox/grid/_grid/tundraGrid.css";
        @import "../js/ajax/dojo/resources/dojo.css";
        @import "../js/ajax/dijit/themes/tundra/tundra.css";
    


...

As you can see I load the test page into the "usersdataTab" tab (from a slightly different URL as I'm using a custom build dojo for my pages).
Build script is the following:

dependencies = {
	layers: [
		{
			name: "dojo4caf.js",
			dependencies: [
				"dojo.i18n",
                "dojo.parser",
                "dojo.number",
                "dojo.data.ItemFileWriteStore",
                "dijit.TitlePane",
                "dijit.layout.TabContainer",
                "dijit.layout.ContentPane",
                "dijit.layout.LayoutContainer",
                "dijit.layout.AccordionContainer",
                "dijit.form.Form",
                "dijit.form.DateTextbox",
                "dijit.form.Checkbox",
                "dijit.form.Button",
                "dijit.form.ValidationTextBox",
                "dijit.form.NumberTextBox",
                "dijit.form.ComboBox",
                "dijit.form.NumberSpinner",
                "dijit.Dialog",
                "dojox.validate.check",
                "dojox.grid.Grid",
                "dojox.grid._data.model",
                "dojox.grid._data.fields",
                "dojox.grid._data.editors",
                "dojox.grid._data.dijitEditors"
			]
		}
	]
}

Not the problem, but Firefox

Submitted by frankf on Mon, 12/31/2007 - 14:44.

Not the problem, but Firefox Firebug extension points out that in your build profile above, "dijit.form.DateTextbox" should be "dijit.form.DateTextBox" and "dijit.form.Checkbox" should be "dijit.form.CheckBox".

I had thought you were trying to display a grid within the ContentPane, rather than href'ing a web page that itself includes the grid. So, it is good you posted your code.

When displaying directly the test_edit.html file that you href'd, the grid.model exists. When the external web page is href'd in your ContentPane, the grid does exist but does not have a grid.model.

I suspect the problem is, as I understand it, the newer dijit.layout.ContentPane does not execute scripts in files that are href'd in. The old ContentPane that was moved into the dojox project/directory (dojox.layout.ContentPane) does parse and execute the scripts.

However, even though it gets further, showing the grid titles, changing the code to use dojox.layout.ContentPane gets hung in a, perhaps infinite, loop, apparently trying to download/run the script multiple times: "Error: xhr cancelled dojoType=cancel message=xhr cancelled Error downloading remote script in 'usersdataTab'". Part of the problem could be that the external html file that you href'd also includes references to the dojo js files.

Do you need to load an external html file that includes a grid? Or can you place the grid directly in your ContentPane?

dojox.layout.ContentPane solves my problem

Submitted by Antronin on Mon, 12/31/2007 - 16:08.

Thanx for the info about the dojox.layout.ContentPane. It seems it solves my problem.
As I'm loading every content from PHP (generated on-the-fly) it is really a must to be able to execute it.
Now I'm having problem using FileWriteStore, but that's anotehr story!
Again thanx for helping out!

If your problem with

Submitted by frankf on Mon, 12/31/2007 - 16:19.

If your problem with ItemFileWriteStore is that editing a row, after sorting differently than the natural order in the request from your server, modifies the data in the wrong row, in addition to the correct row, see Ticket 5275.

Similar Problem

Submitted by Dosi on Fri, 01/04/2008 - 08:15.

It have also a problem that the Grid is not loading when inside a ContentPane.

I modified the simple grid example and put the grid in a ContentPane :
placing the Grid outside the ContentPane everything works fine .....
Any hints what i can do ?



        Test dojox.Grid Basic
        
        
        @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"
                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;
                }
        
        
        
            dojo.require("dojo.data.ItemFileReadStore");
                dojo.require("dojox.grid.Grid");
                dojo.require("dojox.grid._data.model");
                dojo.require("dojo.parser");
                dojo.require("dijit.layout.LayoutContainer");
				dojo.require("dijit.layout.ContentPane");

       
                // a grid view is a group of columns. 
                var view1 = {
                        cells: [[
                                {name: 'Namespace', field: "namespace"},
                                {name: 'Class', width: "25em", field: "className"}
                          ],
                          [
                                {name: 'Summary', colSpan:"2", field: "summary"}
                          ]
                        ]
                };
                // a grid layout is an array of views.
                var layout = [ view1 ];



Our First Grid
        
		
	
			
				TOP-BANNER

What seems to work is

Submitted by frankf on Fri, 01/04/2008 - 14:44.

What seems to work is defining the height of the "main" LayoutContainer to a specific height (not %), e.g., style="height:50em;" and also changing your "gridpane" ContentPane from align=center to align=left.

What worked for me.

Submitted by danI on Fri, 02/29/2008 - 16:49.

I had a similar problem where I setup a grid within a content pane of a tab control containing two tabs.
It worked fine on IE6, IE7 and Firefox but had problems where the grid did not display on IE7 when the site was running on our test box using an unsigned SSL certificate.

I found that resizing the browser made the grid show. Also going to the next tab and back of my tab control also made it show. In the end, what worked was the following e.g.

var tb = dijit.byId('mainTabContainer');
tb.forward();
tb.back();

Search

Grid not working in ContentPane?