« Return to Thread: Dojo Grid trouble (autowidth, autoheight, wildcard...) [nicely documented]
Dojo Grid trouble (autowidth, autoheight, wildcard...) [nicely documented]
by theKryz
::
Rate this Message:
I like Dojo (I even learnt to write it with the Japanese Romanji o!). And I like that the Grid-Widget (before: FilteringTable) is back. Anyways, there is some trouble I am having with it.
I took the basic example from http://www.dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid/simple-grid and tried playing around to test out the new feature (actually to find out, whether some bugs are part of my page or part of the grid widget). I use Grid 1.0.2 of course, who knows what has been fixed since 1.0.0... (so there's a little adjusting in the used css to do from
the basic example).
First thing I did: I removed the internal css for Grid width and height. Yess, now I can try out the new autoheight and autowidth :D
My grid-part of the css now looks like this:
#grid {
border: 1px solid #333;
}
I included the two autos and set them on false. Page reload, everything seems fine (the same) so far.
Until I scrolled the grid all the way down.
Huh - what's that? I have scrollbars appearing for the body! Where do THEY come from?! (Obviously happens in the original example as well!)
Well, I'll care about that later. Now let's figure, if autowidth works :D (turning autowidth="true")
Okay, the scrollbars still appear when scrolling down - but at least the width is now nicely adapted!
Now let's try autoheight! Okay, disabled autowidth, turned on autoheight...
...what's this? Where is my content? And why do I see a horizontal scrollbar? There's nothing to scroll from the start...
Oh... I have to scroll down one fourth of the page to see where it starts. Why does that happen? By the way - is autoheight supposed to make the grid as high as possible? I thought it would fit it to the page...
Well, and it's too wide of course, so let's turn on autowidth again.
Okay, looks a little better (narrrower ;), even though the horizontal scrollbar is still sticking around and the content starts too far down...
So let's go for my main concern: What about columns that have a wildcard (*) as width? Turning Autoheight off...
Before testing it with the basic test I thought I was only getting this error because of my implementation with TabContainers, ContentPanes etc... but now I can confirm: Having a star in the width makes your Grid quite a bit too long. At least, when you have autowidth on "true".
Did I miss something and the two are actually incompatible? I think it would be a very useful use-case to want a grid full-width (auto-resize) with a column using the rest of the space in all its fulness.
If someone has any help on these probelms (or can show me the fitting ticket at http://trac.dojotoolkit.org) I would be very pleased :)
Chris
############### SOURCECODE ###############
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test dojox.Grid Basic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "dojo/dojox/grid/_grid/tundraGrid.css";
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/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;
}
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" djConfig="isDebug:false, parseOnLoad:
true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
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: 'Namespace', field: "namespace"},
{name: 'Class', width: "*", field: "className"}
],
[
{name: 'Summary', colSpan:"2", field: "summary"}
]
]
};
// a grid layout is an array of views.
var layout = [ view1 ];
</script>
</head>
<body class="tundra">
<div class="heading">Our First Grid</div>
<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="dijits.txt"> </div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }"> </div>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout" autowidth="false" autoheight="false"></div>
</body>
</html>
I took the basic example from http://www.dojotoolkit.org/book/dojo-book-0-9/docx-documentation-under-development/grid/simple-grid and tried playing around to test out the new feature (actually to find out, whether some bugs are part of my page or part of the grid widget). I use Grid 1.0.2 of course, who knows what has been fixed since 1.0.0... (so there's a little adjusting in the used css to do from
the basic example).
First thing I did: I removed the internal css for Grid width and height. Yess, now I can try out the new autoheight and autowidth :D
My grid-part of the css now looks like this:
#grid {
border: 1px solid #333;
}
I included the two autos and set them on false. Page reload, everything seems fine (the same) so far.
Until I scrolled the grid all the way down.
Huh - what's that? I have scrollbars appearing for the body! Where do THEY come from?! (Obviously happens in the original example as well!)
Well, I'll care about that later. Now let's figure, if autowidth works :D (turning autowidth="true")
Okay, the scrollbars still appear when scrolling down - but at least the width is now nicely adapted!
Now let's try autoheight! Okay, disabled autowidth, turned on autoheight...
...what's this? Where is my content? And why do I see a horizontal scrollbar? There's nothing to scroll from the start...
Oh... I have to scroll down one fourth of the page to see where it starts. Why does that happen? By the way - is autoheight supposed to make the grid as high as possible? I thought it would fit it to the page...
Well, and it's too wide of course, so let's turn on autowidth again.
Okay, looks a little better (narrrower ;), even though the horizontal scrollbar is still sticking around and the content starts too far down...
So let's go for my main concern: What about columns that have a wildcard (*) as width? Turning Autoheight off...
Before testing it with the basic test I thought I was only getting this error because of my implementation with TabContainers, ContentPanes etc... but now I can confirm: Having a star in the width makes your Grid quite a bit too long. At least, when you have autowidth on "true".
Did I miss something and the two are actually incompatible? I think it would be a very useful use-case to want a grid full-width (auto-resize) with a column using the rest of the space in all its fulness.
If someone has any help on these probelms (or can show me the fitting ticket at http://trac.dojotoolkit.org) I would be very pleased :)
Chris
############### SOURCECODE ###############
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test dojox.Grid Basic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "dojo/dojox/grid/_grid/tundraGrid.css";
@import "dojo/dijit/themes/tundra/tundra.css";
@import "dojo/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;
}
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" djConfig="isDebug:false, parseOnLoad:
true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
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: 'Namespace', field: "namespace"},
{name: 'Class', width: "*", field: "className"}
],
[
{name: 'Summary', colSpan:"2", field: "summary"}
]
]
};
// a grid layout is an array of views.
var layout = [ view1 ];
</script>
</head>
<body class="tundra">
<div class="heading">Our First Grid</div>
<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="dijits.txt"> </div>
<div dojoType="dojox.grid.data.DojoData" jsId="model" rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }"> </div>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout" autowidth="false" autoheight="false"></div>
</body>
</html>
« Return to Thread: Dojo Grid trouble (autowidth, autoheight, wildcard...) [nicely documented]
| Free embeddable forum powered by Nabble | Forum Help |
