Address review comments

Author: rkaraivanov

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

@@ -88,23 +88,26 @@ export class IgxGridRowClassesPipe implements PipeTransform {
     public transform(
         cssClasses: CSSProp,
         row: _RowType,
-        rowData: any,
+        editMode: boolean,
         selected: boolean,
         dirty: boolean,
         deleted: boolean,
         dragging: boolean,
         index: number,
         mrl: boolean,
+        filteredOut: boolean,
         _: number
     ) {
         const result = new Set(['igx-grid__tr', index % 2 ? row.grid.evenRowCSS : row.grid.oddRowCSS]);
         const mapping = [
             [selected, 'igx-grid__tr--selected'],
-            [row.inEditMode, 'igx-grid_-tr--edit'],
+            [editMode, 'igx-grid__tr--edit'],
             [dirty, 'igx-grid__tr--edited'],
             [deleted, 'igx-grid__tr--deleted'],
             [dragging, 'igx-grid__tr--drag'],
-            [mrl, 'igx-grid__tr--mrl']
+            [mrl, 'igx-grid__tr--mrl'],
+            // Tree grid only
+            [filteredOut, 'igx-grid__tr--filtered']
         ];
 
         for (const [state, _class] of mapping) {
@@ -113,14 +116,10 @@ export class IgxGridRowClassesPipe implements PipeTransform {
             }
         }
 
-        if (row instanceof IgxTreeGridRowComponent && row.treeRow.isFilteredOutParent) {
-            result.add('igx-grid__tr--filtered');
-        }
-
         for (const cssClass of Object.keys(cssClasses ?? {})) {
             const callbackOrValue = cssClasses[cssClass];
             this.row.index = index;
-            (this.row as any)._data = rowData;
+            (this.row as any)._data = row.rowData;
             const apply = typeof callbackOrValue === 'function' ? callbackOrValue(this.row) : callbackOrValue;
             if (apply) {
                 result.add(cssClass);

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" [rowData]="rowData" [disabled]="disabledRow"
-                [ngClass]="rowClasses | igxGridRowClasses:row:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData: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" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-grid-row>
         </ng-template>

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" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData: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" [rowData]="rowData"
-                [ngClass]="rowClasses | igxGridRowClasses:row:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row #pinnedRow>
             </igx-hierarchical-grid-row>
         </ng-template>

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

@@ -70,13 +70,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:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData: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:rowData:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:pipeTrigger"
+                [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:row.treeRow.isFilteredOutParent:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger"#row #pinnedRow>
             </igx-tree-grid-row>
         </ng-template>