Opened 11 years ago

Closed 11 years ago

#7683 closed defect (worksforme)

Grid in accordionPane KO

Reported by: kirlian Owned by: Nathan Toone
Priority: high Milestone: 1.3
Component: DojoX Grid Version: 1.2beta
Keywords: grid accordionPane Cc:
Blocked By: Blocking:

Description

Hello,

when we have a grid in an accordionPane, we get the error : this.headerContentNode.firstChild is null

the source code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
                <title>Test Maquette Ecran</title>
   
            <!-- Include StyleSheet -->
                <style type="text/css">
	                @import "./dojo/resources/dojo.css";
                        @import "./dijit/themes/tundra/tundra.css";
               		@import "./dijit/themes/tundra/layout/AccordionContainer.css";
                        @import "./dojox/grid/resources/Grid.css";
                        @import "./dojox/grid/resources/tundraGrid.css";                       
	                html, body {
                                height: 100%; width: 100%;
                                padding: 0; border: 0;
                                overflow:hidden;
                        }
                        #acStudentLeftMenuPane_id {
                          width: 300px;height: 300px}
                </style>
                <script type="text/javascript"
                    src="./dojo/dojo.js"
                    djConfig="parseOnLoad: false"></script>
                <script type="text/javascript">
                        dojo.require("dijit.layout.AccordionContainer");
                        dojo.require("dijit.layout.ContentPane");
                        dojo.require("dijit.TitlePane");
                        dojo.require("dijit.layout.TabContainer")
                        dojo.require("dojox.grid.DataGrid")
                        dojo.require("dojo.data.ItemFileWriteStore");
                       

                        dojo.addOnLoad(function() {
                                        var acStudentLeftMenuPane = new dijit.layout.AccordionContainer({
                                                                               id: "acStudentLeftMenuPane_id"
                                                                            });


                                            //AllStudentListPane
                                                var apStudentListPane = new dijit.layout.AccordionPane({
                                                                                   title: "All Students", 
                                                                                   selected : "true",
                                                                                   id: "apStudentListPane_id"
                                                                                });

                                                    //Grid
                                                     var ifrsStudentLeftList = new dojo.data.ItemFileReadStore ({
                                                                                                  url :"./100.js"
                                                                                                });

                                                    var gsStudentLeftList = [{
                                                                  cells: [[
                                                                          {name: 'id', width: "40px", field: "id"}, 
                                                                          {name: 'name', width: "60px", field: "name"},
                                                                          {name: 'firstname', width: "60px", field: "firstname"}
                                                                    ]
                                                                  ]
                                                          }];

                                                    var gStudentLeftList = new dojox.grid.DataGrid ({
                                                                                                autoWidth: "true", 
                                                                                                center:"true",
                                                                                                title: "Tous les étudiants",
                                                                                                query: { id: '*' },
                                                                                              id: "gStudentLeftList_id",
                                                                                                structure: gsStudentLeftList,
                                                                                                fitTo: "parent",
                                                                                                store:ifrsStudentLeftList,
                                                                                                rowsPerPage: 20
                                                                                            });

                                                    gStudentLeftList.render();
                                                //StudentListPane2
                                                var apStudentListPane2 = new dijit.layout.AccordionPane({
                                                                                   title: "All Students", 
                                                                                   selected : "false",
                                                                                   id: "apStudentListPane2_id"
                                                                                });

                                //Startup()
                                        document.body.appendChild(acStudentLeftMenuPane.domNode);
                                       
                                                acStudentLeftMenuPane.addChild(apStudentListPane);
                                                    apStudentListPane.setContent(gStudentLeftList.domNode);
                                                acStudentLeftMenuPane.addChild(apStudentListPane2);
                                        acStudentLeftMenuPane.startup()                                                    
                                        
			//This line make an error
			gStudentLeftList.resize()
                               
                        });
                        
                </script>
        </head>
        <body class="tundra">
        </body>
</html>

and the json used by the grid

{"items": [{"name": "arnaud", "placeofbirth": "Caen", "id": 107, "firstname": "ALE61"}, {"name": "arnaud", "placeofbirth": "hy", "id": 99, "firstname": "ALE60"}, {"name": "arnaud", "placeofbirth": "TEST97", "id": 97, "firstname": "ALE15"}], "label": "id", "identifier": "id"}

