dojox.grid,DataGrid column sizes do not line up with headers

[Josh Trutwin]

See attached image - created with the following grid tag:

<table dojoType="dojox.grid.DataGrid?"

class="grid" store="jsonStore" autoHeight="10" query="{ id: '*' }" rowsPerPage="20">

<thead>

<tr>

<th field="id" width="50px">Id</th> <th field="name" width="auto">Event Name</th> <th field="name" width="auto">Start Date</th> <th field="name" width="auto">Start Time</th> <th field="name" width="auto">Event Type</th>

</tr>

</thead>

</table>

Dojo 1.3 beta1

[Josh Trutwin]

grid columns not lined up - firefox 3 on Windows

[Josh Trutwin]

Things are even worse in ie7

[Josh Trutwin]

more info - the first image is what it looks like on immediate load on firefox 3. you can only resize the first column (Id) but once you do a resize all the lines line up nice.

The second image is what it looks like on load on ie7. You can however resize ALL the columns on ie7 though, strangely.

Josh

[Phil DeJarnett]

(I think this has been reported in the past, but this is the first issue I found searching.)

I'm having the same issue.

What appears to be happening is that when the grid is first loaded, it doesn't have a scrollbar. The scrollbar then appears, and it shifts the header row and all new rows, but not the rows already visible.

I think DataGrid? needs to force a resize whenever the scrollbar appears. How? I don't know. I tried adding a this.sizeChange() to _onFetchComplete, and it caused really bad flashing of the table if the table was scrolled.

One solution might be to only call the sizeChange() if the table has not been scrolled. This would allow it to fix the initial view, but not flash the table otherwise.

[Phil DeJarnett]

Update: just tried what I mentioned above, using a variety of tests. There are two issues: 1) If the list has been scrolled automatically, but then you scroll back up, the items are offset still. 2) The list still flashes really badly sometimes.

The bottom line is there needs to be some way to force the first page of columns to adjust their width if they are wider than the header. This is more complicated than I can get into on my own.

[Phil DeJarnett]

Update: This really is a problem for me, because important information keeps getting cut off. I figured out this work-around for now: I subclassed DataGrid?, and overrode _onFetchComplete like this:

dojo.declare("my.DataGrid", dojox.grid.DataGrid, {
	_onFetchComplete: function(items, req){
		var firstLoad = !this._isLoaded
		this.inherited(arguments);
		if(firstLoad) {
			this.update();
		}
	}
});

This created an acceptable solution that doesn't flash too noticeably. I'm sure there is a more efficient way to resize the width only, but I couldn't figure out even how to resize anything otherwise. The only time I got an acceptable resize was using update(), or sizeChange() (but the delay caused a flicker).

This appears to fix the problem in both IE7 and FF3, and appears to have no adverse affect under IE8, FF2, Safari (Mac), Chrome, or Opera.

[dtynan]

I have this problem all the time as well. It seems like the problem is worse when I add padding and/or margin to the grid's style, but I haven't looked closely at it in some time so I can't recall. I also did a similar workaround where I watch _onFetchComplete and then call refresh() on the grid or on it's parent perhaps (in some of the more complex border-layouts, I had to do this). Likewise, I often had to connect a resize event on global (the browser window), directly to a refresh() on the grid to get it to resize when the browser window resized. Some of this may already be fixed, so take with a grain of salt.

The other issue, mentioned in passing, is the flashing that one gets when you scroll down on the grid and then sort it in FF. I just tried all the browsers & FF is the only one that has a major problem with this. This deserves it's own defect (actually, it almost looks like a double-fetch, which I think I already saw a defect on).

Anyway, I'd like to put in a strong vote for fixing this .. while it can be worked around, it's fairly visible & annoying.

Thanks! Dylan Tynan

[Marcin Gołębski]

I found this problem too & I vote for fixing it (I would do it myslef, but I hanve no enough knowlede about this widget yet)

Regards, Marcin Gołębski

[godzillalad]

I also see this and would like for it to be fixed

[evan]

This issue only occurs when creating Grid in HTML markup, it's caused by a IE quirk, see _Grid.js line 1341:

if(d.hasAttr(th, "width")){
    cell.width = widthFromAttr(th);
}

in IE, if we use <th width="auto">, d.hasAttr(th, "width") always return undefined, which results into this issue.

[Matias Rask]

Replying to evan:

This issue only occurs when creating Grid in HTML markup, it's caused by a IE quirk, see _Grid.js line 1341:

if(d.hasAttr(th, "width")){
    cell.width = widthFromAttr(th);
}

in IE, if we use <th width="auto">, d.hasAttr(th, "width") always return undefined, which results into this issue.

Not true. I've got a programmatic created grid and the same problem exists. When width is set to auto the problem goes away but with fixed widths the problem arises.

[bill]

Evan, looks like this ticket got lost, do you want to close it as wontfix again?

[Evan]

Revisit this issue, still the same cause: in IE7, if we use <th width="auto">, d.hasAttr(th, "width") is false, which results into this issue.

Also uploading a test case with two grid, the same layout but created by HTML and JS way, in "ie-7.png" the JS way works well, but HTML way has the issue caused by the IE7 quirk. "ie-8_9.png" and all other browsers all works correctly.

[Evan]

Test case having the same grid created by 2 HTML and JS ways

[Evan]

So closing as wontfix due to IE7 quirk