DataGrid/TreeList - Sticky Columns: Adapt the editing and filter row features

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

@@ -1085,3 +1085,41 @@ borderConfigs.forEach(({ showRowLines, showColumnLines, showBorders }) => {
     }));
   });
 });
+
+safeSizeTest('The simulated scrollbar should display correctly when there are sticky columns', async (t) => {
+  // arrange
+  const dataGrid = new DataGrid('#container');
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const scrollbarVerticalThumbTrack = dataGrid.getScrollBarThumbTrack('horizontal');
+
+  await t.hover(scrollbarVerticalThumbTrack);
+  await takeScreenshot('simulated_scrollbar_with_sticky_columns_1.png', dataGrid.element);
+
+  // act
+  await t
+    .drag(scrollbarVerticalThumbTrack, 600, 0)
+    .wait(1000);
+
+  await takeScreenshot('simulated_scrollbar_with_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [1000, 800]).before(async () => createWidget('dxDataGrid', {
+  dataSource: getData(5, 25),
+  columnAutoWidth: true,
+  scrolling: {
+    useNative: false,
+  },
+  customizeColumns: (columns) => {
+    columns[5].fixed = true;
+    columns[5].fixedPosition = 'left';
+    columns[6].fixed = true;
+    columns[6].fixedPosition = 'left';
+
+    columns[8].fixed = true;
+    columns[8].fixedPosition = 'right';
+    columns[9].fixed = true;
+    columns[9].fixedPosition = 'right';
+  },
+}));

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

@@ -0,0 +1,173 @@
+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`Sticky columns - Editing`
+  .page(url(__dirname, '../../container.html'));
+
+safeSizeTest('The row edit mode: Edit row when there are sticky columns', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.apiEditRow(1);
+  await t.click(dataGrid.getDataCell(1, 1).element);
+
+  await takeScreenshot('edit_row_with_sticky_columns_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_row_with_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'row',
+    allowUpdating: true,
+  },
+}));
+
+// TODO: We need to fix the issues with the validation message and the revert button
+test.skip('The cell edit mode: Edit cell with validation rule when there are sticky columns', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.apiCellValue(1, 1, '');
+  await t.click(dataGrid.getDataCell(1, 1).element);
+
+  await takeScreenshot('edit_cell_with_validation_rule_and_sticky_columns_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_cell_with_validation_rule_and_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'cell',
+    allowUpdating: true,
+  },
+  customizeColumns(columns) {
+    columns.forEach((column, index) => {
+      if (index === 1) {
+        column.validationRules = [{ type: 'required' }];
+      }
+    });
+  },
+}));
+
+safeSizeTest('The form edit mode: Edit row when there are sticky columns', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await dataGrid.apiEditRow(1);
+
+  await takeScreenshot('edit_form_with_sticky_columns_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_form_with_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'form',
+    allowUpdating: true,
+  },
+}));
+
+safeSizeTest('The batch edit mode: Edit cell whene there are sticky columns', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.click(dataGrid.getDataCell(0, 2).element);
+
+  await takeScreenshot('edit_cell_with_sticky_columns_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_cell_with_sticky_columns_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'batch',
+    allowUpdating: true,
+  },
+  customizeColumns(columns) {
+    columns[1].fixed = true;
+    columns[1].fixedPosition = 'left';
+  },
+}));
+
+safeSizeTest('The batch edit mode: Edit fixed cell', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.click(dataGrid.getDataCell(0, 1).element);
+
+  await takeScreenshot('edit_fixed_cell_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_fixed_cell_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'batch',
+    allowUpdating: true,
+  },
+  customizeColumns(columns) {
+    columns[1].fixed = true;
+    columns[1].fixedPosition = 'left';
+  },
+}));
+
+safeSizeTest('The batch edit mode: Edit fixed cell with sticky position', async (t) => {
+  const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+  const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+  await t.click(dataGrid.getDataCell(0, 3).element);
+
+  await takeScreenshot('edit_fixed_cell_with_sticky_position_1.png', dataGrid.element);
+
+  await dataGrid.scrollTo(t, { x: 10000 });
+
+  await takeScreenshot('edit_fixed_cell_with_sticky_position_2.png', dataGrid.element);
+
+  await t
+    .expect(compareResults.isValid())
+    .ok(compareResults.errorMessages());
+}, [800, 800]).before(async () => createWidget('dxDataGrid', {
+  ...defaultConfig,
+  editing: {
+    mode: 'batch',
+    allowUpdating: true,
+  },
+  customizeColumns(columns) {
+    columns[1].fixed = true;
+    columns[1].fixedPosition = 'left';
+    columns[3].fixed = true;
+    columns[3].fixedPosition = 'sticky';
+  },
+}));

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

