DataGrid - It is not possible to reorder columns when headerCellRender is used in React (T1139245)

js/ui/grid_core/ui.grid_core.column_headers.js

@@ -216,13 +216,14 @@ export const columnHeadersModule = {
 
                     that.setAria('role', 'presentation', $container);
 
-                    that._updateContent(that._renderTable({ change }), change);
+                    const deferred = that._updateContent(that._renderTable({ change }), change);
 
                     if(that.getRowCount() > 1) {
                         $container.addClass(MULTI_ROW_HEADER_CLASS);
                     }
 
                     that.callBase.apply(that, arguments);
+                    return deferred;
                 },
 
                 _renderRows: function() {

js/ui/grid_core/ui.grid_core.filter_row.js

@@ -228,7 +228,7 @@ const ColumnHeadersViewFilterRowExtender = (function() {
 
         _renderCore: function() {
             this._filterRangeOverlayInstance = null;
-            this.callBase.apply(this, arguments);
+            return this.callBase.apply(this, arguments);
         },
 
         _resizeCore: function() {

js/ui/grid_core/ui.grid_core.modules.js

@@ -263,9 +263,15 @@ const View = ModuleItem.inherit({
         $element.toggleClass('dx-hidden', !isVisible);
         if(isVisible) {
             this.component._optionCache = {};
-            this._renderCore(options);
+            const deferred = this._renderCore(options);
             this.component._optionCache = undefined;
-            this.renderCompleted.fire(options);
+            if(deferred) {
+                deferred.done(() => {
+                    this.renderCompleted.fire(options);
+                });
+            } else {
+                this.renderCompleted.fire(options);
+            }
         }
     },
 

js/ui/grid_core/ui.grid_core.virtual_columns.js

@@ -28,11 +28,12 @@ const VirtualScrollingRowsViewExtender = {
 
 const HeaderViewExtender = {
     _renderCore: function() {
-        this.callBase.apply(this, arguments);
+        const deferred = this.callBase.apply(this, arguments);
 
         if(this._columnsController.isVirtualMode()) {
             this._updateScrollLeftPosition();
         }
+        return deferred;
     }
 };
 

testing/tests/DevExpress.ui.widgets.dataGrid/columnsHeadersView.tests.js

@@ -1361,7 +1361,7 @@ QUnit.module('Headers', {
     });
 
     QUnit.test('Check correct work getColumnsWidth without columns', function(assert) {
-    // act
+        // act
         this.columnHeadersView.render($('#container'));
         // assert
         assert.deepEqual(this.columnHeadersView.getColumnWidths(), [], 'empty column widths');
@@ -3004,4 +3004,35 @@ QUnit.module('Render templates with renderAsync', {
             });
         });
     });
+    // T1139245 - DataGrid - It is not possible to reorder columns when headerCellRender is used in React
+    QUnit.test('The renderCompleted should raise then content has rendered', function(assert) {
+        const $testElement = $('#container');
+        const options = {
+            columns: [{
+                dataField: 'name',
+                headerCellTemplate: '#testTemplate'
+            }],
+            renderAsync: false,
+            templatesRenderAsynchronously: true
+        };
+
+        this.setupDataGrid(options);
+        this._getTemplate = function() {
+            return {
+                render: function(options) {
+                    setTimeout(() => {
+                        options.deferred && options.deferred.resolve();
+                    }, 50);
+                }
+            };
+        };
+        let renderCompletedCall = false;
+        this.columnHeadersView.renderCompleted.add(() => { renderCompletedCall = true; });
+
+        // act
+        this.columnHeadersView.render($testElement);
+        assert.ok(!renderCompletedCall, 'renderCompleted isnt fired because template isnt rendered');
+        this.clock.tick(50);
+        assert.ok(renderCompletedCall, 'renderCompleted fired after template is rendered');
+    });
 });