Skip to content

Commit 7f5f228

Browse files
MayaKirovaMKirovazdrawkumddragnevdkamburov
authored
fix(igxGrid): Re-calculate column auto-sizes on data change. (#12324)
* fix(igxGrid): Re-calculate column auto-sizes on data change. * chore(*): Remove wrong import. * chore(*): Add test. * chore(*): Due to performance concerns limit autosizing only on the initial data load. Expose public api in case auto-sizes need to be recalculated. * chore(*): Wait for zone stable before mesuring the columns. * chore(*): Add note in changelog. * chore(*): Move changelog note under 15.0.1 Co-authored-by: MKirova <MKirova@DEV-MKIROVA> Co-authored-by: Zdravko Kolev <[email protected]> Co-authored-by: Martin Dragnev <[email protected]> Co-authored-by: Deyan Kamburov <[email protected]> Co-authored-by: Stamen Stoychev <[email protected]>
1 parent 45d7f19 commit 7f5f228

File tree

6 files changed

+195
-111
lines changed

6 files changed

+195
-111
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5-
65
## 15.0.1
76

7+
- `IgxGrid`
8+
- Added new auto-sizing API `recalculateAutoSizes` that recalculates widths of columns that have size set to `auto`. Can be used in scenarios where you want to auto-size the columns again post initialization.
89
- `igxPivotGrid`
910
- Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
1011

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4435,6 +4435,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
44354435
);
44364436
}
44374437

