diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/pager.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/pager.ts index 9b7973b975dd..c776369d4d95 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/pager.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/pager.ts @@ -238,6 +238,41 @@ 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', async (t) => { + const dataGrid = new DataGrid('#container'); + const pager = dataGrid.getPager(); + + await t + .click(pager.getNavPage('5').element) + .expect(pager.getNavPage('5').selected) + .ok() + .expect(pager.getInfoText().textContent) + .eql('Page 5 of 10 (50 items)'); + + await t + .click(pager.getPageSize(1).element) + .expect(pager.getInfoText().textContent) + .eql('Page 1 of 1 (50 items)'); +}).before(async () => createWidget('dxDataGrid', { + dataSource: [...new Array(50).keys()].map((i) => ({ id: i })), + keyExpr: 'id', + showBorders: true, + scrolling: { + mode: 'virtual', + }, + paging: { + pageSize: 5, + }, + pager: { + visible: true, + allowedPageSizes: [5, 'all'], + showPageSizeSelector: true, + showInfo: true, + showNavigationButtons: true, + }, + height: 400, +})); + test('No error should occur if dataSource is not defined and pageIndex is promise chained (T1256070)', async (t) => { const dataGrid = new DataGrid('#container'); diff --git a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts index e8fe7487c881..d46e454abbc7 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts @@ -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); @@ -561,6 +557,7 @@ export class DataController extends DataHelperMixin(modules.Controller) { let isAsyncDataSourceApplying = false; this._useSortingGroupingFromColumns = false; + this._currentOperationTypes = this.dataSource().operationTypes(); if (dataSource && !that._isDataSourceApplying) { that._isDataSourceApplying = true; @@ -1170,6 +1167,7 @@ export class DataController extends DataHelperMixin(modules.Controller) { const changeType = change.changeType || 'refresh'; change.changeType = changeType; + change.operationTypes = this._currentOperationTypes; if (dataSource) { const cachedProcessedItems = this._cachedProcessedItems; @@ -1231,36 +1229,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 +1267,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); }); diff --git a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts index c2717eba9ca3..5a30993d5fa6 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts @@ -1004,18 +1004,19 @@ export const data = (Base: ModuleType) => 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);