« Return to Thread: Dojo Grid trouble (autowidth, autoheight, wildcard...) [nicely documented]

[DONE] PLEASE create new tickets for these Grid-bugs!

by theKryz :: Rate this Message:

Okay, tickets filed. See:

http://trac.dojotoolkit.org/ticket/5596 (Autoheight makes the grid content appear way too far down)
http://trac.dojotoolkit.org/ticket/5597 (Scrolling the grid all the way down makes scrollbars appear in the <body> (or the parent element?))
http://trac.dojotoolkit.org/ticket/5598 (Wildcard asterisk in a table column and autowidth="true" makes Grid almost infinitely wide)

Chris

Hi,

I tried to find the fitting trac-tickets in the meantime, but I didn't find them - even though I think these are obvious bugs.

* Autoheight makes the grid content appear way too far down
* Scrolling the grid all the way down makes scrollbars appear in the <body> (or the parent element?)
* Wildcard asterisk in a table column makes Grid almost infinitely wide

Since I don't have enough privileges to do it - could someone who actually does file them?

If you know some of these issues already exist as ticket, please show me - I couldn't find one for any of these.
If you can show me, that these are not bugs at all, I would be just as glad.

Thank you,
Chris

theKryz wrote:

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>

« Return to Thread: Dojo Grid trouble (autowidth, autoheight, wildcard...) [nicely documented]