Skip to content

Commit 709e562

Browse files
ChronosSFChronosSF
authored
Merge branch '15.0.x' into mtsvyatkova/issue-12056
2 parents bf3e647 + 8226a58 commit 709e562

File tree

9 files changed

+906
-196
lines changed

9 files changed

+906
-196
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

‎package-lock.json‎

Lines changed: 699 additions & 69 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,11 @@
7777
"devDependencies": {
7878
"@angular-devkit/build-angular": "^15.0.0",
7979
"@angular-devkit/schematics": "^15.0.0",
80-
"@angular-eslint/builder": "^15.0.0",
81-
"@angular-eslint/eslint-plugin": "^15.0.0",
82-
"@angular-eslint/eslint-plugin-template": "^15.0.0",
83-
"@angular-eslint/schematics": "^15.0.0",
84-
"@angular-eslint/template-parser": "^15.0.0",
80+
"@angular-eslint/builder": "^15.1.0",
81+
"@angular-eslint/eslint-plugin": "^15.1.0",
82+
"@angular-eslint/eslint-plugin-template": "^15.1.0",
83+
"@angular-eslint/schematics": "^15.1.0",
84+
"@angular-eslint/template-parser": "^15.1.0",
8585
"@angular/cli": "^15.0.0",
8686
"@angular/compiler-cli": "^15.0.0",
8787
"@angular/language-service": "^15.0.0",

‎projects/igniteui-angular/src/lib/directives/mask/mask.directive.spec.ts‎

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,10 @@ describe('igxMask', () => {
3636
IgxMaskModule
3737
],
3838
providers: [PlatformUtil]
39-
})
40-
.compileComponents();
39+
}).compileComponents();
4140
}));
4241

43-
it('Initializes an input with default mask', fakeAsync(() => {
42+
it('Initializes an input with default mask', () => {
4443
const fixture = TestBed.createComponent(DefMaskComponent);
4544
fixture.detectChanges();
4645
const input = fixture.componentInstance.input;
@@ -49,18 +48,15 @@ describe('igxMask', () => {
4948
expect(input.nativeElement.getAttribute('placeholder')).toEqual('CCCCCCCCCC');
5049

5150
input.nativeElement.dispatchEvent(new Event('click'));
52-
tick();
5351

5452
input.nativeElement.value = '@#$YUA123';
5553
fixture.detectChanges();
5654
input.nativeElement.dispatchEvent(new Event('input'));
57-
tick();
5855

5956
input.nativeElement.dispatchEvent(new Event('focus'));
60-
tick();
6157

6258
expect(input.nativeElement.value).toEqual('@#$YUA123_');
63-
}));
59+
});
6460

6561
it('Mask rules - digit (0-9) or a space', fakeAsync(() => {
6662
const fixture = TestBed.createComponent(DigitSpaceMaskComponent);
@@ -391,7 +387,7 @@ describe('igxMask', () => {
391387
input.nativeElement.dispatchEvent(new DragEvent('dragleave'));
392388
expect(input.nativeElement.value).toEqual('');
393389

394-
// should preserve state on dragenter
390+
// should preserve state on dragenter
395391
input.nativeElement.dispatchEvent(new Event('focus'));
396392
UIInteractions.simulatePaste('76', fixture.debugElement.query(By.css('.igx-input-group__input')), 3, 3);
397393
fixture.detectChanges();
@@ -505,19 +501,19 @@ describe('igxMask', () => {
505501
UIInteractions.simulatePaste('1234567890', inputElement, 1, 1);
506502
fixture.detectChanges();
507503
expect(inputElement.nativeElement.value).toEqual('(123) 4567-890');
508-
504+
509505
const inputHTMLElement = inputElement.nativeElement as HTMLInputElement;
510506
inputHTMLElement.setSelectionRange(6, 8);
511507
fixture.detectChanges();
512508
expect(inputElement.nativeElement.selectionStart).toEqual(6);
513509
expect(inputElement.nativeElement.selectionEnd).toEqual(8);
514510

515511
UIInteractions.triggerEventHandlerKeyDown('Delete', inputElement);
516-
inputElement.triggerEventHandler('input', { inputType: 'test' });
512+
inputElement.nativeElement.dispatchEvent(new Event('input'));
517513
fixture.detectChanges();
518514
expect(inputElement.nativeElement.selectionStart).toEqual(8);
519515
expect(inputElement.nativeElement.selectionEnd).toEqual(8);
520-
expect(inputHTMLElement.value).toEqual('(123) __67-890');
516+
expect(inputHTMLElement.value).toEqual('(123) __67-890');
521517
});
522518
});
523519

‎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)