Activewidgets style datagrid…

Hi. Please check out the data grid @ [url]http://www.activewidgets.com/grid/[/url]
Download the free trial version from [url]http://www.activewidgets.com/download/activewidgets-2.0.0-trial.zip[/url]. It’s easier to work with.

Alright now, I’ve been going crazy trying to figure out how they’ve done the scrolling bit, with the fixed headers & column. If you look at the DOM, you’ll notice that it’s somewhat like this…

[CODE]
span (class “aw-grid-box”)
|
–> span (class “aw-scroll-bars”)
|
–> span (class “aw-bars-box”)
| |
| –> span (class “aw-bars-spacer”)
|
–> span (class “aw-bars-content”)
[/CODE]

Looking at the CSS stylesheet…

[code]
.aw-bars-content {display:block;position:absolute;overflow:hidden;top:0px;left:0px;bottom:20px;right:20px}
[/code]

^ the bottom & left: 20px explains how the content portion doesn’t overlap with the scrollbars. But if you notice, the overflow is hidden.

Now, looking at the style for aw-bars-box…

[code]
.aw-bars-box {display:block;position:absolute;overflow:scroll;top:0px;left:0px;width:100%;height:100%}
[/code]

This is the box with the scrollbars which, when scrolled, scrolls the aw-bars-content span (I think)…. for the life of me, I cannot figure out how they have done this. Obviously, there’s some real clever trickery involved. Can anyone shed more light on this? The aw-bars-spacer dynamically resizes itself whenever you resize any column.

Also, it would be nice if someone can figure out how they’ve implemented the resizable columns. :p

I’m going freakin’ mad…. somebody PLEASE help me out here. Cheers!

Also in #CSS _↴