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/views/m_rows_view.ts b/packages/devextreme/js/__internal/grids/grid_core/views/m_rows_view.ts index 90320c2c1edd..41d02b517cbe 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 @@ -148,6 +148,9 @@ export class RowsView extends ColumnsView { this._contentChanges = []; this._dataController.loadingChanged.add((isLoading, messageText) => { this.setLoading(isLoading, messageText); + if (!isLoading) { + this.renderNoDataText(); + } }); this._dataController.dataSourceChanged.add(() => {