PageNavBar buttons position 1

[tvbruwae]

Hi

I'm using a grid linked to a recordset to display the contents of a database. I set the maximum amount of records to display to 20, so I get navigation buttons under the grid when more records are found. Is it possible to move these buttons above the grid or even better, to make a copy and place it on top of the page? This way, people wouldn't have to scroll down every time they want to go to the next page.

Thanks.

Tim

 

[JoeMost]

Hi,

I was just going to post this same question.
Have you figured out how to do it?

Thanks
Joe M.

joem@mediaone.net

 

[tvbruwae]

I haven't found a solution. I even asked the people at MSDN, but they just pointed me to the FAQs and forums. I'm no longer working on the project, but if you come across a solution I'd be happy to hear it.

 

[tvbruwae]

I received the solution from MerlinB, the programmer that wrote the FAQ's about these problems in Interdev. Look into the DATAGRID.ASP page, more specifically to the _DG_display function. At the end of the function, the PageNavbar is displayed. If you want it to appear on top, move or copy this code (from &quot;if (this._objPageNavbar != null ||...&quot; to Response.write('</TD></TR></TABLE>\n');&quot to the top of the function (right under &quot;if nCols > 0&quot. You may need to adjust some HTML tags or brackets, but this is the main idea to put the controls on top of the grid. The page number is returned as NAN since it's being calculated during the grid construction. Personally, I left it out, but there should be a way to handle this as well.

This solution helped me out, I hope it helps you too. Thanks goes to MerlinB for this.

 

[MerlinB]

I am pleased that it helped. Please be careful though - the button generating code should still be called at the end of the display routine - just that the button html string is to be added to the start of the grid html string (sHTML), and not at the end - else the Next button could be available when it should not.

For example, add a comment into the sHTML at the appropriate place before the grid code. Then when you get the html for the buttons, just do a string replace - replace the comment with the buttons (and page number) string.

It is very easy to add a property to the Grid code

function _DataGrid(strName,objParent)
{
// public members
this.id = strName;
this.name = strName;

//Place Nav buttons before grid?
this.bNavButtonBeforeGrid = false;


The grid Display routine can then leave the buttons at the end, or replace the comment place-holder string with the button string:


function _DG_display(bReturnText)
{

...other stuff...

var nCols = this.colData.length;
if (nCols > 0)
{
var strHTML = '<TABLE border=0 cellpadding=0 cellspacing=0><TR><TD><!--NAV-->\n';

...other stuff..

if (this._objPageNavbar != null
|| this._objRecordNavbar != null
|| this.hasPageNumber)
{ // display navbars and/or page numbering
strHTMLnav += '</TD></TR>\n<TR><TD align=center>\n';
strHTMLnav += '<TABLE width=100% border=0><TR>\n';
var nPages = 1;

...and so on - change sHTML to sHTMLnav...
...You could test if there is more than 1 page
if NOT then do NOT output the NAV BUTTONS!!!!
...At the end of the Nav Button code
you can test your new property...

if (this.bNavButtonBeforeGrid == true) {
sHTML.replace('<!--NAV-->',sHTMLnav);
} else {
...same as old code
}


Well, I hope this makes some sense!


Then in your page code, you simply add.....

sub thisPage_onenter()
grdMyGrid.bNavButtonBeforeGrid = true


This property will not pop-up in the editor - but it does exist now! Honest!

http://www.websitedesign.co.uk

http://www.zentext.com

(Content Management)

 

[tvbruwae]

One more question : is it possible to maintain the position on the page when scrolling through recordset pages? What I mean is, when scrolling the page to a certain position (for example the middle of the grid), is it possible to jump to the middle of the grid when jumping to the next page (instead of showing the top of the page)?

 

[MerlinB]

Try adding one or more <a name=&quot;fred&quot;> tags in suitable places.
Use dynamic html (say in the body/onload) to jump to an anchor:
document.location.href = sNameOfAnchor

The body/onload function (client side JavaScript) would need to obtain the appropriate anchor name from, say, a hidden field or a static variable (e.g. sNameOfAnchor above) that you write to the page from the Server code. Remember to include a hash (#) mark before the anchor name!

Or you could set the focus to a form element.

Or you could use the scroll(x, y) method - though where you would get the appropriate x, y values from I am not sure (see below).

Or you could use the scrollIntoView() method [IE only].

The following code emulates the scrollIntoView() method for Netscape 6 (not 4) and uses the scroll() method. [also shows how to extend the object model for built in objects via the 'prototype' property]:

** WRITTEN BY MARTIN HONNEN from

http://www.faqts.com

**

Apr 16th, 2001 16:00

Here is the code. I only tested for the img element and the layer but I believe it is going to work for other elements as well (as long as NN6 is delivering the correct offsetLeft/offsetTop values).

<html>
<head>
<script language=&quot;JavaScript1.5&quot;>
function HTMLElement_getPageCoords () {
var coords = {x: 0, y: 0};
var el = this;
do {
coords.x += el.offsetLeft;
coords.y += el.offsetTop;
}
while ((el = el.offsetParent));
return coords;
}
HTMLElement.prototype.getPageCoords = HTMLElement_getPageCoords;
function HTMLElement_scrollIntoView () {
var coords = this.getPageCoords();
window.scrollTo (coords.x, coords.y);
}
HTMLElement.prototype.scrollIntoView = HTMLElement_scrollIntoView;
</script>
</head>
<body>
<input type=&quot;button&quot;
value=&quot;scroll image into view&quot;
onclick=&quot;document.imageName.scrollIntoView();&quot;
/>
<input type=&quot;button&quot;
value=&quot;scroll layer into view&quot;
onclick=&quot;document.getElementById('aLayer').scrollIntoView();&quot;
/>
<div id=&quot;aLayer&quot;
style=&quot;position: absolute;
left: 1500px;
top: 400px;
background-color: yellow;&quot;
>
Kibology for all
</div>
<script>
for (var i = 0; i < 30; i++)
document.write(i + ' Kibology<br \/>');
</script>
All for Kibology
<img name=&quot;imageName&quot; src=&quot;kiboInside.gif&quot; />
</body>
</html>

http://www.websitedesign.co.uk

http://www.zentext.com

(Content Management)

 

[tvbruwae]

Looks like I can even choose... I think I'll try the setfocus() or anchor approach. Thanks, I won't get this project any better now!