Arnaud

Change History (7)

comment:1 Changed 11 years ago by bill

Milestone: 1.21.3

Looks like a dup of #5673.

comment:2 Changed 11 years ago by kirlian

Hello,

It was possible to add a grid to an accordionPane in 1.1 and in the nightbuild 1.2 of the 28/08/08.

There is the same issu when we add a grid to a contentPane.

It is really difficult to use a grid in a rich user interface if it is not possible to add it at least to a contentPane.

This is an example with the contentPane, the JSON used is the same than in the first example. <code> <!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Test Maquette Ecran</title>

<!-- Include StyleSheet? -->

<style type="text/css">

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

@import "./dijit/themes/tundra/layout/AccordionContainer.css";

@import "./dojox/grid/resources/Grid.css"; @import "./dojox/grid/resources/tundraGrid.css"; html, body {

height: 100%; width: 100%; padding: 0; border: 0; overflow:hidden;

} #apStudentLeftMenuPane_id {

width: 300px;height: 300px}

</style> <script type="text/javascript"

src="./dojo/dojo.js" djConfig="parseOnLoad: false"></script>

<script type="text/javascript">

dojo.require("dijit.layout.AccordionContainer?"); dojo.require("dijit.layout.ContentPane?"); dojo.require("dijit.TitlePane?"); dojo.require("dijit.layout.TabContainer?") dojo.require("dojox.grid.DataGrid?") dojo.require("dojo.data.ItemFileWriteStore?");

dojo.addOnLoad(function() {

var apStudentListPane = new dijit.layout.ContentPane?({

id: "apStudentListPane_id"

});

Grid

var ifrsStudentLeftList = new dojo.data.ItemFileReadStore? ({

url :"./100.js"

});

var gsStudentLeftList = [{

cells: [[

{name: 'id', width: "40px", field: "id"}, {name: 'name', width: "60px", field: "name"}, {name: 'firstname', width: "60px", field: "firstname"}

]

]

}];

var gStudentLeftList = new dojox.grid.DataGrid? ({

autoWidth: "true", center:"true", title: "Tous les étudiants", query: { id: '*' },

id: "gStudentLeftList_id",

structure: gsStudentLeftList, fitTo: "parent", store:ifrsStudentLeftList, rowsPerPage: 20

});

gStudentLeftList.render();

Startup()

document.body.appendChild(apStudentListPane.domNode);

apStudentListPane.setContent(gStudentLeftList.domNode);

apStudentListPane.startup()

This line make an error gStudentLeftList.resize()

});

</script>

</head> <body class="tundra"> </body>

</html> </code>

comment:3 Changed 11 years ago by bill

Should be possible to add a Grid to ContentPane, see #7349. For AccordionContainer, it can't contain layout widgets at all, see #4016, #5673, so not sure how this ever worked.

comment:4 Changed 11 years ago by kirlian

I nomore do a contentPane.setContent(grid.domNode) but a contentPane.setcontent(grid). I have no errors but the grid doesn't display correctly (the grid is full in grey)

So, I have taken the example given in #7349, I have no error but nothing display in FF3, maybe ok as the grid has no properties.

I add some properties (size, view and store), the grid doesn't display correctly. The page is blank, I get 2 checkbox in left up corner and when I click on the grid, the scroll bar appear.

Just for information, to make a grid works in an accordionPane in 1.1 I have done :

accordionPane.setcontent(grid.domNode) dojo.connect(accordionePane,"resize",grid,"resize")

Arnaud.

comment:5 Changed 11 years ago by kirlian

The grid in a contentPane, even in a TitlePane? works fine with the last release.

Thanks,

Arnaud.

comment:6 Changed 11 years ago by Nathan Toone

Owner: changed from Bryan Forbes to Nathan Toone

Reassigning to me

comment:7 Changed 11 years ago by Nathan Toone

Resolution: worksforme
Status: newclosed

Please reopen if this issue still exists. Bill put in some changes in the past couple of days which should address this sort of issue.

Note: See TracTickets for help on using tickets.