DataGrid - Pager - Show correct pageIndex when virtualScrolling is enabled on pageSize change (#33412)

Co-authored-by: anna.shakhova <anna.shakhova@devexpress.com>

Author: Tucchhaa

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

@@ -238,6 +238,85 @@ 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,
+  },
+  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,
+  },
+  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

@@ -36,12 +36,12 @@ const changePaging = function (that, optionName, value) {
     if (value !== undefined) {
       const oldValue = that._getPagingOptionValue(optionName);
       if (oldValue !== value) {
-        if (optionName === 'pageSize') {
+        that._skipProcessingPagingChange = true;
+        if (optionName === 'pageSize' && value === 0) {
           dataSource.pageIndex(0);
+          that.option('paging.pageIndex', 0);
         }
         dataSource[optionName](value);
-
-        that._skipProcessingPagingChange = true;
         that.option(`paging.${optionName}`, value);
         that._skipProcessingPagingChange = false;
         const pageIndex = dataSource.pageIndex();
@@ -213,11 +213,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);
@@ -588,6 +584,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 +1167,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 +1230,35 @@ 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 = 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;
+      change.repaintChangesOnly = operationTypes && !operationTypes.grouping && !operationTypes.filtering && this.option('repaintChangesOnly');
+
       if (operationTypes && (operationTypes.reload || operationTypes.paging || operationTypes.groupExpanding)) {
         change.needUpdateDimensions = true;
       }
     }
 
-    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 +1271,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);
     });

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);

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataController.tests.js

@@ -3242,8 +3242,8 @@ QUnit.module('Paging', { beforeEach: setupPagingModule, afterEach: teardownPagin
         // assert
         assert.equal(this.dataController.items().length, 3);
         assert.equal(this.dataController.pageCount(), 3);
-        assert.equal(this.dataController.pageIndex(), 0);
-        assert.deepEqual(this.dataController.items()[0].values, ['Alex', 215]);
+        assert.equal(this.dataController.pageIndex(), 1);
+        assert.deepEqual(this.dataController.items()[0].values, ['Dan3', 153]);
 
         // T262949
         assert.equal(countCallPageChanged, 1, 'count call pageChanged');

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.realControllers.tests.js

@@ -671,7 +671,7 @@ QUnit.module('Real DataController and ColumnsController', {
         this.cellValue(0, 2, '5');
         this.saveEditData();
         // assert
-        assert.equal(focusedRowChangedFiresCount, 2, 'onFocusedRowChanged fires count');
+        assert.equal(focusedRowChangedFiresCount, 1, 'onFocusedRowChanged fires count');
 
         // act
         this.refresh();