Skip to content

Commit

Permalink
Show number of defined columns as rowChangesCount for new row with ba…
Browse files Browse the repository at this point in the history
…tch editing (#12234)

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

* chore(grid): add feature to CHANGELOG

* refactor(grid): use private property
  • Loading branch information
MonikaKirkova authored Nov 14, 2022
1 parent 76aa753 commit 6bc92f6
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 2 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
22 changes: 20 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid-add-row.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -45,7 +45,8 @@ describe('IgxGrid - Row Adding #grid', () => {
IgxAddRowComponent,
ColumnLayoutTestComponent,
DefaultGridMasterDetailComponent,
IgxGridRowEditingTransactionComponent
IgxGridRowEditingTransactionComponent,
IgxGridRowEditingDefinedColumnsComponent
],
imports: [
NoopAnimationsModule,
Expand Down Expand Up @@ -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);
});
});
});
12 changes: 12 additions & 0 deletions projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

0 comments on commit 6bc92f6

Please sign in to comment.