DataGrid - Sticky Columns - support master-detail, summary & grouping (…

…#28074)

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/withGrouping.ts

@@ -0,0 +1,77 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { defaultConfig } from './data';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`FixedColumns - Grouping`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('Sticky columns with grouping & summary', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await takeScreenshot('grouping-scroll-begin.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 100 });
+  await takeScreenshot('grouping-scroll-center.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+  await takeScreenshot('grouping-scroll-end.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  customizeColumns(columns) {
+    columns[2].groupIndex = 0;
+  },
+  summary: {
+    groupItems: [{
+      column: 'OrderNumber',
+      summaryType: 'count',
+      displayFormat: '{0} orders',
+    }, {
+      column: 'City',
+      summaryType: 'max',
+      valueFormat: 'currency',
+      showInGroupFooter: false,
+      alignByColumn: true,
+    }, {
+      column: 'TotalAmount',
+      summaryType: 'max',
+      valueFormat: 'currency',
+      showInGroupFooter: false,
+      alignByColumn: true,
+    }, {
+      column: 'TotalAmount',
+      summaryType: 'sum',
+      valueFormat: 'currency',
+      displayFormat: 'Total: {0}',
+      showInGroupFooter: true,
+    }],
+    totalItems: [{
+      column: 'OrderNumber',
+      summaryType: 'count',
+      displayFormat: '{0} orders',
+    }, {
+      column: 'SaleAmount',
+      summaryType: 'max',
+      valueFormat: 'currency',
+    }, {
+      column: 'TotalAmount',
+      summaryType: 'max',
+      valueFormat: 'currency',
+    }, {
+      column: 'TotalAmount',
+      summaryType: 'sum',
+      valueFormat: 'currency',
+      displayFormat: 'Total: {0}',
+    }],
+  },
+}));

e2e/testcafe-devextreme/tests/dataGrid/stickyColumns/withMasterDetail.ts

@@ -0,0 +1,39 @@
+import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
+import DataGrid from 'devextreme-testcafe-models/dataGrid';
+import { safeSizeTest } from '../../../helpers/safeSizeTest';
+import { createWidget } from '../../../helpers/createWidget';
+import url from '../../../helpers/getPageUrl';
+import { defaultConfig } from './data';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`FixedColumns - MasterDetail`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('Sticky columns with master-detail', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+  await dataGrid.apiExpandRow(1);
+
+  await takeScreenshot('masterdetail-scroll-begin.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 100 });
+  await takeScreenshot('masterdetail-scroll-center.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+  await takeScreenshot('masterdetail-scroll-end.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [900, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  masterDetail: {
+    enabled: true,
+    template(container) {
+      $(container)
+        .text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.');
+    },
+  },
+}));

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 {
@@ -994,9 +1000,9 @@
   .dx-#{$widget-name}-total-footer {
     position: relative;
 
-    & > .dx-#{$widget-name}-content {
-      padding-top: $grid-total-footer-paddings;
-      padding-bottom: $grid-total-footer-paddings;
+    & > .dx-#{$widget-name}-content .dx-row > td {
+      padding-top: $grid-total-footer-paddings * 2;
+      padding-bottom: $grid-total-footer-paddings * 2;
     }
   }
 

packages/devextreme-scss/scss/widgets/fluent/dataGrid/_index.scss

@@ -67,12 +67,31 @@
 }
 
 .dx-datagrid-rowsview {
+  .dx-datagrid-group-row-container {
+    padding-left: $fluent-grid-base-cell-horizontal-padding;
+    padding-right: $fluent-grid-base-cell-horizontal-padding;
+    text-overflow: ellipsis;
+    display: inline-block;
+    position: sticky;
+    background-color: $datagrid-group-row-bg;
+  }
+
   .dx-row.dx-group-row:first-child {
     border-top: none;
   }
 
 
   .dx-row.dx-group-row {
+    .dx-group-cell {
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        padding-left: 0;
+        padding-right: 0;
+        overflow: initial;
+        overflow-x: clip;
+        background-color: transparent;
+      }
+    }
+
     &:not(.dx-row-focused) {
       color: $datagrid-group-row-color;
       background-color: $datagrid-group-row-bg;
@@ -84,6 +103,10 @@
     td {
       border-top-color: $fluent-grid-base-border-color;
       border-bottom-color: $fluent-grid-base-border-color;
+
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        background-color: $datagrid-group-row-bg;
+      }
     }
   }
 }
