chore(*): Adjust API and members.

Author: MKirova

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -107,6 +107,15 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return this._field;
     }
 
+    /**
+     * Sets/gets whether to merge cells in this column.
+     * ```html
+     * <igx-column [merge]="true"></igx-column>
+     * ```
+     *
+     */
+    @Input()
+    public merge = false;
 
     /**
      * @hidden @internal

projects/igniteui-angular/src/lib/grids/common/enums.ts

@@ -81,7 +81,6 @@ export type GridSelectionMode = (typeof GridSelectionMode)[keyof typeof GridSele
  * - 'onSort': Only merge cells in column that are sorted.
  */
 export const GridCellMergeMode = {
-    never: 'never',
     always: 'always',
     onSort: 'onSort'
 } as const;

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -453,6 +453,7 @@ export interface ColumnType extends FieldType {
     pinned: boolean;
     /** Indicates if the column is currently expanded or collapsed. If the value is true, the column is expanded */
     expanded: boolean;
+    merge: boolean;
     /** Indicates if the column is currently selected. If the value is true, the column is selected */
     selected: boolean;
     /** Indicates if the column can be selected. If the value is true, the column can be selected */

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -2918,7 +2918,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     @WatchChanges()
     @Input()
-    public cellMergeMode: GridCellMergeMode = GridCellMergeMode.never;
+    public cellMergeMode: GridCellMergeMode = GridCellMergeMode.onSort;
 
     /**
      * Gets/Sets row selection mode

projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html

@@ -32,11 +32,11 @@
         }
         <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]="grid.trackColumnChanges" #igxDirRef>
             @if (this.hasMergedCells) {
-                <div [style.height.px]=" this.data.cellMergeMeta.get(col.field).rowSpan > 1 ? getRowHeight() : null"
+                <div [style.height.px]=" this.data.cellMergeMeta.get(col.field)?.rowSpan > 1 ? getRowHeight() : null"
                      class="igx-grid__mrl-block"
-                     [style.visibility]="this.data.cellMergeMeta.get(col.field).root ? 'hidden' : 'visible'"
+                     [style.visibility]="this.data.cellMergeMeta.get(col.field)?.root ? 'hidden' : 'visible'"
                      [ngStyle]="{
-                    'grid-template-rows': this.data.cellMergeMeta.get(col.field).rowSpan > 1 ? this.getMergeCellSpan(col) : null
+                    'grid-template-rows': this.data.cellMergeMeta.get(col.field)?.rowSpan > 1 ? this.getMergeCellSpan(col) : null
                 }">
                 <ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails ? expandableCellTemplate : mergedCellTemplate; context: getContext(col, this)"></ng-container>
             </div>
@@ -174,7 +174,7 @@
 <ng-template #mergedCellTemplate let-col>
     <igx-grid-cell
     class="igx-grid__td igx-grid__td--fw"
-    [class.igx-grid__td--merged]="data.cellMergeMeta.get(col.field).rowSpan > 1"
+    [class.igx-grid__td--merged]="data.cellMergeMeta.get(col.field)?.rowSpan > 1"
     [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
     [class.igx-grid__td--pinned]="col.pinned"
     [class.igx-grid__td--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -86,28 +86,26 @@ export class IgxGridCellMergePipe implements PipeTransform {
     constructor(@Inject(IGX_GRID_BASE) private grid: GridType) { }
 
     public transform(collection: any, _pipeTrigger: number) {
-        if (this.grid.cellMergeMode === GridCellMergeMode.never) {
+        const mergeMode = this.grid.cellMergeMode;
+        const sortExpr = this.grid.sortingExpressions;
+        const columnToMerge = this.grid.visibleColumns.filter(
+            x => x.merge && (mergeMode ==='always' ||
+            (mergeMode === 'onSort' && !!sortExpr.find( x=> x.fieldName === x.fieldName)))
+        );
+        if (columnToMerge.length === 0) {
             return collection;
         }
-        const visibleColumns = this.grid.visibleColumns;
         let prev = null;
         let result = [];
         for (const rec of collection) {
             let recData = { recordRef: rec, cellMergeMeta: new Map<string, IMergeByResult>() };
-            for (const col of visibleColumns) {
+            for (const col of columnToMerge) {
                     recData.cellMergeMeta.set(col.field, { rowSpan: 1 });
                     //TODO condition can be a strategy or some callback that the user can set.
-                    //TODO can also be limited to only sorted columns
                     if ( prev && prev.recordRef[col.field] === rec[col.field]) {
                         const root = prev.cellMergeMeta.get(col.field)?.root ?? prev;
                         root.cellMergeMeta.get(col.field).rowSpan += 1;
                         recData.cellMergeMeta.get(col.field).root = root;
-                        // recData.cellMergeMeta.get(col.field).prev = prev;
-                        // let curr = prev;
-                        // while(curr) {
-                        //     curr.cellMergeMeta.get(col.field).rowSpan += 1;
-                        //     curr =  curr.cellMergeMeta.get(col.field).prev;
-                        // }
                     }
             }
             prev = recData;

src/app/grid-cellMerging/grid-cellMerging.component.html

@@ -12,11 +12,11 @@ <h4 class="sample-title">Grid with cell merge</h4>
         </div>
         </ng-template>
     </igx-column>
-    <igx-column field="ReorderLevel" width="200px">
+    <igx-column field="ReorderLevel" width="200px" [merge]="true">
     </igx-column>
-    <igx-column required field="ProductName" width="200px">
+    <igx-column required field="ProductName" width="200px" [merge]="true">
     </igx-column>
-    <igx-column field="UnitsInStock" header="UnitsInStock" width="200px">
+    <igx-column field="UnitsInStock" header="UnitsInStock" width="200px" [merge]="true">
     </igx-column>
     <igx-column field="OrderDate" width="200px">
     </igx-column>