4438+
/**
4439+
* Recalculates all widths of columns that have size set to `auto`.
4440+
*
4441+
* @example
4442+
* ```typescript
4443+
* this.grid1.recalculateAutoSizes();
4444+
* ```
4445+
*/
4446+
public recalculateAutoSizes() {
4447+
// reset auto-size and calculate it again.
4448+
this._columns.forEach( x => x.autoSize = undefined);
4449+
this.resetCaches();
4450+
this.zone.onStable.pipe(first()).subscribe(() => {
4451+
this.cdr.detectChanges();
4452+
this.autoSizeColumnsInView();
4453+
});
4454+
}
4455+
44384456
/**
44394457
* Returns an array of visible `IgxColumnComponent`s.
44404458
*

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1337,6 +1337,66 @@ describe('IgxGrid - Column properties #grid', () => {
13371337
const widths = grid.columns.map(x => x.width);
13381338
expect(widths).toEqual(['95px', '240px', '149px', '159px', '207px', '114px', '86px', '108px', '130px', '130px']);
13391339
}));
1340+
1341+
it('should auto-size on initial data loaded.', fakeAsync(() => {
1342+
const fix = TestBed.createComponent(ResizableColumnsComponent);
1343+
fix.componentInstance.data = [];
1344+
fix.componentInstance.columns = [
1345+
{ field: 'ID', width: 'auto' },
1346+
{ field: 'CompanyName', width: 'auto' },
1347+
{ field: 'ContactName', width: 'auto' },
1348+
{ field: 'ContactTitle', width: 'auto' },
1349+
{ field: 'Address', width: 'auto' },
1350+
{ field: 'City', width: 'auto' },
1351+
{ field: 'Region', width: 'auto' },
1352+
{ field: 'PostalCode', width: 'auto' },
1353+
{ field: 'Phone', width: 'auto' },
1354+
{ field: 'Fax', width: 'auto' }
1355+
];
1356+
fix.detectChanges();
1357+
tick();
1358+
const grid = fix.componentInstance.instance;
1359+
// resize grid so that all columns are in view
1360+
grid.width = '1500px';
1361+
fix.detectChanges();
1362+
tick();
1363+
let widths = grid.columns.map(x => x.width);
1364+
expect(widths).toEqual(['80px', '130px', '121px', '114px', '92px', '80px', '86px', '108px', '82px', '80px']);
1365+
fix.componentInstance.data = SampleTestData.contactInfoData();
1366+
fix.detectChanges();
1367+
tick();
1368+
fix.detectChanges();
1369+
widths = grid.columns.map(x => x.width);
1370+
expect(widths).toEqual(['95px', '240px', '145px', '159px', '207px', '114px', '86px', '108px', '130px', '130px']);
1371+
}));
1372+
1373+
it('should recalculate sizes via the recalculateAutoSizes API ', fakeAsync(() => {
1374+
const fix = TestBed.createComponent(ResizableColumnsComponent);
1375+
fix.detectChanges();
1376+
tick();
1377+
const grid = fix.componentInstance.instance;
1378+
expect(grid.columns[0].width).toBe('95px');
1379+
expect(grid.columns[1].width).toBe('207px');
1380+
1381+
grid.data = [
1382+
{
1383+
ID: 'VeryVeryVeryLongID',
1384+
Address: 'Avda. de la Constitución 2222 Obere Str. 57'
1385+
}
1386+
];
1387+
fix.detectChanges();
1388+
// no width change on new data.
1389+
expect(grid.columns[0].width).toBe('95px');
1390+
expect(grid.columns[1].width).toBe('207px');
1391+
1392+
1393+
// use api to force recalculation
1394+
grid.recalculateAutoSizes();
1395+
fix.detectChanges();
1396+
tick();
1397+
expect(grid.columns[0].width).toBe('164px');
1398+
expect(grid.columns[1].width).toBe('279px');
1399+
}));
13401400
});
13411401

13421402
});

‎projects/igniteui-angular/src/lib/grids/grid/grid.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -322,6 +322,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
322322
}
323323

324324
public set data(value: any[] | null) {
325+
const dataLoaded = (!this._data || this._data.length === 0) && value && value.length > 0;
325326
this._data = value || [];
326327
this.summaryService.clearSummaryCache();
327328
if (this.shouldGenerate) {
@@ -331,6 +332,10 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
331332
if (this.isPercentHeight) {
332333
this.notifyChanges(true);
333334
}
335+
// check if any columns have width auto and if so recalculate their auto-size on data loaded.
336+
if (dataLoaded && this._columns.some(x => (x as any)._width === 'auto')) {
337+
this.recalculateAutoSizes();
338+
}
334339
}
335340

336341
/**

‎src/app/grid-auto-size/grid-auto-size.sample.ts‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,19 @@ export class GridAutoSizeSampleComponent implements OnInit {
3434

3535
/* eslint-disable max-len */
3636
this.columns = [
37-
{ field: 'ID', width: '25%', resizable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string' },
38-
{ field: 'CompanyName', width: '25%', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'},
39-
{ field: 'ContactName', width: '25%', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
40-
{ field: 'ContactTitle', width: '25%', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
41-
{ field: 'Address', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
42-
{ field: 'City', width: 150, resizable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' },
43-
{ field: 'Region', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
44-
{ field: 'PostalCode', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
45-
{ field: 'Phone', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
46-
{ field: 'Fax', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
47-
{ field: 'Employees', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'number' },
48-
{ field: 'DateCreated', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'date' },
49-
{ field: 'Contract', width: 150, resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'boolean' }
37+
{ field: 'ID', width: 'auto', resizable: true, sortable: false, filterable: true, groupable: true, summary: true, type: 'string' },
38+
{ field: 'CompanyName', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string'},
39+
{ field: 'ContactName', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
40+
{ field: 'ContactTitle', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
41+
{ field: 'Address', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
42+
{ field: 'City', width: 'auto', resizable: true, sortable: false, filterable: false, groupable: true, summary: true, type: 'string' },
43+
{ field: 'Region', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
44+
{ field: 'PostalCode', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
45+
{ field: 'Phone', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
46+
{ field: 'Fax', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'string' },
47+
{ field: 'Employees', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'number' },
48+
{ field: 'DateCreated', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: false, type: 'date' },
49+
{ field: 'Contract', width: 'auto', resizable: true, sortable: true, filterable: true, groupable: true, summary: true, type: 'boolean' }
5050
];
5151
/* eslint-enable max-len */
5252
this.selectionMode = GridSelectionMode.multiple;

0 commit comments

Comments
 (0)