Grid rows scrambled on high screen resolution

On resolutions of 1024x768 or higher (and especially 1280x1024), the grid seems to scramble rows as i move the mouse across the grid, or scroll the grid.

The problem only appears IF the height of the grid is over a certain px size AND mouseover coloring and alternate row coloring are switched on.

I am using Grid2Beta3.

The page is generated using php, smarty and sql2000. I've modified the example to work as a plain static .htm file

Using the links below you should be able to reproduce the issue on IE6 (6.0.2900) if the resolution is 1280x1024 or higher (1024x768 resolution may show the problem depending how much of IE is taken up by toolbars). I cannot reproduce the problem with firefox.

If i dont set alternate row coloring and mouseover coloring i dont get the problem.

Hopefully someone out there can point out what i am doing wrong.

Here is a screenshot of the problem (just in case you cannot reproduce the prob with the links below

http://www.phpkb.com/gridtest/sample_1.png

Example 1: 100% height/width

As i move the mouse over the grid, rows seem to get scrambled. the header row sometimes disapears if i mouse over it.

http://www.phpkb.com/gridtest/grid_100pc.htm

Example 2:
I took the same code from example1 BUT i commented out the mouseover style and alternate color style

as you can see, no more scrambled rows.

http://www.phpkb.com/gridtest/grid_100pc_norowcolor.htm

Example 3:
I set the grid height/width to 400px and put row coloring on.

No problem.

http://www.phpkb.com/gridtest/grid_small.htm

Example 4:
I set the height/width to 900px/700px and put row coloring on.
The problem is back.

http://www.phpkb.com/gridtest/grid_big.htm

Abe, did you tested it removing the custom-row-height ??
#myGrid .aw-grid-row {.......;HEIGHT: 19px }
I did not try it in all your samples, but seems to solve it.

And you can use instead:
obj.getRowTemplate().setStyle("height", "28px");

Thanks for the reply Carlos.

Yes i have tried removing the height from #myGrid .aw-grid-row but it didnt seem to help.

I then set it to a much higher value (30px) and the problem did seem to disapear until i increased my screen resolution higher that 1280x1025. The problem was back - only this time the header row seemed to reappear in the middle of the grid when i move the mouse over the header.

(see sample screenshot link below).
http://www.phpkb.com/gridtest/sample_norowstyle.PNG

i also tried using obj.getRowTemplate().setStyle("height", "28px"); instead of style to set the row height but got exactly the same problem.

It seems that its not the height of the row, but how many rows are visible on the screen at once???

FYI im trying to put the grid in an intranet product for our internal staff. many have dell laptops which almost foce the users to stick to a high resolution (1400x). So unfortunatelly all the dell users will get a scrambled grid.

Can someone confirm if this is a bug that will be addressed in the next beta or final release or do i need to look for alternative grids that can support a large number of rows on screen / resolution.

Finally I was able to reproduce this misterious bug, though I still don't have any explanations what might be causing it.

- It also happens on 1024x768 if I reduce the row height, i.e. making more rows visible.

- It is not specific to grid control, happens in AW.UI.List as well.

- It is enough to add background color to all rows, does not have to be alternate.

- It happens when you modify the row class (does not matter if it is mouseover, click etc.)

- It was observed once even in version 1.0 as well -
http://www.activewidgets.com/javascript.forum.3140.5/screen-refresh-issue-dragging-scrollbar.html

So I guess all this means it is some weird bug in IE and, hopefully, not something I did wrong in the grid code :-(

Possible solutions -

a). apply background colors to the cells and not to the row itself, for example,

/*	Alternate row colors */
    #myGrid .aw-alternate-even .aw-grid-cell {background-color: #ddd;}
    #myGrid .aw-alternate-odd  .aw-grid-cell {background-color: #f1f1f1;}

    /*	mouseover style */
    #myGrid .aw-mouseover-row .aw-grid-cell {background: #FDEEC2; cursor: hand;}

    /* Selected row */
    #myGrid .aw-rows-selected .aw-grid-cell {background: #316ac5;}

b). here is some voodoo css which also fixes this problem, though I cannot explain why:

#myGrid {filter:none}

woohoo! Thanks for the answer Alex.

filter:none worked a treat.

Once Gridv2 goes live i'll be happy to buy a lic.