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
| Milestone: | 1.2 → 1.3 |
|---|
comment:2 Changed 11 years ago by
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"
<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
comment:4 Changed 11 years ago by
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
comment:6 Changed 11 years ago by
| Owner: | changed from Bryan Forbes to Nathan Toone |
|---|
Reassigning to me
comment:7 Changed 11 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
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.
Looks like a dup of #5673.