Skip to content

Commit 23dc339

Browse files
MayaKirovampavlinov
MayaKirova
authored and
mpavlinov
committed
fix(igxGrid): Grid should render all columns when grid width is set to null. (#5396)
* fix(igxGrid): Grid should render all columns when grid width is set to null. * chore(*): Fixing build. * chore(*): Handling null width inetgration with other grid features that change the total grid width (row selectors, expansion indicators etc.). * chore(*): Additional handling for null width in combination with: hidden columns, multi-column headers, auto-generated columns, columns with no width. Making sure host binded width prop is set only after zone is stable to prevent timing issues where the same prop value changes during same change detection cycle and throws errors. * chore(*): Use zone.run for interactions that change the width when ran outside the zone (like resizing). * chore(*): Adding support for null width + mrl. Fixing getPossibleColumnWidth to depend on getFeatureColumnsWidth so that it takes in cosideration all possible feature columns (not just row selectors). * chore(*): If width is in % when grid width is null use min width. * chore(*): In case width is null allow setting null for width host bindings so that grid will expact based on content. In case width is null and column width in % then set width to min width explicitly. * chore(*): Fixing issues with width = null. * chore(*): In case width is null, always apply minwidth to columns as default. * chore(*): Make check more specific to null. * chore(*): Fixing tests. * chore(*): Fixing another test. * chore(*): DetectChanges before feature's column width is calculated so that all option changes are applied.
1 parent c725beb commit 23dc339

File tree

7 files changed

+88
-26
lines changed

7 files changed

+88
-26
lines changed

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

Lines changed: 66 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -248,6 +248,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
248248
private _observer: MutationObserver;
249249
protected _destroyed = false;
250250
private overlayIDs = [];
251+
private _hostWidth;
251252
/**
252253
* An accessor that sets the resource strings.
253254
* By default it uses EN resources.
@@ -643,6 +644,13 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
643644
}
644645
}
645646

647+
/**
648+
* @hidden
649+
*/
650+
@HostBinding('style.width')
651+
get hostWidth() {
652+
return this._width || this._hostWidth;
653+
}
646654
/**
647655
* Returns the width of the `IgxGridComponent`.
648656
* ```typescript
@@ -651,7 +659,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
651659
* @memberof IgxGridBaseComponent
652660
*/
653661
@WatchChanges()
654-
@HostBinding('style.width')
655662
@Input()
656663
public get width() {
657664
return this._width;
@@ -3007,6 +3014,11 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
30073014
return this._unpinnedWidth;
30083015
}
30093016

3017+
get isHorizontalScrollHidden() {
3018+
const diff = this.unpinnedWidth - this.totalWidth;
3019+
return this.width === null || diff >= 0;
3020+
}
3021+
30103022
/**
30113023
* @hidden
30123024
* Gets the combined width of the columns that are specific to the enabled grid features. They are fixed.
@@ -3987,7 +3999,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
39873999
*/
39884000
protected _derivePossibleWidth() {
39894001
if (!this.columnWidthSetByUser) {
3990-
this._columnWidth = this.getPossibleColumnWidth();
4002+
this._columnWidth = this.width !== null ? this.getPossibleColumnWidth() : MINIMUM_COLUMN_WIDTH + 'px';
39914003
this.columnList.forEach((column: IgxColumnComponent) => {
39924004
if (this.hasColumnLayouts && parseInt(this._columnWidth, 10)) {
39934005
const columnWidthCombined = parseInt(this._columnWidth, 10) * (column.colEnd ? column.colEnd - column.colStart : 1);
@@ -4140,9 +4152,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
41404152
parseInt(this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
41414153
}
41424154

4143-
if (this.showRowCheckboxes) {
4144-
computedWidth -= this.headerCheckboxContainer ? this.headerCheckboxContainer.nativeElement.offsetWidth : 0;
4145-
}
4155+
computedWidth -= this.getFeatureColumnsWidth();
41464156

41474157
if (this.showDragIcons) {
41484158
computedWidth -= this.headerDragContainer ? this.headerDragContainer.nativeElement.offsetWidth : 0;
@@ -4206,20 +4216,39 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
42064216
}
42074217

42084218

4209-
if (!width) {
4210-
width = this.columnList.reduce((sum, item) => sum + parseInt((item.width || item.defaultWidth), 10), 0);
4219+
if (this.width === null || !width) {
4220+
width = this.getColumnWidthSum();
42114221
}
42124222

4213-
if (this.hasVerticalSroll()) {
4223+
if (this.hasVerticalSroll() && this.width !== null) {
42144224
width -= this.scrollWidth;
42154225
}
4216-
if (Number.isFinite(width) && width !== this.calcWidth) {
4226+
if ((Number.isFinite(width) || width === null) && width !== this.calcWidth) {
42174227
this.calcWidth = width;
42184228
this.cdr.detectChanges();
42194229
}
42204230
this._derivePossibleWidth();
42214231
}
42224232

4233+
private getColumnWidthSum(): number {
4234+
let colSum = 0;
4235+
const cols = this.hasColumnLayouts ?
4236+
this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
4237+
cols.forEach((item) => {
4238+
const isWidthInPercent = item.width && typeof item.width === 'string' && item.width.indexOf('%') !== -1;
4239+
if (isWidthInPercent) {
4240+
item.width = MINIMUM_COLUMN_WIDTH + 'px';
4241+
}
4242+
colSum += parseInt((item.width || item.defaultWidth), 10) || MINIMUM_COLUMN_WIDTH;
4243+
});
4244+
if (!colSum) {
4245+
return null;
4246+
}
4247+
this.cdr.detectChanges();
4248+
colSum += this.getFeatureColumnsWidth();
4249+
return colSum;
4250+
}
4251+
42234252
public hasVerticalSroll() {
42244253
if (!this._ngAfterViewInitPassed) { return false; }
42254254
const isScrollable = this.verticalScrollContainer.isScrollable();
@@ -4317,6 +4346,33 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43174346
this.cdr.detectChanges();
43184347
this.resetCaches();
43194348
}
4349+
4350+
if (this.zone.isStable) {
4351+
this.zone.run(() => {
4352+
this._applyWidthHostBinding();
4353+
this.cdr.detectChanges();
4354+
});
4355+
} else {
4356+
this.zone.onStable.pipe(first()).subscribe(() => {
4357+
this.zone.run(() => {
4358+
this._applyWidthHostBinding();
4359+
});
4360+
});
4361+
}
4362+
}
4363+
4364+
private _applyWidthHostBinding() {
4365+
let width = this._width;
4366+
if (width === null) {
4367+
let currentWidth = this.calcWidth;
4368+
if (this.hasVerticalSroll()) {
4369+
currentWidth += this.scrollWidth;
4370+
}
4371+
width = currentWidth + 'px';
4372+
this.resetCaches();
4373+
}
4374+
this._hostWidth = width;
4375+
this.cdr.markForCheck();
43204376
}
43214377

43224378
/**
@@ -4367,7 +4423,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
43674423
protected getUnpinnedWidth(takeHidden = false) {
43684424
let width = this.isPercentWidth ?
43694425
this.calcWidth :
4370-
parseInt(this._width, 10);
4426+
parseInt(this.width, 10) || parseInt(this.hostWidth, 10) || this.calcWidth;
43714427
if (this.hasVerticalSroll() && !this.isPercentWidth) {
43724428
width -= this.scrollWidth;
43734429
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3508,7 +3508,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
35083508
fix.detectChanges();
35093509

35103510
const headers: DebugElement[] = fix.debugElement.queryAll(By.directive(IgxGridHeaderGroupComponent));
3511-
const headerResArea = headers[2].children[0].nativeElement;
3511+
const headerResArea = headers[2].children[1].nativeElement;
35123512

35133513
const filterIcon = headerResArea.querySelector('.igx-excel-filter__icon');
35143514
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
@@ -92,7 +92,7 @@
9292
</div>
9393

9494
<div igxGridBody class="igx-grid__tbody">
95-
<div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='calcHeight' [style.width.px]='calcWidth + 1' #tbody (scroll)='scrollHandler($event)' (wheel)="wheelHandler()">
95+
<div class="igx-grid__tbody-content" role="rowgroup" (onDragStop)="selectionService.dragMode = $event" (onDragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='calcHeight' [style.width.px]='calcWidth ? calcWidth + 1 : null' #tbody (scroll)='scrollHandler($event)' (wheel)="wheelHandler()">
9696
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length <= 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-left"></span>
9797
<span *ngIf="hasMovableColumns && draggedColumn && pinnedColumns.length > 0" [igxColumnMovingDrop]="parentVirtDir" [attr.droppable]="true" id="left" class="igx-grid__scroll-on-drag-pinned" [style.left.px]="pinnedWidth"></span>
9898
<ng-template igxGridFor let-rowData [igxGridForOf]="data
@@ -139,7 +139,7 @@
139139
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
140140
</div>
141141

142-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
142+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
143143
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
144144
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
145145
<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
@@ -1354,6 +1354,22 @@ describe('IgxGrid Component Tests', () => {
13541354
expect(virtDir.getSizeAt(2)).toEqual(150);
13551355

13561356
});
1357+
1358+
it('should render all columns if grid width is set to null.', async () => {
1359+
const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
1360+
fix.componentInstance.initColumnsRows(5, 30);
1361+
const grid = fix.componentInstance.grid;
1362+
fix.detectChanges();
1363+
1364+
grid.width = null;
1365+
fix.detectChanges();
1366+
await wait(16);
1367+
1368+
// grid should render all columns and all should be visible.
1369+
const cells = grid.getRowByIndex(0).cells;
1370+
expect(cells.length).toBe(30);
1371+
expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
1372+
});
13571373
});
13581374

13591375
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
@@ -125,7 +125,7 @@
125125
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
126126
</div>
127127

128-
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="unpinnedWidth - totalWidth >= 0">
128+
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
129129
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
130130
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
131131
<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
@@ -541,7 +541,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
541541
return width;
542542
}
543543

544-
private getDefaultExpanderWidth(): number {
544+
private getDefaultExpanderWidth(): number {
545545
switch (this.displayDensity) {
546546
case DisplayDensity.cosy:
547547
return 57;
@@ -732,16 +732,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
732732
}
733733
}
734734

735-
/**
736-
* @hidden
737-
*/
738-
public getPossibleColumnWidth() {
739-
let computedWidth = this.calcWidth || parseInt(
740-
this.document.defaultView.getComputedStyle(this.nativeElement).getPropertyValue('width'), 10);
741-
computedWidth -= this.headerHierarchyExpander.nativeElement.clientWidth;
742-
return super.getPossibleColumnWidth(computedWidth);
743-
}
744-
745735
protected getChildGrids(inDeph?: boolean) {
746736
return this.hgridAPI.getChildGrids(inDeph);
747737
}

‎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
@@ -99,7 +99,7 @@
9999
<div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
100100
</div>
101101

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

0 commit comments

Comments
 (0)