DataGrid: Fix onContentReady was not called when the grid is rendered…

… in DropDownBox (T1188486) (#25622) Co-authored-by: Alyar <>
DevExpress · Sep 22, 2023 · 1f5753f · 1f5753f
1 parent 47e9211
commit 1f5753f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 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
@@ -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<null>().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<null>().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
@@ -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 $('<div>').dxDataGrid({
+                    dataSource: e.component.getDataSource(),
+                    onContentReady: onContentReadySpy
+                });
+            }
+        });
+        this.clock.tick(50);
+
+        // assert
+        assert.strictEqual(onContentReadySpy.callCount, 1, 'onContentReadySpy call count');
+    });
 });