Skip to content

Commit 2bcbe15

Browse files
mpavlinovmpavlinov
authored
Merge branch '8.1.x' into astaev/issue4967-8.1.x
2 parents 1b33b03 + e948a41 commit 2bcbe15

15 files changed

+355
-230
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -753,7 +753,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
753753
const containerRect = this.container.nativeElement.getBoundingClientRect();
754754

755755
for (let index = 0; index < chipAraeChildren.length; index++) {
756-
if (Math.ceil(chipAraeChildren[index].getBoundingClientRect().left) < Math.ceil(containerRect.left)) {
756+
if (Math.ceil(chipAraeChildren[index].getBoundingClientRect().right) < Math.ceil(containerRect.left)) {
757757
count++;
758758
}
759759
}

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

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
258258
private _observer: MutationObserver;
259259
protected _destroyed = false;
260260
private overlayIDs = [];
261+
private _hostWidth;
261262
/**
262263
* An accessor that sets the resource strings.
263264
* By default it uses EN resources.
@@ -648,6 +649,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
648649
}
649650
}
650651

652+
/**
653+
* @hidden
654+
*/
655+
@HostBinding('style.width')
656+
get hostWidth() {
657+
return this._width || this._hostWidth;
658+
}
651659
/**
652660
* Returns the width of the `IgxGridComponent`.
653661
* ```typescript
@@ -656,7 +664,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
656664
* @memberof IgxGridBaseComponent
657665
*/
658666
@WatchChanges()
659-
@HostBinding('style.width')
660667
@Input()
661668
get width() {
662669
return this._width;
@@ -3063,6 +3070,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
30633070
return this._unpinnedWidth;
30643071
}
30653072

3073+
get isHorizontalScrollHidden() {
3074+
const diff = this.unpinnedWidth - this.totalWidth;
3075+
return this.width === null || diff >= 0;
3076+
}
3077+
30663078
/**
30673079
* @hidden
30683080
* Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
@@ -4043,7 +4055,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
40434055
*/
40444056
protected _derivePossibleWidth() {
40454057
if (!this.columnWidthSetByUser) {
4046-
this._columnWidth = this.getPossibleColumnWidth();
4058+
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
40474059
this.columnList.forEach((column: IgxColumnComponent) => {
40484060
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
40494061
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
@@ -4198,9 +4210,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41984210
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
41994211
}
42004212

4201-
if (this.showRowCheckboxes) {
4202-
computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
4203-
}
4213+
computedWidth -= this.getFeatureColumnsWidth();
42044214

42054215
if (this.showDragIcons) {
42064216
computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
@@ -4264,20 +4274,39 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42644274
}
42654275

42664276

4267-
if (!width) {
4268-
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
4277+
if (this.width === null || !width) {
4278+
width = this.getColumnWidthSum();
42694279
}
42704280

4271-
if (this.hasVerticalSroll()) {
4281+
if (this.hasVerticalSroll() && this.width !== null) {
42724282
width -= this.scrollWidth;
42734283
}
4274-
if (Number.isFinite(width) && width !== this.calcWidth) {
4284+
if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
42754285
this.calcWidth = width;
42764286
this.cdr.detectChanges();
42774287
}
42784288
this._derivePossibleWidth();
42794289
}
42804290

4291+
private getColumnWidthSum(): number {
4292+
let colSum = 0;
4293+
const cols = this.hasColumnLayouts ?
4294+
this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
4295+
cols.forEach((item) => {
4296+
const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1;
4297+
if (isWidthInPercent) {
4298+
item.width = MINIMUM_COLUMN_WIDTH + 'px';
4299+
}
4300+
colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
4301+
});
4302+
if (!colSum) {
4303+
return null;
4304+
}
4305+
this.cdr.detectChanges();
4306+
colSum += this.getFeatureColumnsWidth();
4307+
return colSum;
4308+
}
4309+
42814310
public hasVerticalSroll() {
42824311
if (!this._ngAfterViewInitPassed) { return false; }
42834312
const isScrollable = this.verticalScrollContainer.isScrollable();
@@ -4378,6 +4407,33 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43784407
this.cdr.detectChanges();
43794408
this.resetCaches();
43804409
}
4410+
4411+
if (this.zone.isStable) {
4412+
this.zone.run(() => {
4413+
this._applyWidthHostBinding();
4414+
this.cdr.detectChanges();
4415+
});
4416+
} else {
4417+
this.zone.onStable.pipe(first()).subscribe(() => {
4418+
this.zone.run(() => {
4419+
this._applyWidthHostBinding();
4420+
});
4421+
});
4422+
}
4423+
}
4424+
4425+
private _applyWidthHostBinding() {
4426+
let width = this._width;
4427+
if (width === null) {
4428+
let currentWidth = this.calcWidth;
4429+
if (this.hasVerticalSroll()) {
4430+
currentWidth += this.scrollWidth;
4431+
}
4432+
width = currentWidth + 'px';
4433+
this.resetCaches();
4434+
}
4435+
this._hostWidth = width;
4436+
this.cdr.markForCheck();
43814437
}
43824438

43834439
/**
@@ -4428,7 +4484,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
44284484
protected getUnpinnedWidth(takeHidden = false) {
44294485
let width = this.isPercentWidth ?
44304486
this.calcWidth :
4431-
parseInt(this.width, 10);
4487+
parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
44324488
if (this.hasVerticalSroll() && !this.isPercentWidth) {
44334489
width -= this.scrollWidth;
44344490
}

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

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3253,6 +3253,69 @@ describe('IgxGrid - Filtering Row UI actions', () => {
32533253
const chipDiv = GridFunctions.getFilterConditionChip(fix, 0).querySelector('.igx-chip__item');
32543254
expect(chipDiv.classList.contains('igx-chip__item--selected')).toBe(true, 'chip is not selected');
32553255
}));
3256+
3257+
it('Should not throw error when deleting the last chip', (async () => {
3258+
grid.width = '700px';
3259+
fix.detectChanges();
3260+
await wait(100);
3261+
3262+
GridFunctions.clickFilterCellChip(fix, 'ProductName');
3263+
fix.detectChanges();
3264+
3265+
// Add first chip.
3266+
GridFunctions.typeValueInFilterRowInput('a', fix);
3267+
await wait(16);
3268+
GridFunctions.submitFilterRowInput(fix);
3269+
await wait(100);
3270+
// Add second chip.
3271+
GridFunctions.typeValueInFilterRowInput('e', fix);
3272+
await wait(16);
3273+
GridFunctions.submitFilterRowInput(fix);
3274+
await wait(100);
3275+
// Add third chip.
3276+
GridFunctions.typeValueInFilterRowInput('i', fix);
3277+
await wait(16);
3278+
GridFunctions.submitFilterRowInput(fix);
3279+
await wait(100);
3280+
// Add fourth chip.
3281+
GridFunctions.typeValueInFilterRowInput('o', fix);
3282+
await wait(16);
3283+
GridFunctions.submitFilterRowInput(fix);
3284+
await wait(200);
3285+
3286+
verifyMultipleChipsVisibility(fix, [false, false, false, true]);
3287+
const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
3288+
let chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
3289+
expect(chips.length).toBe(4);
3290+
3291+
const leftArrowButton = GridFunctions.getFilterRowLeftArrowButton(fix).nativeElement;
3292+
expect(leftArrowButton).toBeTruthy('Left scroll arrow should be visible');
3293+
3294+
const rightArrowButton = GridFunctions.getFilterRowRightArrowButton(fix).nativeElement;
3295+
expect(rightArrowButton).toBeTruthy('Right scroll arrow should be visible');
3296+
expect(grid.rowList.length).toBe(2);
3297+
3298+
let chipToRemove = filterUIRow.componentInstance.expressionsList[3];
3299+
expect(() => { filterUIRow.componentInstance.onChipRemoved(null, chipToRemove); })
3300+
.not.toThrowError(/\'id\' of undefined/);
3301+
await wait(200);
3302+
fix.detectChanges();
3303+
3304+
verifyMultipleChipsVisibility(fix, [false, true, false]);
3305+
chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
3306+
expect(chips.length).toBe(3);
3307+
3308+
chipToRemove = filterUIRow.componentInstance.expressionsList[2];
3309+
expect(() => { filterUIRow.componentInstance.onChipRemoved(null, chipToRemove); })
3310+
.not.toThrowError(/\'id\' of undefined/);
3311+
await wait(200);
3312+
fix.detectChanges();
3313+
3314+
verifyMultipleChipsVisibility(fix, [true, false]);
3315+
chips = filterUIRow.queryAll(By.directive(IgxChipComponent));
3316+
expect(chips.length).toBe(2);
3317+
expect(grid.rowList.length).toBe(3);
3318+
}));
32563319
});
32573320

32583321
describe(null, () => {
@@ -3513,7 +3576,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
35133576
fix.detectChanges();
35143577

35153578
const headers: DebugElement[] = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
3516-
const headerResArea = headers[2].children[0].nativeElement;
3579+
const headerResArea = headers[2].children[1].nativeElement;
35173580

35183581
const filterIcon = headerResArea.querySelector('.igx-excel-filter__icon');
35193582
filterIcon.click();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@
9696
<div igxGridBody (keydown.control.c)="copyHandlerIE()" (copy)="copyHandler($event)" class="igx-grid__tbody">
9797
<div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event"
9898
(onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
99-
[style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)'
99+
[style.height.px]='calcHeight' [style.width.px]='calcWidth ? calcWidth + 1 : null' #tbody (scroll)='scrollHandler($event)'
100100
(wheel)="wheelHandler()">
101101
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0"
102102
[igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left"
@@ -157,7 +157,7 @@
157157
[style.width.px]="scrollWidth"></div>
158158
</div>
159159

160-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
160+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
161161
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
162162
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
163163
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1383,6 +1383,22 @@ describe('IgxGrid Component Tests', () => {
13831383
expect(virtDir.getSizeAt(2)).toEqual(150);
13841384

13851385
});
1386+
1387+
it('should render all columns if grid width is set to null.', async () => {
1388+
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
1389+
fix.componentInstance.initColumnsRows(5, 30);
1390+
const grid = fix.componentInstance.grid;
1391+
fix.detectChanges();
1392+
1393+
grid.width = null;
1394+
fix.detectChanges();
1395+
await wait(16);
1396+
1397+
// grid should render all columns and all should be visible.
1398+
const cells = grid.getRowByIndex(0).cells;
1399+
expect(cells.length).toBe(30);
1400+
expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
1401+
});
13861402
});
13871403

13881404
describe('IgxGrid - API methods', () => {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,7 @@
130130
[style.width.px]="scrollWidth"></div>
131131
</div>
132132

133-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
133+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
134134
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
135135
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
136136
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

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

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -518,7 +518,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
518518
return width;
519519
}
520520

521-
private getDefaultExpanderWidth(): number {
521+
private getDefaultExpanderWidth(): number {
522522
switch (this.displayDensity) {
523523
case DisplayDensity.cosy:
524524
return 57;
@@ -709,16 +709,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
709709
}
710710
}
711711

712-
/**
713-
* @hidden
714-
*/
715-
public getPossibleColumnWidth() {
716-
let computedWidth = this.calcWidth || parseInt(
717-
this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
718-
computedWidth -= this.headerHierarchyExpander.nativeElement.clientWidth;
719-
return super.getPossibleColumnWidth(computedWidth);
720-
}
721-
722712
protected getChildGrids(inDeph?: boolean) {
723713
return this.hgridAPI.getChildGrids(inDeph);
724714
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@
111111
[style.width.px]="scrollWidth"></div>
112112
</div>
113113

114-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
114+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
115115
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
116116
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
117117
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>

0 commit comments

Comments
 (0)