Scrolling sets to top once new data is appended to wijmo-grid in virtual scrolling

Question

While implementing virtual scrolling with wijmo grid, as per the below code, when the new data is appended to data array (once we scroll and reach to the last record of the grid), the scroll gets reset to the initial position.

Check this JSFiddle

scrollPositionChanged: function(s, e) {

    // if we're close to the bottom, add 10 items
    if (s.viewRange.bottomRow >= s.rows.length - 1) {
            addData(data, 20);
    s.collectionView.refresh();
  }
}

Any idea how can we stop this behaviour? Other grids like slickgrid, ag-grid provides smooth behaviour - once the data is appended, the previous last record stays in the view. Can we achieve similar kind of behaviour for wijmo-grid?

Answer 1

You can save scroll postion before refreshing the grid and restore the same after scroll.

var pos;

var grid = new wijmo.grid.FlexGrid('#flex', {
  itemsSource: data,
  scrollPositionChanged: function (s, e) {
    // if we're close to the bottom, add 10 items
    if (s.viewRange.bottomRow >= s.rows.length - 1) {
      addData(data, 20);
      //save current scroll postion
      pos = grid.scrollPosition;
      s.collectionView.refresh();
    }

    //restore scroll position
    if (pos) {
      s.scrollPosition = Object.assign({}, pos);
      pos = null;
    }
  }
});

Check the updated fiddle:- http://jsfiddle.net/797tjc5u/

Answer 2

You need to store scroll position before making http request and set back once items have been added to FlexGrid.

Please refer to the following updated fiddle with http service delay simulation:

[http://jsfiddle.net/hwr2ra1q/41/][1]