fix

DevExpress · Sep 19, 2024 · ef2f0b4 · ef2f0b4
1 parent a36d0cb
commit ef2f0b4
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 24 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/base/_gridBase.scss b/packages/devextreme-scss/scss/widgets/base/_gridBase.scss
@@ -954,6 +954,12 @@
       &:focus {
         outline: 0;
       }
+
+      &.dx-#{$widget-name}-sticky-column-left  {
+        display: inline-block;
+        overflow: hidden;
+        left: 0;
+      }
     }
 
     .dx-data-row.dx-edit-row {

diff --git a/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts b/packages/devextreme/js/__internal/grids/grid_core/master_detail/m_master_detail.ts
@@ -1,4 +1,5 @@
 /* eslint-disable max-classes-per-file */
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 // @ts-expect-error
 import { grep } from '@js/core/utils/common';
@@ -339,7 +340,7 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewMasterDetailExten
     return template;
   }
 
-  private _isDetailRow(row) {
+  protected _isDetailRow(row) {
     return row && row.rowType && row.rowType.indexOf('detail') === 0;
   }
 
@@ -359,35 +360,40 @@ const rowsView = (Base: ModuleType<RowsView>) => class RowsViewMasterDetailExten
 
   protected _renderCells($row, options) {
     const { row } = options;
-    let $detailCell;
-    const visibleColumns = this._columnsController.getVisibleColumns();
 
     if (row.rowType && this._isDetailRow(row)) {
       if (this._needRenderCell(0, options.columnIndices)) {
-        $detailCell = this._renderCell($row, {
-          value: null,
-          row,
-          rowIndex: row.rowIndex,
-          column: { command: 'detail' },
-          columnIndex: 0,
-          change: options.change,
-        });
-
-        $detailCell
-          .addClass(CELL_FOCUS_DISABLED_CLASS)
-          .addClass(MASTER_DETAIL_CELL_CLASS)
-          .attr('colSpan', visibleColumns.length);
-
-        const isEditForm = row.isEditing;
-
-        if (!isEditForm) {
-          $detailCell.attr('aria-roledescription', messageLocalization.format('dxDataGrid-masterDetail'));
-        }
+        this._renderMasterDetailCell($row, row, options);
       }
     } else {
       super._renderCells.apply(this, arguments as any);
     }
   }
+  protected _renderMasterDetailCell($row, row, options): dxElementWrapper {
+    const visibleColumns = this._columnsController.getVisibleColumns();
+
+    const $detailCell = this._renderCell($row, {
+      value: null,
+      row,
+      rowIndex: row.rowIndex,
+      column: { command: 'detail' },
+      columnIndex: 0,
+      change: options.change,
+    });
+
+    $detailCell
+      .addClass(CELL_FOCUS_DISABLED_CLASS)
+      .addClass(MASTER_DETAIL_CELL_CLASS)
+      .attr('colSpan', visibleColumns.length);
+
+    const isEditForm = row.isEditing;
+
+    if (!isEditForm) {
+      $detailCell.attr('aria-roledescription', messageLocalization.format('dxDataGrid-masterDetail'));
+    }
+
+    return $detailCell;
+  }
 };
 
 export const masterDetailModule = {

diff --git a/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts b/packages/devextreme/js/__internal/grids/grid_core/sticky_columns/m_sticky_columns.ts
@@ -5,7 +5,7 @@ import type { ColumnHeadersView } from '../column_headers/m_column_headers';
 import type { ModuleType } from '../m_types';
 import type { ColumnsView } from '../views/m_columns_view';
 import type { RowsView } from '../views/m_rows_view';
-import { StickyPosition } from './const';
+import { CLASSES, StickyPosition } from './const';
 import { GridCoreStickyColumnsDom } from './dom';
 import {
   getColumnFixedPosition,
@@ -264,7 +264,23 @@ const columnHeadersView = (
 
 const rowsView = (
   Base: ModuleType<RowsView>,
-) => class RowsViewStickyColumnsExtender extends baseStickyColumns(Base) {};
+) => class RowsViewStickyColumnsExtender extends baseStickyColumns(Base) {
+  protected _renderMasterDetailCell($row, row, options): dxElementWrapper {
+    // @ts-expect-error
+    const $detailCell: dxElementWrapper = super._renderMasterDetailCell($row, row, options);
+
+    if (this._isStickyColumns()) {
+      // @ts-expect-error
+      const componentWidth = this.component.$element().width();
+      $detailCell
+        .addClass(this.addWidgetPrefix(CLASSES.stickyColumnLeft))
+        // @ts-expect-error
+        .width(componentWidth - 2);
+    }
+
+    return $detailCell;
+  }
+};
 
 const footerView = (
   Base: ModuleType<any>,