Show count of hidden columns when editing a row (#12264)

* feat(grid): show count of hidden columns when editing a row

* chore(grid): fix failing test

Author: MonikaKirkova

CHANGELOG.md

@@ -22,6 +22,9 @@ All notable changes for each version of this project will be documented in this
     - `dragIndicatorIconTemplate` - Gets/Sets the custom template used for row drag indicator.
     - `detailTemplate` - Gets/Sets the master-detail template.
 
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
+    - **Behavioral Change** - When editing a row, `rowChangesCount` and `hiddenColumnsCount`would be displayed.
+
 ## 14.2.0
 
 ### New Features

projects/igniteui-angular/src/lib/grids/grid/grid-row-editing.spec.ts

@@ -787,6 +787,7 @@ describe('IgxGrid - Row Editing #grid', () => {
         });
 
         it(`Should update row changes when focus overlay buttons on tabbing`, (async () => {
+            grid.getColumnByName("ID").hidden = true;
             grid.tbody.nativeElement.focus();
             fix.detectChanges();
 
@@ -807,7 +808,7 @@ describe('IgxGrid - Row Editing #grid', () => {
             UIInteractions.triggerEventHandlerKeyDown('tab', gridContent, false, true);
             fix.detectChanges();
 
-            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 1 changes in this row');
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 1 changes in this row and 1 hidden columns');
 
             // go to last editable cell
             grid.rowEditTabs.first.handleTab(UIInteractions.getKeyboardEvent('keydown', 'tab', false, true));
@@ -827,7 +828,7 @@ describe('IgxGrid - Row Editing #grid', () => {
             UIInteractions.triggerEventHandlerKeyDown('tab', gridContent);
             fix.detectChanges();
 
-            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 2 changes in this row');
+            expect(GridFunctions.getRowEditingBannerText(fix)).toBe('You have 2 changes in this row and 1 hidden columns');
         }));
 
         it(`Should focus last edited cell after click on editable buttons`, (async () => {

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

@@ -240,7 +240,7 @@
 </div>
 
 <ng-template #defaultRowEditText>
-    You have {{ rowChangesCount }} changes in this row
+    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns
 </ng-template>
 
 <ng-template #defaultRowEditActions>

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

@@ -193,7 +193,7 @@
     </div>
 </div>
 <ng-template #defaultRowEditText>
-    You have {{ rowChangesCount }} changes in this row
+    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns
 </ng-template>
 <ng-template #defaultRowEditActions>
     <button igxButton igxRowEditTabStop (click)="this.endRowEditTabStop(false, $event)">{{ this.resourceStrings.igx_grid_row_edit_btn_cancel }}</button>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts

@@ -1585,7 +1585,7 @@ describe('IgxHierarchicalGrid Runtime Row Island change Scenarios #hGrid', () =>
         const mainGridOverlayTextContent = mainGridOverlay.querySelector('.igx-banner__text').textContent;
         const mainGridOverlayActionsContent = mainGridOverlay.querySelector('.igx-banner__actions').textContent;
 
-        expect(mainGridOverlayTextContent).toBe(' You have 0 changes in this row\n');
+        expect(mainGridOverlayTextContent).toBe(' You have 0 changes in this row and 0 hidden columns\n');
         expect(mainGridOverlayActionsContent).toBe('CancelDone');
 
         hierarchicalGrid.expandRow(hierarchicalGrid.getRowByIndex(0).key);

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

@@ -181,7 +181,7 @@
 </div>
 
 <ng-template #defaultRowEditText>
-    You have {{ rowChangesCount }} changes in this row
+    You have {{ rowChangesCount }} changes in this row and {{ hiddenColumnsCount }} hidden columns
 </ng-template>
 
 <ng-template #defaultRowEditActions>