Grid DTC Navbar / Vertical scroll

[computergeek]

Hello,

Our client would prefer to have a vertical scrollbar (like the one found on almost every window, this textarea I'm typing in right now...) to scroll up/down through the rows in the grid replacing the Navbar. Does anyone know IF this can be accomplish? If yes, how? (Javascript, DHTL? what/how?) Note: I am not allowed to use any Activex controls that are loaded to the client on this project...

Thanks for the information.

Computergeek

 

[computergeek]

Hi,

I found a solution on

http://www.dynamicdrive.com

under dynamic Content section. (Scrollable Content) This is Javascript solution. I embedded the scrollbar stuff around my Grid DTC, turned off Page Navigation for grid, enabled Row navigation with color but no buttons for grid, then added a anchor to the grid to allow for single-click row selection (See Microsoft article Q198827 for more info on enabling single-click row selection)

Just thought I would write back just in case someone else is trying to do this as well.

Computergeek

 

[peggasus88]

Hi.

Thanks for writing back. I was looking for something just like this!

One question:
Say I have a grid with hundreds of records and I scroll all the way down to select a row near the end...when I click on the anchor, a server round trip is made and the scrollbar jumps back to the top...I have to scroll all the way back down to find the colored row that I just clicked on! I tried to ignore it, but really, it's quite annoying, especially since I'm selecting a particluar row in order to edit it. Is there a way to prevent the scrollbar from jumping to the top when a row is selected?
Thanks.

-- Peggy --

 

[computergeek]

Hi Peggy,

Sorry I haven't got that far... I only have about 8 test records so far. Yes, I'll say that would be annoying! I am wondering if within a clicked event for the grid we could somehow "scroll to selected row"? Could probably get what the selected row is...but as for scrolling/paging to that row I don't know... (I know how to do it in Powerbuilder... ha!) Maybe post another thread on how to "scroll to the selected row in a grid"... If you find a solution, please post it back to this thread, I'll do the same if I find one.

Computergeek

 

[MerlinB]

One way to prevent the jumps is to add page anchoring. If you do a <a href=&quot;#name&quot;>goto the bit of page called NAME</a> then the browser will adjust the page URL in the browser, and scroll the page too. The next server round trip will then notice the adjusted URL, and re-scroll to that place.

The 'name' in the anchor is any named tag on the page - typically an invisible named anchor tag <a name=&quot;top&quot; /> but it could be a form element or other (I think).

You can cause the browser to jump to a named element in code using document.location.href = &quot;#top&quot; - so you could add this to your grid anchor code, before the server round-trip.

WARNING: I have not checked any of the tag attributes or javascript in this message - it will be similar but not exactly as presented here.
WARNING 2: this browser scrolling may not help when you have a javascript scrollable content thingy as well!

http://www.websitedesign.co.uk

http://www.zentext.com

(Content Management)

 

[computergeek]

Hello,

Huh? Merlin, I don't think I understand you...

I have a grid that is embedded within a dynamic javascript scroller. Within this grid I have defined an anchor field to allow the user to click on the row to select it. Code for this column in the grid is similar to:
=Grid1.anchor([date_local])

When this anchor column is clicked it does a round trip to the server thereby placing you at the top of the grid within the dynamic scroller... you then have to scroll to the already selected row within the grid...which is within the scroller. Annoying. I am not sure how to implement your solution under these circumstances... after the server round trip I want to &quot;scroll down or page down within the grid to the selected row&quot;... I don't have a specific top or bottom, but want to scroll to this row... Clear as mud?

Any ideas would be appreciated. Thanks,

ComputerGeek

 

[MerlinB]

The # anchor can be useful for large page positioning between server round trips - but yes, not so helpful for this problem.

What you need is to provide a mechanism to tell the Javascript Scroller to move down by an amount when the page loads.

Perhaps by adding a client-side onload event for the form/page and in that event you could check the value of a hidden form field. Use this value to force the javascript scoller to scroll to that place - I don't know how this scroller works, but I am sure you could figure it out!

You would create the hidden field value during the server round-trip - however, you will need to adjust the grid's anchor() function as it does not normally provoke a user defined server-side event (ie one that you can add code to).
Perhaps you could use the rsRecordset_onrowenter event to set the hidden field value.

http://www.websitedesign.co.uk

http://www.zentext.com

(Content Management)

 

[peggasus88]

Hey 'computergeek'

Just letting you know that I still haven't found a solution, but I am going to try Merlin's suggestions later.

-- Peggy --

 

[computergeek]

Hi,

It's Computergeek. I found a solution... It is based on what Merlin said...but at the time I did not understand how to implement.
1. Added Javascript function
function bkMark(){
window.location.href = &quot;#tDay&quot;
}

2. Revised body tag
<body onload=&quot;bkMark()&quot;>
3. Revised my div tags style to contain style=&quot;overflow:auto&quot;
<div id=&quot;scroll3&quot; style=&quot;width:100%;height:150;background-color:white;overflow:auto&quot;>
4. Added code within creation of rows within my grid to set href link within the row for the current day:
<tr bgcolor=&quot;<%=displaycolor%>&quot;>
<%dim dtlocal
dtlocal = DateValue(Cdate(strlocaldate))

if dtlocal = currdate then%>
<td WIDTH=&quot;20%&quot; align=&quot;left&quot;><a name=&quot;tDay&quot;><%=strLocaldate%></a> </td>
<%else%>
<td WIDTH=&quot;20%&quot; align=&quot;left&quot;><%=strLocaldate%> </td>
<%end if%>

That's it!

Good luck to anyone who runs into the same problem

Computergeek