From 6c416c1c2a915bcc73c7e5c40e6282bc0524d239 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Tue, 29 Mar 2022 19:27:04 +0300
Subject: [PATCH 1/2] fix(igxGrid): Add rowData to pipe triggers so that when
 data for existing row changes the classes are recalculated.

---
 projects/igniteui-angular/src/lib/grids/common/pipes.ts    | 1 +
 .../src/lib/grids/grid/grid.component.html                 | 4 ++--
 .../hierarchical-grid/hierarchical-grid.component.html     | 4 ++--
 .../src/lib/grids/tree-grid/tree-grid.component.html       | 4 ++--
 src/app/hierarchical-grid/hierarchical-grid.sample.html    | 4 ++--
 src/app/hierarchical-grid/hierarchical-grid.sample.scss    | 5 +++++
 src/app/hierarchical-grid/hierarchical-grid.sample.ts      | 7 ++++++-
 7 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 src/app/hierarchical-grid/hierarchical-grid.sample.scss

diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
index 0415811d701..6bd196e10c1 100644
--- a/projects/igniteui-angular/src/lib/grids/common/pipes.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -86,6 +86,7 @@ export class IgxGridRowClassesPipe implements PipeTransform {
         index: number,
         mrl: boolean,
         filteredOut: boolean,
+        _rowData: any,
         _: number
     ) {
         const result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
index 1f14c02d64a..e313ae3b7e8 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -94,13 +94,13 @@
         </ng-container>
         <ng-template #record_template let-rowIndex="index" let-rowData let-disabledRow="disabled">
             <igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData" [disabled]="disabledRow"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger" #row>
             </igx-grid-row>
         </ng-template>
         <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
             <igx-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-grid-row>
         </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
index 830c52d00a1..cd2637c6fdb 100644
--- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -68,14 +68,14 @@
         </ng-template>
         <ng-template #hierarchical_record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
             <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [disabled]="disabledRow" [data]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger" #row>
             </igx-hierarchical-grid-row>
         </ng-template>
 
         <ng-template #pinned_hierarchical_record_template let-rowIndex="index" let-rowData>
             <igx-hierarchical-grid-row [gridID]="id" [index]="rowIndex" [data]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger" #row #pinnedRow>
             </igx-hierarchical-grid-row>
         </ng-template>
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
index 37f7dcbddfb..bb0de64e479 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html
@@ -71,13 +71,13 @@
         <ng-container *ngTemplateOutlet="hasPinnedRecords && !isRowPinningToTop ? pinnedRecordsTemplate : null"></ng-container>
         <ng-template #record_template let-rowIndex="index" let-disabledRow="disabled" let-rowData>
             <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData" [disabled]="disabledRow"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger" #row>
             </igx-tree-grid-row>
         </ng-template>
         <ng-template #pinned_record_template let-rowIndex="index" let-rowData>
             <igx-tree-grid-row [gridID]="id" [index]="rowIndex" [treeRow]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:data:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-tree-grid-row>
         </ng-template>
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html
index 4bbf58636c2..44d9c700776 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.html
+++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html
@@ -6,10 +6,10 @@ <h4 class="sample-title">Sample One</h4>
             style="display: block; width: 500px"></igx-buttongroup>
     </div>
     <button igxButton="raised" (click)="getState()">Get state</button>
-    <igx-hierarchical-grid [batchEditing]="true" #grid1 [data]="localData" [showExpandAll]="true" [pinning]="{rows: 0}" [hasChildrenKey]='"hasChild"' class="hgrid"
+    <igx-hierarchical-grid [batchEditing]="true" #grid1 [data]="localData" [showExpandAll]="true" [pinning]="{rows: 0}" class="hgrid"
         [displayDensity]="density" [rowSelection]="selectionMode" [autoGenerate]="false" [allowFiltering]="true"
         [rowDraggable]="true" [height]="'600px'" [width]="'800px'" [expandChildren]="rootExpanded"
-        #hGrid>
+        #hGrid [rowClasses]="rowClasses">
 
         <igx-grid-toolbar>
             <app-grid-search-box [grid]="grid1"></app-grid-search-box>
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.scss b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
new file mode 100644
index 00000000000..6dddbcf811e
--- /dev/null
+++ b/src/app/hierarchical-grid/hierarchical-grid.sample.scss
@@ -0,0 +1,5 @@
+:host::ng-deep {
+    .activeRow {
+        background-color: rgb(201, 241, 201);
+      }
+}
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts
index f1e547d500e..fa20d37069b 100644
--- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts
+++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts
@@ -10,7 +10,7 @@ import {
 
 @Component({
     selector: 'app-hierarchical-grid-sample',
-    styleUrls: ['hierarchical-grid.sample.css'],
+    styleUrls: ['hierarchical-grid.sample.scss'],
     templateUrl: 'hierarchical-grid.sample.html'
 })
 export class HierarchicalGridSampleComponent implements AfterViewInit {
@@ -34,6 +34,11 @@ export class HierarchicalGridSampleComponent implements AfterViewInit {
     public columns;
     public childColumns;
 
+    public evenCondition = (row: RowType) =>  parseInt(row.data['ID'], 0) % 2 === 0;
+    public rowClasses = {
+        activeRow: this.evenCondition,
+    };
+
     constructor(private cdr: ChangeDetectorRef) {
         this.displayDensities = [
             { label: 'compact', selected: this.density === 'compact', togglable: true },

From e963f352ec2b34768bf656898656161c128bfc44 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Tue, 29 Mar 2022 19:30:05 +0300
Subject: [PATCH 2/2] chore(*): Add for pivot too.

---
 .../src/lib/grids/pivot-grid/pivot-grid.component.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
index a3a05419774..b25854e66b7 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -51,7 +51,7 @@
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
             <igx-pivot-row [style.height.px]="renderedRowHeight" [gridID]="id" [index]="rowIndex" [data]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>
         </ng-template>