PDA

View Full Version : problems with grid in a table



jkelling
25 Feb 2007, 7:28 PM
Hello,

I am having a problem when putting the grids div within a table. If you take the array-grid example which has the div like

<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px;"></div>

and modify the html so that it is like this:

<table><tr><td>
<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px;"></div>
</td></tr></table>

then column resizing doesn't work in internet explorer. Is this a bug, or can I not nest the grids div place holder within a table?

I do have one more question while I am at it. I am using an array as the data source. It is define as:

var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(statArray),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'albumid'},
{name: 'sequence', type: 'int'},
{name: 'albumName'},
{name: 'views', type: 'int'},
{name: 'lastViewed', type: 'date', dateFormat: 'm/d/Y h:i A'}
])
});

In my grid, I define the columns as:

var colModel = new Ext.grid.ColumnModel([
{header: "Sequence", width: 60, sortable: true, dataIndex: 'sequence'},
{header: "Album", width: 250, sortable: true, dataIndex: 'albumName'},
{header: "Views", width: 60, sortable: true, dataIndex: 'views'},
{header: "Last Viewed", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y g:i A'), dataIndex: 'lastViewed'}
//{header: "Last Viewed", width: 120, sortable: true, renderer: rd, dataIndex: 'lastViewed'}
]);


What I want to do is put a function on the "Album" column so that it turns it into a blue link and the url is defined by the album id guid in the data source. Like clicking on a name would generate the url click of:

/ftweb/bin/ft.dll/viewalbum?albumid=[albumid]

Hope this makes sense.

Thanks,

Jeff

ps - just made a nice paypal contribution towards your work - this stuff rocks

kjordan
25 Feb 2007, 9:45 PM
Why would you want to nest it in a table? The inner stuff for a grid is also a table, so that's probably going to make it messy in that respect.

jkelling
25 Feb 2007, 10:04 PM
The table is used to do a page layout.

The example is just a VERY simple way to show how to re-product the problem, and I am not trying to use it that way.

To show how my real layout is, it's something like this (but not exactly)

<table>
<tr>
<td colspan=2>heading stuff</td>
</tr>
<tr>
<td width=25%>left table of contents area</td>
<td width=75%>right main content area (where I'm putting the div)</td>
</tr>
<tr>
<td colspan=2>footer</td>
</tr>
</table>

kjordan
25 Feb 2007, 10:11 PM
Using tables to do page layouts is very hackish now. It's better to use CSS and divs. Look into using the YUI grids (not the same as the Ext grid, but grid layouts).

On your other question, set a cls for that column that makes the text blue and then do a cell click and grab from the datastore what you need and then do a javascript window.location or something.

jkelling
25 Feb 2007, 10:30 PM
Using tables to do page layouts is very hackish now. It's better to use CSS and divs. Look into using the YUI grids (not the same as the Ext grid, but grid layouts).


I know that, but it's kind of too late now. There are literally hundreds of pages on the website that use the same "template" which is the table layout, and while it's on my list to change it to use CSS, that can't be done now just to make the grid work. I somehow have to find out why the column resizing isn't working when it is within a <td> element (works on firefox, not ie).

I appreciate the advice, but the website was designed some time ago when CSS wasn't as powerful, and browsers like netscape navigator couldn't handle it well. Tables were the only sure fire way to do layout that worked across everything. Now CSS works across everything, but the site hasn't undergone the redesign to get rid of table layouts.

jkelling
25 Feb 2007, 11:50 PM
I found the onColumnSplitterMoved function, and I think that some of the problem may be in there.

in between the lines:

this.layout();
and
this.grid.fireEvent("columnresize", i, w);

I added some of the following code, and it seemed to fix it:

this.updateHeaders();
this.updateColumns();
this.updateSplitters();
this.updateHeaderSortState();
this.renderPhase2.defer(1, this);

but I know that this is more than really needs to be done, and it is doing too much redraw now on resize.

Any ideas. My sample is the easiest way to re-produce this.

Thanks,

Jeff

jack.slocum
26 Feb 2007, 5:13 AM
Can you put up a link? It will make it much easier. Thanks.

jkelling
26 Feb 2007, 11:37 AM
Can you put up a link? It will make it much easier. Thanks.

Jack,

Here is a very small sample that illustrates the problem. I simply put the <div> grid place holder within a table.

The url to the example is:

http://69.64.165.185/yuiext/examples/grid/array-grid-table.html

In IE7, if you drag column headings to resize a column, the main body data does not reflect the updates when done dragging.

Thanks,

Jeff

jack.slocum
27 Feb 2007, 7:53 AM
Hey Jeff,

I took a look and it appears to only happen in IE? My thought is it has something to do with IE's internal positioning algorythm in tables. If you could do me a favor and try 2 things:

- And position:relative to the containing div.

- Add align="left" AND text-align:left to the containing TD.

These may seem strange, but IE's rendering engine is a strange animal. ;)

jkelling
27 Feb 2007, 11:20 AM
Jack,

Ok, I modified the sample at the url so that it is like this now:

<td align=left style="text-align:left">
<div id="grid-example" style="overflow: hidden; width: 535px; height: 225px; position:relative"></div>
</td>

Still doesn't seem to work.

You can see my modifications at the following url:

http://69.64.165.185/yuiext/examples/grid/array-grid-table.html

Thanks,

Jeff

jack.slocum
28 Feb 2007, 9:16 AM
After this next rev, if you could update you page I will go there and do some testing in the new Ext Debug Inspector. :D

boricuaterp
28 Feb 2007, 9:57 AM
Hello All,

I'm having the same problem as well (grid div inside td) on IE (6 and 7).

I've tried the suggestions mentioned above also, and it didn't work for me either.

BTW, First Post!!! (Great Framework)

jack.slocum
28 Feb 2007, 12:27 PM
jkelling, if you could deploy rev 6, I would be happy to try some stuff for you.

lumar
28 Feb 2007, 3:03 PM
I had an issue like this a long time ago with IE (when I used tables for layouts :wink: ) and the only thing that seemed to fix it was adding an IE specific attribute to the outer table and setting the col width size to my choosing. For example, in your html that is broken try the following:



<table border=1 cellspacing=0 cellpadding=0 style="text-align:left;table-layout: fixed;">
<COL WIDTH=100>
...
<div id="grid-example" ../>
</table>

I'm sure Jack will find a better way so I would wait for his opinion :D In the meantime try this trick...

jkelling
28 Feb 2007, 3:09 PM
After this next rev, if you could update you page I will go there and do some testing in the new Ext Debug Inspector. :D

Jack, okay, I just updated the website to A2/R6 - with your awesome debugger in it.

You can access it at the same url:

http://69.64.165.185/yuiext/examples/grid/array-grid-table.html

Thanks,

Jeff

lemontree
21 Mar 2007, 9:21 AM
Hi,

I'm running into the same problem.

Is there a fix/workaround for this yet?

Matt

lemontree
21 Mar 2007, 11:13 AM
Jeff's suggestion works very well, and it does fix my problem.

Is the concern that it's too much overhead? Resizing columns isn't done constantly, and it appears to work very quickly.

Jack, could this go in the next alpha release (unless there is a better way to fix it??) -- I'd rather not modify your base code.

Thanks.

Matt


I found the onColumnSplitterMoved function, and I think that some of the problem may be in there.

in between the lines:

this.layout();
and
this.grid.fireEvent("columnresize", i, w);

I added some of the following code, and it seemed to fix it:

this.updateHeaders();
this.updateColumns();
this.updateSplitters();
this.updateHeaderSortState();
this.renderPhase2.defer(1, this);

but I know that this is more than really needs to be done, and it is doing too much redraw now on resize.

Any ideas. My sample is the easiest way to re-produce this.

Thanks,

Jeff

jack.slocum
21 Mar 2007, 11:56 AM
We just did a bunch of work to make column resizes faster. That seems counter productive. A full grid refresh to resize a column?

lemontree
21 Mar 2007, 12:34 PM
Jack,

Unless there is a *better* way to fix it, then I'd vote for that, but... seriously:

I haven't (yet) seen column resizes have enough overhead that their performance could irritate a user. Even with Jeff's modification, it's fast.

If a grid is in a table in IE, resizing *completely* doesn't work AT ALL. Column resize would have to be disabled. That's a major bug. In my case, the grid is living inside tables which provide the layout from lots of legacy code that can't be changed, so switching over to css is not an option.

I agree that firefox is better than ie, and css better than tables, but unfortunately there are still cases where the grid has to go in a table and a lot of users will be on ie.

I'd be love if there was some way to make this work without having to modify your code and maintain it through upgrades, etc. Maybe a grid refresh only in the case that the browser is ie? Or, maybe the ability to set a global/flag to make it work in Jeff's suggested way?

Thanks for listening..

Matt


We just did a bunch of work to make column resizes faster. That seems counter productive. A full grid refresh to resize a column?

jkelling
21 Mar 2007, 10:56 PM
We just did a bunch of work to make column resizes faster. That seems counter productive. A full grid refresh to resize a column?

Then how about checking to see if it is IE, then only doing the slow column resizing. I'm kind of with lemon in that I don't want to modify your releases, but I understand that you want it to be fast....

lemontree
22 Mar 2007, 6:24 AM
p.s. I found this and thought I'd point it out in case it helps development at all...

With fixed-width grids and columns, the suggested fix is very fast and works well. If the grid has the 'autoSizeColumn: true' property, it's slow and does not always resize properly.

Matt



We just did a bunch of work to make column resizes faster. That seems counter productive. A full grid refresh to resize a column?

Then how about checking to see if it is IE, then only doing the slow column resizing. I'm kind of with lemon in that I don't want to modify your releases, but I understand that you want it to be fast....

sjivan
3 Jun 2007, 2:10 PM
Has anyone come up with a clean solution for this that does not involve changing the codebase? I too favor a solution that works on IE even if it goes through some inefficiency. As as pointed out by other users, the inefficiency is incurred only in IE and only when the user resizes the column. And we're probably talking about <1s of redraw overhead which ,while not ideal, is acceptable to most users. Maybe the Grid could check if IE and any of its ancestors are a 'td' ?

I suppose one could add a 'widthchanged' ColumnModel listener that redraws the grid, but I'd prefer if this is handled by Ext automatically.

Thanks,
Sanjiv

cluettr
25 Jun 2007, 7:02 AM
I can resize the headers but the rows don't reflect the changes... I see this in IE6 and IE7.

evankstone
26 Jun 2007, 10:59 AM
I'm experiencing the same problem in 1.0.1a and in 1.1-b1.

...I think I may have to try jkelling's kamikaze technique and see how it flies in my situation.


a little pokey... but hey, it works!

vinod
1 Aug 2007, 7:40 AM
Hi
My HTML page is like this


<table>
<tr>
<td>
Header
</td>
</tr>
</table>
<table>
<tr>
<td>
Sidebar1
</td>
<td>
DataGrid(i.e div of Grid)
</td>
<td>
SideBar2
</td>
</tr>
</table>
<table>
<tr>
<td>
Footer
</td>
</tr>
<table>


I made the changes recommened by Jeff in earlier posting ,but still encounter the problem.
Grid is not dipalying on Page.
Please guide me whether i need to make few more changes .
Non editable grid is working fine table tags.

Thanks
vin

cluettr
1 Aug 2007, 7:47 AM
You'll save yourself some headaches in the long run if you convert your layout to block and inline level elements (DIV & SPAN) rather than tables.

Pankaj.Bhargava
1 Aug 2007, 10:59 AM
Similar problem....
I just now upgraded from 1.0.1 to 1.1 - and my grids' columns display with headers and body out-of-sync - both in IE as well as Firefox. (I am also using tables for layout). Resizing was an issue on IE - but not the initial rendering. Now the initial rending itself is not looking good. Any ideas on how I can correct that?
Thanks.