@@ -0,0 +1,44 @@
+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';
+import { changeTheme } from '../../../helpers/changeTheme';
+import { Themes } from '../../../helpers/themes';
+
+const DATA_GRID_SELECTOR = '#container';
+
+fixture.disablePageReloads`Sticky columns - Filter row`
+  .page(url(__dirname, '../../container.html'));
+
+[Themes.genericLight, Themes.materialBlue, Themes.fluentBlue].forEach((theme) => {
+  safeSizeTest(`Filter row with sticky columns (${theme} theme)`, async (t) => {
+    const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
+    const dataGrid = new DataGrid(DATA_GRID_SELECTOR);
+
+    await t.click(dataGrid.getHeaders().getFilterRow().getFilterCell(1).element);
+
+    await takeScreenshot(`filter_row_with_sticky_columns_1_(${theme}).png`, dataGrid.element);
+
+    await dataGrid.scrollTo(t, { x: 10000 });
+
+    await takeScreenshot(`filter_row_with_sticky_columns_2_(${theme}).png`, dataGrid.element);
+
+    await t
+      .expect(compareResults.isValid())
+      .ok(compareResults.errorMessages());
+  }, [800, 800])
+    .before(async () => {
+      await changeTheme(theme);
+      await createWidget('dxDataGrid', {
+        ...defaultConfig,
+        filterRow: {
+          visible: true,
+        },
+      });
+    })
+    .after(async () => {
+      await changeTheme(Themes.genericLight);
+    });
+});

packages/devextreme-scss/scss/widgets/base/_gridBase.scss

@@ -197,6 +197,11 @@
 
     .dx-#{$widget-name}-sticky-column, .dx-#{$widget-name}-sticky-column-left, .dx-#{$widget-name}-sticky-column-right {
       position: sticky;
+      z-index: 2;
+
+      &.dx-#{$widget-name}-sticky-column-right {
+        z-index: 3;
+      }
     }
   }
 
@@ -277,7 +282,7 @@
 
   .dx-#{$widget-name}-columns-separator {
     position: absolute;
-    z-index: 3;
+    z-index: 4;
     width: 3px;
   }
 
@@ -290,7 +295,7 @@
     width: 100%;
     position: absolute;
     top: 0;
-    z-index: 3;
+    z-index: 4;
     cursor: col-resize;
   }
 
@@ -1061,8 +1066,18 @@
     }
   }
 
-  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-columns .dx-#{$widget-name}-table {
-    border-collapse: separate;
+  .dx-#{$widget-name} .dx-#{$widget-name}-sticky-columns {
+    .dx-#{$widget-name}-table {
+      border-collapse: separate;
+    }
+
+    .dx-focused-fixed-cell {
+      z-index: 3;
+    }
+
+    .dx-scrollable-scrollbar {
+      z-index: 4;
+    }
   }
 
   .dx-rtl .dx-#{$widget-name},

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

@@ -751,6 +751,16 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
         }
       }
     }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-#{$widget-name}-filter-row > td {
+        &.dx-#{$widget-name}-sticky-column,
+        &.dx-#{$widget-name}-sticky-column-left,
+        &.dx-#{$widget-name}-sticky-column-right {
+          background-color: $datagrid-filter-row-background-color;
+        }
+      }
+    }
   }
 
   .dx-#{$widget-name}-filter-row {
@@ -1122,8 +1132,14 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
       }
     }
 
-    &.dx-#{$widget-name}-sticky-columns .dx-row:not(.dx-row-lines) > td {
-      padding-top: $fluent-grid-base-cell-vertical-padding + 1;
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-row:not(.dx-row-lines) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+        padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
+      }
+
+      .dx-row.dx-row-lines.dx-edit-row > td {
+        border-top-width: 0;
+      }
     }
   }
 

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

@@ -1030,8 +1030,14 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
     }
   }
 
-  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns .dx-row:not(.dx-row-lines) > td {
-    padding-top: $generic-grid-base-cell-padding + 1px;
+  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns {
+    .dx-row:not(.dx-row-lines) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+      padding-top: $generic-grid-base-cell-padding + 1px;
+    }
+
+    .dx-row.dx-row-lines.dx-edit-row > td {
+      border-top-width: 0;
+    }
   }
 
   .dx-rtl {

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

@@ -724,6 +724,16 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         }
       }
     }
+
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-#{$widget-name}-filter-row > td {
+        &.dx-#{$widget-name}-sticky-column,
+        &.dx-#{$widget-name}-sticky-column-left,
+        &.dx-#{$widget-name}-sticky-column-right {
+          background-color: $datagrid-filter-row-background-color;
+        }
+      }
+    }
   }
 
   .dx-#{$widget-name}-filter-row {
@@ -1093,8 +1103,14 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
     }
 
-    &.dx-#{$widget-name}-sticky-columns .dx-row:not(.dx-row-lines) > td {
-      padding-top: $material-grid-base-cell-vertical-padding + 1;
+    &.dx-#{$widget-name}-sticky-columns {
+      .dx-row:not(.dx-row-lines) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
+        padding-top: $material-grid-base-cell-vertical-padding + 1px;
+      }
+
+      .dx-row.dx-row-lines.dx-edit-row > td {
+        border-top-width: 0;
+      }
     }
   }