diff --git a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts index 13846646c0ee..685d183926b7 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts @@ -916,7 +916,7 @@ class RowsView extends ColumnsView { that._scrollTop = 0; that._scrollLeft = -1; that._scrollRight = 0; - that._hasHeight = false; + that._hasHeight = undefined; that._contentChanges = []; dataController.loadingChanged.add((isLoading, messageText) => { that.setLoading(isLoading, messageText); 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 4f13231027a6..c8d6de5cd8c5 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 @@ -485,8 +485,6 @@ const VirtualScrollingRowsViewExtender = (function () { const changeType = change && change.changeType; const d: any = Deferred(); - this.throwHeightWarningIfNeed(); - const contentTable = contentElement.children().first(); if (changeType === 'append' || changeType === 'prepend') { this.waitAsyncTemplates().done(() => { @@ -749,7 +747,13 @@ const VirtualScrollingRowsViewExtender = (function () { this.callBase.call(this, isLoading, messageText); }, + // NOTE: warning won't be thrown if height was specified and then removed, + // because for some reason `_hasHeight` is not updated properly in this case throwHeightWarningIfNeed() { + if (this._hasHeight === undefined) { + return; + } + const needToThrow = !this._hasHeight && isVirtualPaging(this); if (needToThrow && !this._heightWarningIsThrown) { this._heightWarningIsThrown = true; @@ -763,6 +767,8 @@ const VirtualScrollingRowsViewExtender = (function () { that.callBase(); + this.throwHeightWarningIfNeed(); + if (that.component.$element() && !that._windowScroll && isElementInDom($element)) { that._windowScroll = subscribeToExternalScrollers($element, (scrollPos) => { if (!that._hasHeight && that._rowHeight) { diff --git a/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts b/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts index 722ad2cb1e16..e770cbe685b1 100644 --- a/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts +++ b/packages/devextreme/testing/testcafe/tests/dataGrid/scrolling.ts @@ -1,5 +1,6 @@ import { ClientFunction, Selector } from 'testcafe'; import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; +import { removeStylesheetRulesFromPage, insertStylesheetRulesToPage } from '../../helpers/domUtils'; import url from '../../helpers/getPageUrl'; import createWidget from '../../helpers/createWidget'; import DataGrid from '../../model/dataGrid'; @@ -1624,4 +1625,48 @@ test('Warning should be thrown if scrolling is virtual and height is not specifi scrolling: { mode: 'virtual', }, + dataSource: [ + { column: 'value' }, + ], +})); + +test('Warning should not be thrown if scrolling is virtual and height is specified with option', async (t) => { + const consoleMessages = await t.getBrowserConsoleMessages(); + const warningExists = !!consoleMessages?.warn.find((message) => message.startsWith('W1025')); + + await t.expect(warningExists).notOk(); +}).before(async () => createWidget('dxDataGrid', { + scrolling: { + mode: 'virtual', + }, + dataSource: [ + { column: 'value' }, + ], + height: 200, })); + +['height', 'max-height'].forEach((cssOption) => { + test(`Warning should not be thrown if scrolling is virtual and height is specified with css (${cssOption})`, async (t) => { + const consoleMessages = await t.getBrowserConsoleMessages(); + const warningExists = !!consoleMessages?.warn.find((message) => message.startsWith('W1025')); + + await t.expect(warningExists).notOk(); + }).before(async () => { + await insertStylesheetRulesToPage(` + #container { + ${cssOption}: 200px; + } + `); + + await createWidget('dxDataGrid', { + scrolling: { + mode: 'virtual', + }, + dataSource: [ + { column: 'value' }, + ], + }); + }).after(async () => { + await removeStylesheetRulesFromPage(); + }); +});