@@ -123,3 +146,4 @@
     }
   }
 }
+

packages/devextreme-scss/scss/widgets/generic/dataGrid/_index.scss

@@ -66,6 +66,16 @@
   }
 
   .dx-row.dx-group-row {
+    .dx-group-cell {
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        padding-left: 0;
+        padding-right: 0;
+        overflow: initial;
+        overflow-x: clip;
+        background-color: transparent;
+      }
+    }
+
     &:not(.dx-row-focused) {
       color: $datagrid-group-row-color;
       background-color: $datagrid-group-row-bg;
@@ -76,8 +86,21 @@
     td {
       border-top-color: $generic-grid-base-border-color;
       border-bottom-color: $generic-grid-base-border-color;
+
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        background-color: $datagrid-group-row-bg;
+      }
     }
   }
+
+  .dx-datagrid-group-row-container {
+    padding-left: $generic-datagrid-cell-padding;
+    padding-right: $generic-datagrid-cell-padding;
+    text-overflow: ellipsis;
+    display: inline-block;
+    position: sticky;
+    background-color: $datagrid-group-row-bg;
+  }
 }
 
 .dx-datagrid-group-opened {

packages/devextreme-scss/scss/widgets/material/dataGrid/_index.scss

@@ -64,12 +64,31 @@
 }
 
 .dx-datagrid-rowsview {
+  .dx-datagrid-group-row-container {
+    padding-left: $material-grid-base-cell-horizontal-padding;
+    padding-right: $material-grid-base-cell-horizontal-padding;
+    text-overflow: ellipsis;
+    display: inline-block;
+    position: sticky;
+    background-color: $datagrid-group-row-bg;
+  }
+
   .dx-row.dx-group-row:first-child {
     border-top: none;
   }
 
 
   .dx-row.dx-group-row {
+    .dx-group-cell {
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        padding-left: 0;
+        padding-right: 0;
+        overflow: initial;
+        overflow-x: clip;
+        background-color: transparent;
+      }
+    }
+
     &:not(.dx-row-focused) {
       color: $datagrid-group-row-color;
       background-color: $datagrid-group-row-bg;
@@ -81,6 +100,10 @@
     td {
       border-top-color: $material-grid-base-border-color;
       border-bottom-color: $material-grid-base-border-color;
+
+      &.dx-datagrid-sticky-column, &.dx-datagrid-sticky-column-left, &.dx-datagrid-sticky-column-right {
+        background-color: $datagrid-group-row-bg;
+      }
     }
   }
 }

packages/devextreme/js/__internal/grids/grid_core/m_utils.ts

@@ -8,7 +8,7 @@ import { Deferred, when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { each } from '@js/core/utils/iterator';
 import { getBoundingRect } from '@js/core/utils/position';
-import { getHeight } from '@js/core/utils/size';
+import { getHeight, getInnerWidth, getOuterWidth } from '@js/core/utils/size';
 import { format } from '@js/core/utils/string';
 import { isDefined, isFunction, isString } from '@js/core/utils/type';
 import variableWrapper from '@js/core/utils/variable_wrapper';
@@ -781,4 +781,12 @@ export default {
 
     logSpecificDeprecatedWarningIfNeed(columns);
   },
+
+  getComponentBorderWidth(that, $rowsViewElement) {
+    const borderWidth = that.option('showBorders')
+      ? Math.ceil(getOuterWidth($rowsViewElement) - getInnerWidth($rowsViewElement))
+      : 0;
+
+    return borderWidth;
+  },
 };

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 = {

packages/devextreme/js/__internal/grids/grid_core/sticky_columns/const.ts

@@ -15,4 +15,5 @@ export const CLASSES = {
   stickyColumns: 'sticky-columns',
   firstHeader: 'first-header',
   columnNoBorder: 'column-no-border',
+  groupRowContainer: 'group-row-container',
 };