From 1f5753fb5f805a263b20da4fd877f4f1035a6124 Mon Sep 17 00:00:00 2001 From: Alyar Date: Fri, 22 Sep 2023 15:04:42 +0400 Subject: [PATCH] DataGrid: Fix onContentReady was not called when the grid is rendered in DropDownBox (T1188486) (#25622) Co-authored-by: Alyar <> --- .../grids/grid_core/views/m_grid_view.ts | 54 +++++++++++-------- .../dataGrid.tests.js | 25 +++++++++ 2 files changed, 57 insertions(+), 22 deletions(-) diff --git a/js/__internal/grids/grid_core/views/m_grid_view.ts b/js/__internal/grids/grid_core/views/m_grid_view.ts index 1bcbae95ccff..901987601ccd 100644 --- a/js/__internal/grids/grid_core/views/m_grid_view.ts +++ b/js/__internal/grids/grid_core/views/m_grid_view.ts @@ -53,37 +53,52 @@ const restoreFocus = function (focusedElement, selectionRange) { const resizingControllerMembers = { _initPostRenderHandlers() { - const dataController = this._dataController; - if (!this._refreshSizesHandler) { this._refreshSizesHandler = (e) => { - dataController.changed.remove(this._refreshSizesHandler); + // @ts-expect-error + let resizeDeferred = new Deferred().resolve(null); + const changeType = e?.changeType; + const isDelayed = e?.isDelayed; + const needFireContentReady = changeType + && changeType !== 'updateSelection' + && changeType !== 'updateFocusedRow' + && changeType !== 'pageIndex' + && !isDelayed; + + this._dataController.changed.remove(this._refreshSizesHandler); if (this._checkSize()) { - this._refreshSizes(e); + resizeDeferred = this._refreshSizes(e); + } + + if (needFireContentReady) { + when(resizeDeferred).done(() => { + this._setAriaLabel(); + this.fireContentReadyAction(); + }); } }; // TODO remove resubscribing - dataController.changed.add(() => { - dataController.changed.add(this._refreshSizesHandler); + this._dataController.changed.add(() => { + this._dataController.changed.add(this._refreshSizesHandler); }); } }, _refreshSizes(e) { - let resizeDeferred; - const that = this; - const changeType = e && e.changeType; - const isDelayed = e && e.isDelayed; - const items = that._dataController.items(); + // @ts-expect-error + let resizeDeferred = new Deferred().resolve(null); + const changeType = e?.changeType; + const isDelayed = e?.isDelayed; + const items = this._dataController.items(); if (!e || changeType === 'refresh' || changeType === 'prepend' || changeType === 'append') { if (!isDelayed) { - resizeDeferred = that.resize(); + resizeDeferred = this.resize(); } } else if (changeType === 'update') { if (e.changeTypes?.length === 0) { - return; + return resizeDeferred; } if ((items.length > 1 || e.changeTypes[0] !== 'insert') && !(items.length === 0 && e.changeTypes[0] === 'remove') && !e.needUpdateDimensions) { @@ -92,22 +107,17 @@ const resizingControllerMembers = { this._waitAsyncTemplates().done(() => { deferUpdate(() => deferRender(() => deferUpdate(() => { - that._setScrollerSpacing(); - that._rowsView.resize(); + this._setScrollerSpacing(); + this._rowsView.resize(); resizeDeferred.resolve(); }))); }).fail(resizeDeferred.reject); } else { - resizeDeferred = that.resize(); + resizeDeferred = this.resize(); } } - if (changeType && changeType !== 'updateSelection' && changeType !== 'updateFocusedRow' && changeType !== 'pageIndex' && !isDelayed) { - when(resizeDeferred).done(() => { - that._setAriaLabel(); - that.fireContentReadyAction(); - }); - } + return resizeDeferred; }, fireContentReadyAction() { diff --git a/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js b/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js index d89c7911c273..c94a693552ad 100644 --- a/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js +++ b/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js @@ -1,5 +1,6 @@ import DataGrid from 'ui/data_grid'; import $ from 'jquery'; +import 'ui/drop_down_box'; import Class from 'core/class'; import { logger } from 'core/utils/console'; import typeUtils from 'core/utils/type'; @@ -1266,6 +1267,30 @@ QUnit.module('Initialization', baseModuleConfig, () => { assert.equal($cols.get(0).style.width, '700px'); assert.equal($cols.get(1).style.width, ''); }); + + // T1188486 + QUnit.test('onContentReady should be called when the grid is rendered in DropDownBox', function(assert) { + // arrange, act + const onContentReadySpy = sinon.spy(); + + $('#container').dxDropDownBox({ + dataSource: [{ id: 0, field: 'test' }], + value: [0], + valueExpr: 'id', + displayExpr: 'field', + deferRendering: false, + contentTemplate(e) { + return $('
').dxDataGrid({ + dataSource: e.component.getDataSource(), + onContentReady: onContentReadySpy + }); + } + }); + this.clock.tick(50); + + // assert + assert.strictEqual(onContentReadySpy.callCount, 1, 'onContentReadySpy call count'); + }); });