Grid Cell merging (#16024)

Author: MayaKirova

CHANGELOG.md

@@ -2,33 +2,59 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+
 ## 20.1.0
+
 ### New Features
-- `IgxCarousel`
-    - Added `select` method overload accepting index.
-    ```ts
-    this.carousel.select(2, Direction.NEXT);
-    ```
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
+
+        It can be enabled on the individual columns:
+
+        ```html
+        <igx-column field="field" [merge]="true"></igx-column>
+        ```
+        The merging can be configured on the grid level to apply either:
+        - `onSort` - only when the column is sorted.
+        - `always` - always, regardless of data operations.
+
+        ```html
+        <igx-grid [cellMergeMode]="'always'">
+        </igx-grid>
+        ```
+
+        The default `cellMergeMode` is `onSort`.
+
+        The functionality can be modified by setting a custom `mergeStrategy` on the grid, in case some other merge conditions or logic is needed for a custom scenario.
+
+        It's possible also to set a `mergeComparer` on the individual columns, in case some custom handling is needed for a particular data field.
+
     - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the `pinningPosition` property on the column:
 
-    ```html
-    <igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'>
-    </igx-column>
-    ```
+        ```html
+        <igx-column [field]="'Col1'" [pinned]='true' [pinningPosition]='pinningPosition'>
+        </igx-column>
+        ```
 
-    ```ts
-      public pinningPosition = ColumnPinningPosition.End;
-    ```
+        ```ts
+        public pinningPosition = ColumnPinningPosition.End;
+        ```
 
-    Or with the API, via optional parameter:
+        Or with the API, via optional parameter:
 
-    ```ts
+        ```ts
         grid.pinColumn('Col1', 0, ColumnPinningPosition.End);
         grid.pinColumn('Col2', 0, ColumnPinningPosition.Start);
-    ```
+        ```
 
-    If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
+        If property `pinningPosition` is not set on a column, the column will default to the position specified on the grid's `pinning` options for `columns`.
+
+- `IgxCarousel`
+    - Added `select` method overload accepting index.
+    ```ts
+    this.carousel.select(2, Direction.NEXT);
+    ```
 
 - `IgxDateRangePicker`
     - Now has a complete set of properties to customize the calendar:
@@ -75,10 +101,10 @@ All notable changes for each version of this project will be documented in this
 
 - `IgxTooltip`
     - The tooltip now remains open while interacting with it.
+
 - `IgxTooltipTarget`
     - Introduced several new properties to enhance customization of tooltip content and behavior. Those include `positionSettings`, `hasArrow`, `sticky`, `closeButtonTemplate`. For detailed usage and examples, please refer to the Tooltip [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/directives/tooltip/README.md).
 
-
 ### General
 - `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
 
@@ -187,24 +213,24 @@ All notable changes for each version of this project will be documented in this
         - Added the `canCommit`, `commit` and `discard` public methods that allows the user to save/discard the current state of the expression tree.
         - Added option to template the search value input:
             ```
-            <ng-template igxQueryBuilderSearchValue 
+            <ng-template igxQueryBuilderSearchValue
                         let-searchValue
-                        let-selectedField = "selectedField" 
+                        let-selectedField = "selectedField"
                         let-selectedCondition = "selectedCondition"
                         let-defaultSearchValueTemplate = "defaultSearchValueTemplate">
                 @if (selectedField?.field === 'Id' && selectedCondition === 'equals'){
                     <input type="text" required [(ngModel)]="searchValue.value"/>
-                } @else {  
+                } @else {
                     <ng-container #defaultTemplate *ngTemplateOutlet="defaultSearchValueTemplate"></    ng-container>
                 }
-            </ng-template> 
+            </ng-template>
             ```
-        - **Behavioral Changes** 
+        - **Behavioral Changes**
         - Expression enters edit mode on single click, `Enter` or `Space`.
         - Selecting conditions inside the `IgxQueryBuilderComponent` is no longer supported. Grouping/ungrouping expressions is now achieved via the newly exposed Drag & Drop functionality.
         - Deleting multiple expressions through the context menu is no longer supported.
     - `IgxQueryBuilderHeaderComponent`
-        - **Behavioral Change** 
+        - **Behavioral Change**
         - Legend is no longer shown.
         - If the `title` input property is not set, by default it would be empty string.
         - **Deprecation**
@@ -286,9 +312,9 @@ All notable changes for each version of this project will be documented in this
 
 ### Themes
 - **Breaking Change** `Palettes`
-    - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function. 
+    - All palette colors have been migrated to the [CSS relative colors syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors). This means that color consumed as CSS variables no longer need to be wrapped in an `hsl` function.
 
-    Example: 
+    Example:
     ```css
     /* 18.1.x and before: */
     background: hsl(var(--ig-primary-600));
@@ -299,7 +325,7 @@ All notable changes for each version of this project will be documented in this
 
     This change also opens up the door for declaring the base (500) variants of each color in CSS from any color, including other CSS variables, whereas before the Sass `palette` function was needed to generate color shades from a base color.
 
-    Example: 
+    Example:
     ```scss
     /* 18.1.x and before: */
     $my-palette: palette($primary: #09f, ...);
@@ -339,7 +365,7 @@ For Firefox users, we provide limited scrollbar styling options through the foll
     - `animationType` input property is now of type `CarouselAnimationType`. `HorizontalAnimationType` can also be used, however, to accommodate the new vertical mode, which supports vertical slide animations, it is recommended to use `CarouselAnimationType`.
 
     - **Behavioral Changes** - the `keyboardSupport` input property now defaults to `false`.
-    - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`. 
+    - **Deprecation** - the `keyboardSupport` input property has been deprecated and will be removed in a future version. Keyboard navigation with `ArrowLeft`, `ArrowRight`, `Home`, and `End` keys will be supported when focusing the indicators' container via ` Tab`/`Shift+Tab`.
 
 - `IgxCombo`:
     - **Breaking Change** The deprecated `filterable` property is replaced with `disableFiltering`.

projects/igniteui-angular-elements/src/analyzer/elements.config.ts

@@ -95,6 +95,7 @@ export var registerConfig = [
     ],
     numericProps: ["rowEnd", "colEnd", "rowStart", "colStart"],
     boolProps: [
+      "merge",
       "sortable",
       "selectable",
       "groupable",
@@ -158,6 +159,7 @@ export var registerConfig = [
       "expanded",
       "searchable",
       "hidden",
+      "merge",
       "sortable",
       "groupable",
       "editable",
@@ -213,6 +215,7 @@ export var registerConfig = [
       "collapsible",
       "expanded",
       "searchable",
+      "merge",
       "sortable",
       "groupable",
       "editable",

projects/igniteui-angular-elements/src/public_api.ts

@@ -12,7 +12,7 @@ import { IgxPivotDateDimension } from 'projects/igniteui-angular/src/lib/grids/p
 import { PivotDimensionType } from 'projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface';
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxSummaryOperand, IgxTimeSummaryOperand } from 'projects/igniteui-angular/src/lib/grids/summaries/grid-summary';
 import { HorizontalAlignment, VerticalAlignment } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
-
+import { ByLevelTreeGridMergeStrategy } from 'projects/igniteui-angular/src/lib/data-operations/merge-strategy';
 
 /** Export Public API, TODO: reorganize, Generate all w/ renames? */
 export {
@@ -35,6 +35,7 @@ export {
 
     NoopSortingStrategy as IgcNoopSortingStrategy,
     NoopFilteringStrategy as IgcNoopFilteringStrategy,
+    ByLevelTreeGridMergeStrategy as IgcByLevelTreeGridMergeStrategy,
 
     // Pivot API
     IgxPivotDateDimension as IgcPivotDateDimension,

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -272,6 +272,14 @@
             @extend %igx-grid__tr--pinned !optional;
         }
 
+        @include e(tr, $m: merged) {
+            @extend %igx-grid__tr--merged !optional;
+        }
+
+        @include e(tr, $m: merged-top) {
+            @extend %igx-grid__tr--merged-top !optional;
+        }
+
         @include e(tr, $m: pinned-top) {
             @extend %igx-grid__tr--pinned-top !optional;
         }
@@ -296,6 +304,22 @@
             @extend %igx-grid__td--edited !optional;
         }
 
+        @include e(td, $m: merged) {
+            @extend %igx-grid__td--merged !optional;
+        }
+
+        @include e(td, $mods: (merged-selected, merged-hovered)) {
+            @extend %igx-grid__td--merged-selected-hovered !optional;
+        }
+
+        @include e(td, $m: merged-selected) {
+            @extend %igx-grid__td--merged-selected !optional;
+        }
+
+        @include e(td, $m: merged-hovered) {
+            @extend %igx-grid__td--merged-hovered !optional;
+        }
+
         @include e(td, $m: editing) {
             @extend %igx-grid__td--editing !optional;
         }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -622,6 +622,7 @@
 
         %grid-row--mrl {
             %igx-grid__hierarchical-expander--header,
+            %igx-grid__hierarchical-expander,
             %igx-grid__header-indentation,
             %igx-grid__row-indentation,
             %grid__cbx-selection {
@@ -754,6 +755,7 @@
         }
 
         %grid__cbx-selection,
+        %igx-grid__hierarchical-expander,
         %igx-grid__row-indentation,
         %igx-grid__drag-indicator {
             border-bottom: rem(1px) solid var-get($theme, 'row-border-color');
@@ -1338,6 +1340,35 @@
         }
     }
 
+    %igx-grid__tr--merged {
+        border-block-end: 0;
+    }
+
+    %igx-grid__tr--merged-top {
+        position: absolute;
+        width: 100%;
+    }
+
+    %igx-grid__td--merged {
+        z-index: 1;
+        grid-row: 1 / -1;
+    }
+
+    %igx-grid__td--merged-selected {
+        color: var-get($theme, 'row-selected-text-color');
+        background: var-get($theme, 'row-selected-background') !important;
+    }
+
+    %igx-grid__td--merged-hovered {
+        background: var-get($theme, 'row-hover-background') !important;
+        color: var-get($theme, 'row-hover-text-color');
+    }
+
+    %igx-grid__td--merged-selected-hovered {
+        background: var-get($theme, 'row-selected-hover-background') !important;
+        color: var-get($theme, 'row-selected-hover-text-color');
+    }
+
     %igx-grid__tr--deleted {
         %grid-cell-text {
             font-style: italic;

projects/igniteui-angular/src/lib/core/utils.ts

@@ -33,6 +33,17 @@ export function cloneArray<T>(array: T[], deep = false): T[] {
     return deep ? (array ?? []).map(cloneValue) : (array ?? []).slice();
 }
 
+/**
+ * @hidden
+ */
+export function areEqualArrays<T>(arr1: T[], arr2: T[]): boolean {
+    if (arr1.length !== arr2.length) return false;
+        for (let i = 0; i < arr1.length; i++) {
+          if (arr1[i] !== arr2[i]) return false;
+        }
+        return true;
+}
+
 /**
  * Doesn't clone leaf items
  *

projects/igniteui-angular/src/lib/data-operations/data-util.ts

@@ -8,7 +8,7 @@ import { IGroupingState } from './groupby-state.interface';
 import { mergeObjects } from '../core/utils';
 import { Transaction, TransactionType, HierarchicalTransaction } from '../services/transaction/transaction';
 import { getHierarchy, isHierarchyMatch } from './operations';
-import { GridType } from '../grids/common/grid.interface';
+import { ColumnType, GridType } from '../grids/common/grid.interface';
 import { ITreeGridRecord } from '../grids/tree-grid/tree-grid.interfaces';
 import { ISortingExpression } from './sorting-strategy';
 import {
@@ -20,6 +20,7 @@ import {
 } from '../grids/common/strategy';
 import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
 import { IGroupingExpression } from './grouping-expression.interface';
+import { DefaultMergeStrategy, IGridMergeStrategy } from './merge-strategy';
 
 /**
  * @hidden
@@ -115,6 +116,25 @@ export class DataUtil {
         return grouping.groupBy(data, state, grid, groupsRecords, fullResult);
     }
 
+    public static merge<T>(data: T[], columns: ColumnType[], strategy: IGridMergeStrategy = new DefaultMergeStrategy(), activeRowIndexes = [], grid: GridType = null,
+    ): any[] {
+        let result = [];
+        for (const col of columns) {
+            const isDate = col?.dataType === 'date' || col?.dataType === 'dateTime';
+            const isTime = col?.dataType === 'time' || col?.dataType === 'dateTime';
+            strategy.merge(
+                data,
+                col.field,
+                col.mergingComparer,
+                result,
+                activeRowIndexes,
+                isDate,
+                isTime,
+                grid);
+        }
+        return result;
+    }
+
     public static page<T>(data: T[], state: IPagingState, dataLength?: number): T[] {
         if (!state) {
             return data;