How to Check the Scroll Position of a Grid

How to Use

Fork to new workspace to use.

Description

There are a variety of ways to solve this problem. One way to do this would be to reference the current top record versus some determined amount. The following example checks for when the user is within 50 rows (5%) of the end of a 1000 row grid. Example code:

// Logging values used for reference.
console.log(getObj('Grid1').grid.getRecordCount(), row, Math.floor(getObj('Grid1').grid.getRecordCount() * .05));
if(getObj('Grid1').grid.getRecordCount()-row < Math.floor(getObj('Grid1').grid.getRecordCount() * .05)) {
  console.log('Within 5% of end of records.');
}

An alternate way to do this would be to reference the scrollbar's scrollHeight versus the current scrollTop. The following example shows the use of scrollHeight and scrollTop to check for when the user has scrolled within 3 "pages" (number of rows displayed at once) of the end of records.

// Grid "page" scroll height.
var gridPgH = parseInt(getObj('Grid1').style.height);
// Scrollbar scroll height minus one page to get the actual scroll height to the end of the last grid "page". 
// The +36 is because it kept scrolling to -36 and I wanted it to scroll to 0.
var scrollH = document.getElementsByClassName('pui-scrollbar blueprint-grid-pui-scrollbar')[0].scrollHeight - gridPgH + 36;
// Current scroll height position of the scrollbar.
var scrollT = document.getElementsByClassName('pui-scrollbar blueprint-grid-pui-scrollbar')[0].scrollTop;
// Logging values used for reference.
console.log('Scroll Event: ', 'G-' + gridPgH, 'H-' + scrollH, 'T-' + scrollT, 'D-' + (scrollH - scrollT));
// If within 3 pages of the end of the subfile.
if (scrollH - scrollT < gridPgH * 3) {
  // Log distance from end of records.
  console.log('Less than ' + (3 * getObj('Grid1').pui.properties['number of rows']) + ' rows from end of records.');
}

To check this out in action, please check out the NodeRun workspace I set up for this example. Please note that to see the console logs, you'll need to open your browser's developer tools and view the browser console. This is accessible in most modern browsers by pressing Ctrl + Shift + I. I'll add this response to the workspace readme file in case the formatting of the comment is difficult to work read.

• IDE: https://noderun.com/ide/megan_bond/check-scroll-position/
• Run: https://noderun.com/run/megan_bond/check-scroll-position/

I hope this helps (and the comment stays formatted)! If you have any questions or concerns, please let us know and we'll be happy to help!

Thanks,

Megan Bond Technical Support Specialist Profound Logic Software support@profoundlogic.com

Author: megan.bond