chore(*): Approximate click position in merge cell to activate closest row.

Author: MKirova

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -151,6 +151,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
     @Input()
     public isPlaceholder: boolean;
 
+    /**
+        Gets whether this cell is a merged cell.
+     */
+    @Input()
+    public isMerged: boolean;
 
     /**
      * @hidden
@@ -1016,6 +1021,19 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
      * @internal
      */
     public pointerdown = (event: PointerEvent) => {
+
+        if (this.isMerged) {
+            // need an approximation of where in the cell the user clicked to get actual index to be activated.
+            const scrollOffset = this.grid.verticalScrollContainer.scrollPosition + (event.y - this.grid.tbody.nativeElement.getBoundingClientRect().y);
+            const targetRowIndex = this.grid.verticalScrollContainer.getIndexAtScroll(scrollOffset);
+            if (targetRowIndex != this.rowIndex) {
+                const row = this.grid.rowList.toArray().find(x => x.index === targetRowIndex);
+                const actualTarget = row.cells.find(x => x.column === this.column);
+                actualTarget.pointerdown(event);
+                return;
+            }
+        }
+
         if (this.cellSelectionMode !== GridSelectionMode.multiple) {
             this.activate(event);
             return;

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

@@ -135,6 +135,7 @@
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
         [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
+        [isMerged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         class="igx-grid__td igx-grid__td--fw"
         [class.igx-grid__td--edited]="key | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.gridAPI.crudService.cell:grid.gridAPI.crudService.row"
@@ -174,6 +175,7 @@
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
         [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
+        [isMerged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         [class.igx-grid__td--pinned]="col.pinned"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"

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

@@ -123,6 +123,8 @@
 <ng-template #cellTemplate let-col="column">
     <igx-hierarchical-grid-cell
     [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+    [isMerged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+    [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
     [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
     [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
     class="igx-grid__td igx-grid__td--fw"

projects/igniteui-angular/src/lib/grids/row.directive.ts

@@ -397,6 +397,14 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy {
      */
     @HostListener('click', ['$event'])
     public onClick(event: MouseEvent) {
+        if (this.hasMergedCells && this.metaData?.cellMergeMeta) {
+            const targetRowIndex = this.grid.navigation.activeNode.row;
+            if (targetRowIndex != this.index) {
+                const row = this.grid.rowList.toArray().find(x => x.index === targetRowIndex);
+                row.onClick(event);
+                return;
+            }
+        }
         this.grid.rowClick.emit({
             row: this,
             event

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

@@ -81,6 +81,8 @@
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
         [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
         [class.igx-grid__td--pinned]="col.pinned"
+        [isMerged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+        [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         class="igx-grid__td igx-grid__td--fw"
         [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--number]="col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency'"
@@ -115,6 +117,8 @@
         [class.igx-grid__td--merged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
         [class.igx-grid__td--merged-selected]="isSelectionRoot(col)"
         [class.igx-grid__td--merged-hovered]="isHoveredRoot(col)"
+        [isMerged]="metaData?.cellMergeMeta.get(col.field)?.rowSpan > 1"
+        [isPlaceholder]="!!this.metaData?.cellMergeMeta.get(col.field)?.root"
         [class.igx-grid__td--pinned]="col.pinned"
         [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--number]="(col.dataType === 'number' || col.dataType === 'percent' || col.dataType === 'currency') && col.visibleIndex !== 0"