Infinite Scroll not working when reusing a grid

[PhilBroadbent]

Infinite scroll doesn't seem to work when reusing a grid which previously hit the end.... Makes sense that the callback would stop triggering if the listener is unregistered or something, but how to make this work?

I have a search form with some parameters in, i click search and then it queries the database and returns results which are put into this grid. I do a search, look at the data/scroll etc, then do another search. The data in the grid is wiped and the new data put in. (I.e. using same grid) - from this I notice 2 problems:

1. When I perform a second database search the scroll position does not reset to the top – and without using a new directive (cellNav) to scrollTo, I don’t know how.

2. Similar to this, infinite scrolling seems to stop working when you do a new search.

Is there a way to recreate the DOM element, or get the grid refreshed (do it's initialization and call registerGridApi again)?

[JoaoQuinteira]

I think I fixed this in my project by calling $scope.gridApi.infiniteScroll.dataLoaded(); when I fill the data grid array(in my promise.then(function (data) {...}) method), instead of calling it inside the gridApi.infiniteScroll.on.needLoadMoreData(...) method.

[rvignacio]

I fixed the problem by adding an empty needLoadMoreDataTop (note the Top at the end) handler

gridAPI.infiniteScroll.on.needLoadMoreDataTop($scope, function InfiniteScrollTopHandler () {
    // Notify the infinite scroll module.
    gridAPI.infiniteScroll.dataLoaded();
    return;
});

I'm having an issue related to this feature: when I change the data collection, the grid scrolls and hides the first row. Is there a way to disable the infinite scroll up?

[PaulL1]

Sounds like the original issue is resolved?

[rvignacio]

@PaulL1, it is not really resolved, what happens here is that when redefining the data array, the scroll is set to 0 and the grid triggers the needLoadMoreDataTop event. Correct me if I'm wrong, but I believe in this case the event shouldn't be emitted.

[PaulL1]

OK, then could you provide a plunker and some recreation instructions so that I can take a look?

[rvignacio]

Sure, here it is (I used the tutorial as a template, sorry I didn't posted it with my comment before 😛). Try to scroll up and then click the "Refresh Data" button, the scroll should be back to 0, but it is a bit down.

[PaulL1]

OK, I think what's happening is that the scroll % is staying the same, and the size of the data set has changed. So you had data from -100 to +100, and you were at 50% scroll. You change the data to be 0 to +100, and it's still at 50% scroll, but that's now about row 50.

I think what you're looking for is some sort of reset method. You can do that with cellNav (if you happened to be using cellNav), and just call scrollTo row 0. Otherwise I think you could use an ng-if to clobber and recreate your grid. I'm thinking about doing some work on infinite scroll because I don't like it much, and I could look at this at the same time. I kinda feel like the code isn't clean in the way it behaves.

[rvignacio]

Thanks for the heads up, I'll go with the cellNav and scrollTo method.

[PaulL1]

I've made some changes to infinite scroll that I think will result in this working cleanly. I'll check the plunker once the merge comes through to release.

[PaulL1]

Looks like they don't really clean it up - but it isn't helped by the plunker being based on the old tutorial. Perhaps take a look at the new structure.

[mattsawyer77]

in case this helps anyone, I was able to resolve this issue in my case by doing the following:

• set gridOptions.data to []
• call gridApi.infiniteScroll.dataLoaded()
• call gridApi.infiniteScroll.resetScroll(false, false)
• proceed to get the first page of data