Extend scrollTo to show row in middle of grid

[brockj]

Would it be possible to add a new flag to CellNav.scrollTo that would indicate that you don't want the row on the top/bottom, but in the middle of the grid?

I added the following code to scrollToIfNecessary and it seemed to work, but i didn't fully understand how that code was working

pixelsToSeeRow += (bottomBound - topBound) / 2;

[brockj]

The above change only worked when scrolling downwards. I had to add

pixelsToSeeRow -= (bottomBound - topBound) / 2;

to handle the downwards case

[nkoterba]

+1 here. We are showing about 30-60 rows in a virtual grid. We'd really like when we call scrollTo to have it show row in the middle of the grid or even allow us to define a specific offset from top of grid.

Right now the scrollTo behavior is somewhat odd:

1. If the row you are scrolling to is below your current rows, it will just scroll enough to show the row as the bottom or last row.
2. If the row you are scrolling to is above your current rows, it will just scroll enough to show the row as the top or first row.

I think it would be better to always:

• Scroll row to center of grid
• Scroll row to top of grid
• Possibly allow users the ability to choose TOP, BOTTOM, CENTER
• Possibly allow users to choose an offset when using one of the TOP, BOTTOM, CENTER items above.

[nkoterba]

^ With the above, obviously if the scroll bar is already at the top or bottom of the grid, then there's no scrolling to do.

As an "immediate" fix (until enhancement gets added and tested and it gets officially released), users can "simulate" scrolling to the middle by changing the actual "row" they scroll to.

Here is code I used.
lineNumber = the row or line number to scroll to
rowHeight = the row height I set for each row

// Determine how many rows are approximately displayed on screen; then take half that
var numRowsInHalfViewport = Math.floor((vm.gridApi.grid.getViewportHeight() / rowHeight) / 2);

// Determine if we will have to scroll up or down from the current position to reach lineNumber
// since UI-Grid scroll behavior changes on whether we are scrolling up to a row or down to a row
var willScrollUp = lineNumber * rowHeight >
    (vm.gridApi.grid.renderContainers.body.prevScrollTop + vm.gridApi.grid.getViewportHeight());

// This value will not be the original lineNumber we want to scroll to but an "offset" that
// will make the original lineNumber appear in the middle of the grid
var centeredLineNumber;

if (willScrollUp) { // If we are scrolling up, then add "extra" rows to lineNumber
    centeredLineNumber = lineNumber + numRowsInHalfViewport;

    // Make sure we bound the centeredLineNumber to max index (vm.gridOptions.data.length-1)
    centeredLineNumber = (centeredLineNumber >= vm.gridOptions.data.length) ?
        vm.gridOptions.data.length - 1 : centeredLineNumber;
}
else { // If we are scrolling down, then subtract "extra" rows to lineNumber
    centeredLineNumber = lineNumber - numRowsInHalfViewport;

    // Make sure we bound the centeredLineNumber to min index (0)
    centeredLineNumber = (centeredLineNumber < 0) ? 0 : centeredLineNumber;
}

// Now scroll to the pseudo-row number
vm.gridApi.core.scrollTo(vm.gridOptions.data[centeredLineNumber]);

[nkoterba]

Slight update/bug fix to code above for willScrollUp logic. Need to scroll up if row is below mid-way point of viewport instead of below and completely outside of viewport:

// Determine how many rows are approximately displayed on screen; then take half that
    var numRowsInHalfViewport = Math.floor((vm.gridApi.grid.getViewportHeight() / rowHeight) / 2);

    // Determine if we will have to scroll up or down from the current position to reach lineNumber
    // since UI-Grid scroll behavior changes on whether we are scrolling up to a row or down to a row
    var willScrollUp = lineNumber * rowHeight >
        (vm.gridApi.grid.renderContainers.body.prevScrollTop + Math.floor(vm.gridApi.grid.getViewportHeight()/2));

    // This value will not be the original lineNumber we want to scroll to but an "offset" that
    // will make the original lineNumber appear in the middle of the grid
    var centeredLineNumber;

    if (willScrollUp) { // If we are scrolling up, then add "extra" rows to lineNumber
        centeredLineNumber = lineNumber + numRowsInHalfViewport;

        // Make sure we bound the centeredLineNumber to max index (vm.gridOptions.data.length-1)
        centeredLineNumber = (centeredLineNumber >= vm.gridOptions.data.length) ?
        vm.gridOptions.data.length - 1 : centeredLineNumber;
    }
    else { // If we are scrolling down, then subtract "extra" rows to lineNumber
        centeredLineNumber = lineNumber - numRowsInHalfViewport;

        // Make sure we bound the centeredLineNumber to min index (0)
        centeredLineNumber = (centeredLineNumber < 0) ? 0 : centeredLineNumber;
    }

    // Now scroll to the pseudo-row number
    vm.gridApi.core.scrollTo(vm.gridOptions.data[centeredLineNumber]);

[stasberkov]

+1 We also need this functionality!

[MrCelestis]

+1

[AntonPhilimonov]

+1

[Anton2478]

+1 I really need it as well.