fix(react-grid): correctly calculate rows to load when sorting/filter…

…ing in lazy loading mode (#2186)

packages/dx-grid-core/src/plugins/virtual-table-state/helpers.test.ts

@@ -1,6 +1,6 @@
 import {
   mergeRows, calculateRequestedRange, rowToPageIndex,
-  recalculateBounds, trimRowsToInterval,
+  recalculateBounds, trimRowsToInterval, getForceReloadInterval,
 } from './helpers';
 import { intervalUtil } from './utils';
 import { createInterval, generateRows, createVirtualRows } from './test-utils';
@@ -326,4 +326,20 @@ describe('VirtualTableState helpers', () => {
       });
     });
   });
+
+  describe('#getForceReloadInterval', () => {
+    it('should return 2 pages if loaded interval is less than 2 pages', () => {
+      expect(getForceReloadInterval({ start: 100, end: 200 }, 100, 1000)).toEqual({
+        start: 100,
+        end: 300,
+      });
+    });
+
+    it('should return loaded interval if it is more than 2 pages', () => {
+      expect(getForceReloadInterval({ start: 100, end: 400 }, 100, 1000)).toEqual({
+        start: 100,
+        end: 400,
+      });
+    });
+  });
 });

packages/dx-grid-core/src/plugins/virtual-table-state/helpers.ts

@@ -106,3 +106,16 @@ export const getAvailableRowCount: PureComputed<[boolean, number, number, number
     ? Math.max(newCount, lastCount)
     : totalRowCount
 );
+
+export const getForceReloadInterval: PureComputed<[Interval, number, number], Interval> = (
+  { start, end: intervalEnd }, pageSize, totalRowCount,
+) => {
+  const end = Math.min(
+    Math.max(start + pageSize * 2, intervalEnd),
+    totalRowCount,
+  );
+  return {
+    start,
+    end,
+  };
+};

packages/dx-react-grid/src/plugins/virtual-table/virtual-table-state.tsx

@@ -3,7 +3,7 @@ import { Getter, Action, Plugin, Getters, Actions } from '@devexpress/dx-react-c
 import {
   recalculateBounds, calculateRequestedRange, virtualRowsWithCache,
   trimRowsToInterval, intervalUtil, emptyVirtualRows, plainRows, loadedRowsStart,
-  VirtualRows, Interval,
+  VirtualRows, Interval, getForceReloadInterval,
 } from '@devexpress/dx-grid-core';
 import { VirtualTableStateProps, VirtualTableStateState } from '../../types';
 
@@ -34,18 +34,20 @@ class VirtualTableStateBase extends React.PureComponent<VirtualTableStateProps,
 
   requestNextPageAction = (
     { referenceIndex, forceReload },
-    { virtualRows, skip }: Getters,
+    { virtualRows }: Getters,
   ) => {
     const { pageSize, totalRowCount } = this.props;
 
     let newBounds;
     let requestedRange;
     let actualVirtualRows = virtualRows;
+    const loadedInterval = intervalUtil.getRowsInterval(virtualRows);
     if (forceReload) {
-      newBounds = requestedRange = { start: skip, end: skip + pageSize! * 2 };
+      newBounds = requestedRange = getForceReloadInterval(
+        loadedInterval, pageSize!, totalRowCount,
+      );
       actualVirtualRows = emptyVirtualRows;
     } else {
-      const loadedInterval = intervalUtil.getRowsInterval(virtualRows);
       newBounds = recalculateBounds(referenceIndex, pageSize!, totalRowCount);
       requestedRange = calculateRequestedRange(
         loadedInterval, newBounds, referenceIndex, pageSize!,