scroll to top record

[argo]

Basic question, is there a way to get the grid to scroll to the top record?

I'm using a paginated grid that also has a vertical scroll bar. Whenever I programatically filter the records (I call "refreshDataAndView" afterward) or the user goes to another page in the recordset, the grid does not automatically scroll back to the top record. This is problematic because if the last page has only a few records, when they get to the last page only 1 record is initially shown. This makes it appear that only 1 record exists when there are actually more than 1. The user has to manually scroll up in order to see the rest of the records on the page. When I filter questions and call "refreshDataAndView", I'd like it to scroll to the top as well.

[paramvir]

Good question and yes there is a way to scroll the grid programatically.

Pro version has an easy to use method to scroll the view  http://paramquery.com/pro/api#method-scrollRow.

Both Pro and base version use pqScrollbar component which is convenient to control the scrolling. It's documentation is long overdue. I would update its documentation.

Meanwhile you can use undocumented method in pqGrid

bringRowIntoView({rowIndxPage: rowIndxPage})

Please let me know whether it served your purpose.

[argo]

That's good info, thank you. I'll try to implement the undocumented bringRowIntoView when I filter the data. But I don't see an API event specific to changing the page (next page or previous page). I was looking for some kind of a pageChange() event.

When the page is changed, would it be proper to hook into the refresh() or render() events in order to execute bringRowIntoView? I'm just concerned about unintended consequences of monitoring the change of page in a non-standard way.

Thanks again for the info!

[paramvir]

I've updated documentation for pqPager and pqScrollbar. You may use the change event of pqPager


http://paramquery.com/api/pager#event-change

[argo]

Only partial success using this.

I did successfully setup the event listener on the pager. I did so using the following (qgrid is my pqgrid object BTW):

var $qscroller = $("div.pq-pager",qgrid).pqPager();
$qscroller.on("pqpagerchange",function(event,ui) {
    scrollToTop(); // call function to scroll to the top of the page
});

Then I tried to use the undocumented pqGrid method "bringRowIntoView" that you mentioned. However, this line fails:
qgrid.pqGrid("bringRowIntoView","{rowIndxPage:1}");

It fails with the following error:
"Object doesn't support property or method 'pqScrollBar'".
The error is at line 9, character 49093 in the minified pqgrid.min.js file.

As you noted, it's an undocumented feature, but am I calling the "bringRowIntoView" method properly?

[argo]

Nevermind! As soon as I re-read what I posted I saw the coding mistake. Also, should have been using 0, not 1, as the row index is zero based.

For anyone that needs to know, I mistakenly put quotes around the argument. The working code that will scroll to the top is:

pqGrid("bringRowIntoView",{rowIndxPage:0});

This solution is now working based on the documentation you provided. Thanks again for letting me know about the undocumented method and the pager API.

[paramvir]

You are welcome!