Show number of defined columns as rowChangesCount for new row with batch editing (#12234)

* feat(grid): show correct number of changes for new row

* chore(grid): add feature to CHANGELOG

* refactor(grid): use private property

Author: MonikaKirkova

CHANGELOG.md

@@ -22,6 +22,7 @@ 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.
 
+    - **Behavioral Change** - When adding new row in grid with enabled batch editing, `rowChangesCount` displays the number of the defined columns.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When editing a row, `rowChangesCount` and `hiddenColumnsCount`would be displayed.
 

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

@@ -3219,6 +3219,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             Object.keys(obj).forEach(key => isObject(obj[key]) ? changes += f(obj[key]) : changes++);
             return changes;
         };
+        if (this.transactions.getState(this.crudService.row.id)?.type === TransactionType.ADD) {
+            return this._columns.filter(c => c.field).length;
+        }
         const rowChanges = this.transactions.getAggregatedValue(this.crudService.row.id, false);
         return rowChanges ? f(rowChanges) : 0;
     }

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

@@ -5,7 +5,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { DebugElement } from '@angular/core';
 import { GridFunctions, GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
 import {
-    IgxAddRowComponent, IgxGridRowEditingTransactionComponent
+    IgxAddRowComponent, IgxGridRowEditingDefinedColumnsComponent, IgxGridRowEditingTransactionComponent
 } from '../../test-utils/grid-samples.spec';
 
 import { By } from '@angular/platform-browser';
@@ -45,7 +45,8 @@ describe('IgxGrid - Row Adding #grid', () => {
                 IgxAddRowComponent,
                 ColumnLayoutTestComponent,
                 DefaultGridMasterDetailComponent,
-                IgxGridRowEditingTransactionComponent
+                IgxGridRowEditingTransactionComponent,
+                IgxGridRowEditingDefinedColumnsComponent
             ],
             imports: [
                 NoopAnimationsModule,
@@ -1082,5 +1083,22 @@ describe('IgxGrid - Row Adding #grid', () => {
             expect(states[0].type).toEqual(TransactionType.ADD);
             expect(states[0].newValue['ProductName']).toEqual('aaa');
         });
+
+        it('Should display number of defined columns for rowChangesCount', () => {
+            fixture = TestBed.createComponent(IgxGridRowEditingDefinedColumnsComponent);
+            fixture.detectChanges();
+            grid = fixture.componentInstance.grid;
+            
+            const row = grid.rowList.first;
+            row.beginAddRow();
+            fixture.detectChanges();
+            endTransition();
+
+            let cellElem = grid.gridAPI.get_cell_by_index(10, 'ProductName');
+            UIInteractions.simulateDoubleClickAndSelectEvent(cellElem);
+            fixture.detectChanges();
+
+            expect(grid.rowChangesCount).toEqual(3);
+        });
     });
 });

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -2575,3 +2575,15 @@ export class ObjectCloneStrategy implements IDataCloneStrategy {
         return clonedData;
     }
 }
+
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [batchEditing]="true" [primaryKey]="'ProductID'" width="900px" height="900px" [rowEditable]="true" >
+        <igx-column field="ProductID" header="Product ID" width="150px" [hidden]="true"></igx-column>
+        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="200px"></igx-column>
+        <igx-column field="InStock" header="In Stock" [dataType]="'boolean'" width="100px"></igx-column>
+    </igx-grid>`
+})
+export class IgxGridRowEditingDefinedColumnsComponent extends BasicGridComponent {
+    public data = SampleTestData.foodProductData();
+}