diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png new file mode 100644 index 000000000000..6b8fd751c600 Binary files /dev/null and b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/etalons/T1293839-grid-no-data-text-rendered (fluent.blue.light).png differ diff --git a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts index b0114896f015..85171e6c6bf7 100644 --- a/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts +++ b/e2e/testcafe-devextreme/tests/dataGrid/common/markup/noDataText.ts @@ -1,5 +1,6 @@ import { createScreenshotsComparer } from 'devextreme-screenshot-comparer'; import DataGrid from 'devextreme-testcafe-models/dataGrid'; +import List from 'devextreme-testcafe-models/list'; import url from '../../../../helpers/getPageUrl'; import { createWidget } from '../../../../helpers/createWidget'; import { testScreenshot } from '../../../../helpers/themeUtils'; @@ -8,6 +9,58 @@ fixture.disablePageReloads`No Data` .page(url(__dirname, '../../../container.html')); const GRID_CONTAINER = '#container'; +const OVERLAY_SELECTOR = '.dx-overlay-wrapper'; + +test('The noDataText element should be rendered when a lookup column is filtered (T1293839)', async (t) => { + // arrange + const { takeScreenshot, compareResults } = createScreenshotsComparer(t); + const dataGrid = new DataGrid(GRID_CONTAINER); + const filterRow = dataGrid.getHeaders().getFilterRow(); + const nameFilterCell = filterRow.getFilterCell(0); + const nameFilterEditor = nameFilterCell.getEditorInput(); + const lookupFilterCell = filterRow.getFilterCell(1); + + // act + await t.click(lookupFilterCell.element); + const lookupList = new List(OVERLAY_SELECTOR); + const lookupItem = lookupList.getItem(1); + await t.click(lookupItem.element); + await t.typeText(nameFilterEditor.element, 'test'); + + // assert + await t + .expect(dataGrid.isReady()) + .ok(); + + await testScreenshot(t, takeScreenshot, 'T1293839-grid-no-data-text-rendered.png', { element: dataGrid.element }); + await t + .expect(compareResults.isValid()) + .ok(compareResults.errorMessages()); +}).before(async () => { + await createWidget('dxDataGrid', { + dataSource: [ + { ID: 1, Name: 'John', Lookup: 1 }, + { ID: 2, Name: 'Jane', Lookup: 2 }, + ], + keyExpr: 'ID', + columns: ['Name', { + dataField: 'Lookup', + lookup: { + dataSource: [ + { ID: 1, Text: 'Item 1' }, + { ID: 2, Text: 'Item 2' }, + ], + valueExpr: 'ID', + displayExpr: 'Text', + }, + }], + showBorders: true, + filterRow: { visible: true }, + onEditorPreparing(e) { + e.updateValueTimeout = 0; + }, + }); +}); test('The noDataText element should be centered (T1178289)', async (t) => { const { takeScreenshot, compareResults } = createScreenshotsComparer(t); 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 64f8a1f49c34..54d8693d62c7 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 @@ -1633,7 +1633,7 @@ export class DataController extends DataHelperMixin(modules.Controller) { } public isCustomLoading() { - return this._isCustomLoading; + return this._isCustomLoading || this._dataSource?.isCustomLoading(); } public beginCustomLoading(messageText?: string) { diff --git a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts index f48397602623..c62fe4ba1d6d 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/m_utils.ts @@ -212,7 +212,7 @@ export default { const noDataClass = that.addWidgetPrefix(NO_DATA_CLASS); let noDataElement = $element.find(`.${noDataClass}`).last(); const isVisible = this._dataController.isEmpty(); - const isLoading = this._dataController.isLoading(); + const isDefaultLoading = this._dataController.isLoading() && !this._dataController.isCustomLoading?.(); if (!noDataElement.length) { noDataElement = $('') @@ -223,7 +223,7 @@ export default { noDataElement.appendTo($element); } - if (isVisible && !isLoading) { + if (isVisible && !isDefaultLoading) { noDataElement .removeClass('dx-hidden') .text(that._getNoDataText());