wijmowijmo-grid

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


While implementing virtual scrolling with 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 , provides smooth behaviour - once the data is appended, the previous last record stays in the view. Can we achieve similar kind of behaviour for ?


Solution

  • 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/