Force position of row in table

[bitseeker]

I've got an table (asp.net gridview generated) that's going to be scrolled vertically in a <div>. In another sub-form on the same page, the user will select a record identifier that corresponds to a row in the gridview table.

When the user chooses that record identifier, I need to figure out a way to cause the particular corresponding row in the gridview to be positioned within the visible area of the scrolling <div> (because it might be "above" or "below" that visible area). Ideally the particular row would be positioned at the top of the visible gridview rows...but that's probably a detail in this general solution.

I expect this will all be done in javascript. I see that scrollTop can be set as well as gotten, and that's likely to be a key property in doing this.

The gap seems to be knowing what value to set scrollTop to. This could possibly be a calculation based on known row height, and row positional count (provided the rows didn't vary in height...but even that could be probably be dealt with.)

Unless there's a way to get relative row position, as in {x = rowVar.style.top} (which I'm not sure exists for rows, or would have to be somehow declared in advance?)...because that could be immediately combined mathemagically with scrollTop.

Any suggestions on how to make this work would be appreciated.

Thanks!

 

[BillyRayPreachersSon]

I've not tried this, but a more foolproof method might be to give each row a unique ID, and then use that as a bookmark to jump to, for example:

<table>
   <tr id="someRow01"><td>...</td></tr>
   <tr id="someRow02"><td>...</td></tr>
   <tr id="someRow03"><td>...</td></tr>
</table>

and then use this to scroll the relevant row into view:

document.location = '#someRow03';

As I've said, I've not tried it, but it might work without having to calculate things like row heights (which becomes nearly impossible if the user has changed their font size), or assuming the browser supports the scrollIntoView method (AFAIK this is still IE-only).

If you find it works, but just not in some browsers, consider using an anchor element with a name instead of the row ID to jump to.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[bitseeker]

Thanks for the suggestion. I'll check it out and let you know.

 

[BillyRayPreachersSon]

Just to update you, I've tested the anchor jumping to an ID, and it works fine in all browsers I tested in (IE 5.0, IE 5.5, IE 6, NN 7.2, Fx 1.5, Opera 7.5, and Opera 8.0)... so you probably won't need to worry with the extra anchor element.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BabyJeffy]

You have nothing better to do but test whether anchors jump to IDs in 7 different browsers??? Step away from the keyboard... you've been looking at the monitor for waaaay too long

Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094