Merge pull request #7873 from IgniteUI/rkaraivanov/transaction-styles

fix(grid): Row editing transaction styles

Author: zdrawku

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

@@ -265,7 +265,7 @@ export class IgxStringReplacePipe implements PipeTransform {
 @Pipe({ name: 'transactionState' })
 export class IgxGridTransactionStatePipe implements PipeTransform {
 
-    transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any) {
+    transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any) {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {

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

@@ -88,7 +88,7 @@
 <ng-template #cellTemplate let-col>
         <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
@@ -124,7 +124,7 @@
         [class.igx-grid__td--pinned]="col.pinned"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
@@ -154,7 +154,7 @@
 <ng-template #mrlCellTemplate let-col>
     <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
@@ -190,7 +190,7 @@
 <ng-template #mrlExpandableCellTemplate let-col>
     <igx-expandable-grid-cell
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"

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

@@ -40,7 +40,7 @@
 <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
     <igx-hierarchical-grid-cell
         class="igx-grid__td igx-grid__td--fw"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--number]="col.dataType === 'number'"
         [class.igx-grid__td--bool]="col.dataType === 'boolean'"
@@ -87,7 +87,7 @@
 <ng-template #pinnedCellsTemplate let-col>
     <igx-hierarchical-grid-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--number]="col.dataType === 'number'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"

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

@@ -18,7 +18,7 @@
     <ng-template #cellTemplate>
         <igx-grid-cell
             class="igx-grid__td igx-grid__td--fw"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
@@ -47,7 +47,7 @@
     <ng-template #treeCellTemplate>
         <igx-tree-grid-cell
             class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
@@ -100,7 +100,7 @@
         <ng-template #cellTemplate>
             <igx-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
-                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
                 [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="col.dataType === 'number'"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
@@ -131,7 +131,7 @@
         <ng-template #treeCellTemplate>
             <igx-tree-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
-                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger"
+                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
                 [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"