DataGrid - Paging - Refactor paging options synchronization

e2e/testcafe-devextreme/tests/dataGrid/common/pager.ts

@@ -39,23 +39,29 @@ test('Full size pager', async (t) => {
     .eql('Page 6 of 20 (100 items)')
     .expect(dataGrid.getDataCell(29, 2).element.textContent)
     .eql('29');
-  // set page sige to 10
+
+  // set page size to 10
   await t
     .click(pager.getPageSize(1).element)
-    .expect(dataGrid.getDataCell(10 * 6 - 1, 2).element.textContent)
-    .eql('59');
+    .expect(dataGrid.getDataCell(9, 2).element.textContent)
+    .eql('9')
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 1 of 10 (100 items)');
+
   // set page index 7
   await t
     .click(pager.getNavPage('7').element)
     .expect(dataGrid.getDataCell(10 * 7 - 1, 2).element.textContent)
     .eql('69')
     .expect(pager.getInfoText().textContent)
     .eql('Page 7 of 10 (100 items)');
+
   // navigate to prev page (6)
   await t
     .click(pager.getPrevNavButton().element)
     .expect(pager.getInfoText().textContent)
     .eql('Page 6 of 10 (100 items)');
+
   // navigate to next page (7)
   await t
     .click(pager.getNextNavButton().element)
@@ -75,12 +81,13 @@ test.meta({ browserSize: [350, 600] })('Compact pager', async (t) => {
   const pageIndexWidget = new TextBox(pager.getPageIndexWidget() as any);
   const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
   await t
-    .typeText(pageIndexWidget.input, '7', { replace: true })
     .click(pageSizeWidget.dropDownButton)
     .pressKey('down')
     .pressKey('enter')
     .expect(pageSizeWidget.input.value)
     .eql('10')
+    .typeText(pageIndexWidget.input, '7', { replace: true })
+    .pressKey('enter')
     .expect(dataGrid.getDataCell(10 * 7 - 1, 2).element.textContent)
     .eql('69');
 
@@ -238,6 +245,87 @@ test('Page index should not reset when scrolling while the grid is being refresh
   height: 440,
 }));
 
+test('Pager info should show page 1 of 1 after changing pageSize to \'all\' with virtual scrolling (T1327238)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const pager = dataGrid.getPager();
+
+  await t
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 5 of 10 (100 items)');
+
+  await t
+    .click(pager.getPageSize(1).element)
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 1 of 1 (100 items)');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [...new Array(100).keys()].map((i) => ({ id: i })),
+  keyExpr: 'id',
+  showBorders: true,
+  scrolling: {
+    mode: 'virtual',
+  },
+  paging: {
+    pageSize: 10,
+    pageIndex: 4,
+  },
+  pager: {
+    visible: true,
+    allowedPageSizes: [10, 'all'],
+    showPageSizeSelector: true,
+    showInfo: true,
+    showNavigationButtons: true,
+    displayMode: 'full',
+  },
+  height: 400,
+}));
+
+test('Pager info should show page 1 of 1 after changing pageSize to \'all\' and enabling virtual scrolling (T1327238)', async (t) => {
+  const dataGrid = new DataGrid('#container');
+  const pager = dataGrid.getPager();
+
+  await t
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 5 of 10 (100 items)');
+
+  await t
+    .click(pager.getPageSize(1).element)
+    .expect(pager.getInfoText().textContent)
+    .eql('Page 1 of 1 (100 items)');
+}).before(async () => createWidget('dxDataGrid', {
+  dataSource: [...new Array(100).keys()].map((i) => ({ id: i })),
+  keyExpr: 'id',
+  showBorders: true,
+  scrolling: {
+    mode: 'standard',
+  },
+  paging: {
+    pageSize: 10,
+    pageIndex: 4,
+  },
+  pager: {
+    visible: true,
+    allowedPageSizes: [10, 'all'],
+    showPageSizeSelector: true,
+    showInfo: true,
+    showNavigationButtons: true,
+    displayMode: 'full',
+  },
+  height: 400,
+  onOptionChanged: (e) => {
+    if (e.fullName === 'paging.pageSize') {
+      const setVirtual = e.value === 0;
+      const targetRenderingMode = setVirtual ? 'virtual' : 'standard';
+      const currentRenderingMode = e.component.option('scrolling.mode');
+      if (currentRenderingMode !== targetRenderingMode) {
+        e.component.beginUpdate();
+        e.component.option('scrolling.mode', targetRenderingMode);
+        e.component.repaint();
+        e.component.endUpdate();
+      }
+    }
+  },
+}));
+
 test('No error should occur if dataSource is not defined and pageIndex is promise chained (T1256070)', async (t) => {
   const dataGrid = new DataGrid('#container');
 

packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts

@@ -29,41 +29,6 @@ import gridCoreUtils from '../m_utils';
 import type { VirtualScrollController } from '../virtual_scrolling/m_virtual_scrolling_core';
 import { DataHelperMixin } from './m_data_helper_mixin';
 
-const changePaging = function (that, optionName, value) {
-  const dataSource = that._dataSource;
-
-  if (dataSource) {
-    if (value !== undefined) {
-      const oldValue = that._getPagingOptionValue(optionName);
-      if (oldValue !== value) {
-        if (optionName === 'pageSize') {
-          dataSource.pageIndex(0);
-        }
-        dataSource[optionName](value);
-
-        that._skipProcessingPagingChange = true;
-        that.option(`paging.${optionName}`, value);
-        that._skipProcessingPagingChange = false;
-        const pageIndex = dataSource.pageIndex();
-        that._isPaging = optionName === 'pageIndex';
-        return dataSource[optionName === 'pageIndex' ? 'load' : 'reload']()
-          .done(() => {
-            that._isPaging = false;
-            that.pageChanged.fire(pageIndex);
-          });
-      }
-      return Deferred().resolve().promise();
-    }
-    return dataSource[optionName]();
-  }
-
-  if (optionName === 'pageIndex' && value !== undefined) {
-    return Deferred().resolve().promise();
-  }
-
-  return 0;
-};
-
 export interface HandleDataChangedArguments {
   changeType?: 'refresh' | 'update' | 'loadError';
   isDelayed?: boolean;
@@ -112,7 +77,9 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
   protected _changes!: any[];
 
-  private readonly _skipProcessingPagingChange: boolean | undefined;
+  private _pagingDeferred: any;
+
+  private _skipProcessingPagingChange: boolean | undefined;
 
   private _useSortingGroupingFromColumns: boolean | undefined;
 
@@ -213,11 +180,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
     this._isPaging = false;
     this._currentOperationTypes = null;
-    this._dataChangedHandler = (e) => {
-      this._currentOperationTypes = this._dataSource.operationTypes();
-      this._handleDataChanged(e);
-      this._currentOperationTypes = null;
-    };
+    this._dataChangedHandler = this._handleDataChanged.bind(this);
     this._columnsChangedHandler = this._handleColumnsChanged.bind(this);
     this._loadingChangedHandler = this._handleLoadingChanged.bind(this);
     this._loadErrorHandler = this._handleLoadError.bind(this);
@@ -366,12 +329,23 @@ export class DataController extends DataHelperMixin(modules.Controller) {
 
             this._isPaging = changedPagingOptions.isPageIndexChanged;
 
-            dataSource.load().done(() => {
+            const loadPromise = changedPagingOptions.isPageSizeChanged
+              ? dataSource.reload()
+              : dataSource.load();
+
+            loadPromise.done(() => {
               this._isPaging = false;
               that.pageChanged.fire(pageIndex);
+              this._resolvePagingDeferred();
+            }).fail(() => {
+              this._resolvePagingDeferred();
             });
+            handled();
+            break;
           }
         }
+
+        this._resolvePagingDeferred();
         handled();
         break;
       case 'rtlEnabled':
@@ -588,6 +562,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {
           errors.log('W1005', that.component.NAME);
           that._applyFilter();
         } else {
+          this._currentOperationTypes = dataSource.operationTypes();
           that.updateItems(e, true);
         }
       }).fail(() => {
@@ -1170,6 +1145,8 @@ export class DataController extends DataHelperMixin(modules.Controller) {
     const changeType = change.changeType || 'refresh';
 
     change.changeType = changeType;
+    change.operationTypes = this._currentOperationTypes;
+    this._currentOperationTypes = null;
 
     if (dataSource) {
       const cachedProcessedItems = this._cachedProcessedItems;
@@ -1231,36 +1208,32 @@ export class DataController extends DataHelperMixin(modules.Controller) {
     }
   }
 
-  public updateItems(change?, isDataChanged?) {
-    change = change || {};
-    const that = this;
-    change.isFirstRender = !that.changed.fired();
+  public updateItems(change: any = {}, isDataChanged?: boolean) {
+    change.isFirstRender = !this.changed.fired();
 
-    if (that._repaintChangesOnly !== undefined) {
-      change.repaintChangesOnly = change.repaintChangesOnly ?? that._repaintChangesOnly;
-      change.needUpdateDimensions = change.needUpdateDimensions || that._needUpdateDimensions;
+    if (this._repaintChangesOnly !== undefined) {
+      change.repaintChangesOnly ??= this._repaintChangesOnly;
+      change.needUpdateDimensions ??= this._needUpdateDimensions;
     } else if (change.changes) {
-      change.repaintChangesOnly = that.option('repaintChangesOnly');
+      change.repaintChangesOnly = this.option('repaintChangesOnly');
     } else if (isDataChanged) {
-      const operationTypes = that.dataSource().operationTypes();
+      const operationTypes = this.dataSource().operationTypes();
 
-      change.repaintChangesOnly = operationTypes && !operationTypes.grouping && !operationTypes.filtering && that.option('repaintChangesOnly');
       change.isDataChanged = true;
-      if (operationTypes && (operationTypes.reload || operationTypes.paging || operationTypes.groupExpanding)) {
-        change.needUpdateDimensions = true;
-      }
+      change.repaintChangesOnly = operationTypes && !operationTypes.grouping && !operationTypes.filtering && this.option('repaintChangesOnly');
+      change.needUpdateDimensions = operationTypes && (operationTypes.reload || operationTypes.paging || operationTypes.groupExpanding);
     }
 
-    if (that._updateLockCount && !change.cancel) {
-      that._changes.push(change);
+    if (this._updateLockCount && !change.cancel) {
+      this._changes.push(change);
       return;
     }
 
-    that._updateItemsCore(change);
+    this._updateItemsCore(change);
 
     if (change.cancel) return;
 
-    that._fireChanged(change);
+    this._fireChanged(change);
   }
 
   public loadingOperationTypes() {
@@ -1273,10 +1246,6 @@ export class DataController extends DataHelperMixin(modules.Controller) {
    * @extended: virtual_scrolling, focus
    */
   protected _fireChanged(change) {
-    if (this._currentOperationTypes) {
-      change.operationTypes = this._currentOperationTypes;
-      this._currentOperationTypes = null;
-    }
     deferRender(() => {
       this.changed.fire(change);
     });
@@ -1625,11 +1594,19 @@ export class DataController extends DataHelperMixin(modules.Controller) {
    * @extended: virtual_scrolling
    */
   public pageIndex(value?) {
-    return changePaging(this, 'pageIndex', value);
+    if (value === undefined) {
+      return this._dataSource ? this._getPagingOptionValue('pageIndex') : 0;
+    }
+
+    return this._changePaging('pageIndex', value);
   }
 
   public pageSize(value?) {
-    return changePaging(this, 'pageSize', value);
+    if (value === undefined) {
+      return this._dataSource ? this._getPagingOptionValue('pageSize') : 0;
+    }
+
+    return this._changePaging('pageSize', value);
   }
 
   public isCustomLoading() {
@@ -1712,6 +1689,45 @@ export class DataController extends DataHelperMixin(modules.Controller) {
     }
   }
 
+  private _changePaging(optionName, value) {
+    const dataSource = this._dataSource;
+
+    if (!dataSource) {
+      return Deferred().resolve().promise();
+    }
+
+    const oldValue = this._getPagingOptionValue(optionName);
+    if (oldValue === value) {
+      return Deferred().resolve().promise();
+    }
+
+    const pagingOptions = {
+      ...this.option('paging'),
+      [optionName]: value,
+    };
+
+    if (optionName === 'pageSize') {
+      pagingOptions.pageIndex = 0;
+    }
+
+    this._resolvePagingDeferred();
+    // @ts-expect-error
+    this._pagingDeferred = new Deferred();
+
+    this._skipProcessingPagingChange = true;
+    this.option('paging', pagingOptions);
+    this._skipProcessingPagingChange = false;
+
+    return this._pagingDeferred.promise();
+  }
+
+  private _resolvePagingDeferred() {
+    if (this._pagingDeferred) {
+      this._pagingDeferred.resolve();
+      this._pagingDeferred = null;
+    }
+  }
+
   public skipProcessingPagingChange(fullName) {
     return this._skipProcessingPagingChange && (fullName === 'paging.pageIndex' || fullName === 'paging.pageSize');
   }

packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts

@@ -1004,18 +1004,19 @@ export const data = (Base: ModuleType<DataController>) => class VirtualScrolling
     };
   }
 
-  private _updateVisiblePageIndex(currentPageIndex?) {
+  private _updateVisiblePageIndex(value?: number): void {
     if (!this._rowsScrollController) {
       return;
     }
-    if (isDefined(currentPageIndex)) {
-      this._silentOption(VISIBLE_PAGE_INDEX, currentPageIndex);
+
+    if (isDefined(value)) {
+      this._silentOption(VISIBLE_PAGE_INDEX, value);
       this.pageChanged.fire();
       return;
     }
 
-    const viewPortItemIndex = this._rowsScrollController.getViewportItemIndex();
-    const newPageIndex = Math.floor(viewPortItemIndex / this.pageSize());
+    const viewportItemIndex = this._rowsScrollController.getViewportItemIndex();
+    const newPageIndex = Math.floor(viewportItemIndex / this.pageSize());
 
     if (this.pageIndex() !== newPageIndex) {
       this._silentOption(VISIBLE_PAGE_INDEX, newPageIndex);