Explicitly trigger grid pipes on markForCheck call (#9448)

* fix(grid): Explicitly trigger grid pipes on markForCheck call

Co-authored-by: Radoslav Karaivanov <[email protected]>

Author: hanastasov

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

@@ -4328,14 +4328,33 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     }
 
     /**
-     * Manually marks the `IgxGridComponent` for change detection.
+     * Triggers change detection for the `IgxGridComponent`.
+     * Calling markForCheck also triggers the grid pipes explicitly, resulting in all updates being processed.
+     * May degrade performance if used when not needed, or if misused:
+     * ```typescript
+     * // DON'Ts:
+     * // don't call markForCheck from inside a loop
+     * // don't call markForCheck when a primitive has changed
+     * grid.data.forEach(rec => {
+     *  rec = newValue;
+     *  grid.markForCheck();
+     * });
+     *
+     * // DOs
+     * // call markForCheck after updating a nested property
+     * grid.data.forEach(rec => {
+     *  rec.nestedProp1.nestedProp2 = newValue;
+     * });
+     * grid.markForCheck();
+     * ```
      *
      * @example
      * ```typescript
-     * this.grid1.markForCheck();
+     * grid.markForCheck();
      * ```
      */
     public markForCheck() {
+        this._pipeTrigger++;
         this.cdr.detectChanges();
     }
 

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

@@ -168,7 +168,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             if (document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
                 grid.expandChildren = value;
-                grid.markForCheck();
+                grid.cdr.detectChanges();
             } else {
                 // Else defer the detection on changes when the grid gets into view for performance.
                 grid.updateOnRender = true;

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

@@ -58,7 +58,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
             }
             this.row.grid.dragRowID = this.row.rowID;
             this.row.grid.rowDragging = true;
-            this.row.grid.markForCheck();
+            this.row.grid.cdr.detectChanges();
 
             this.subscription$ = fromEvent(this.row.grid.document.defaultView, 'keydown').subscribe((ev: KeyboardEvent) => {
                 if (ev.key === KEYS.ESCAPE || ev.key === KEYS.ESCAPE_IE) {
@@ -96,7 +96,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
 
     protected createGhost(pageX, pageY) {
         this.row.grid.endEdit(false);
-        this.row.grid.markForCheck();
+        this.row.grid.cdr.detectChanges();
         this.ghostContext = {
             $implicit: this.row.rowData,
             data: this.row.rowData,
@@ -141,7 +141,7 @@ export class IgxRowDragDirective extends IgxDragDirective implements OnDestroy {
         this.onTransitionEnd(null);
         this.row.grid.dragRowID = null;
         this.row.grid.rowDragging = false;
-        this.row.grid.markForCheck();
+        this.row.grid.cdr.detectChanges();
         this._unsubscribe();
     }
 

src/app/grid-updates-test/grid-updates.component.ts

@@ -55,7 +55,7 @@ export class GridUpdatesComponent implements OnInit {
     this.data[itemIndex] = { ...item };
 
     // Needed because of OnPush strategy
-    this.grid.cdr.markForCheck();
+    this.grid.markForCheck();
   }
 }