Skip to content

Commit b1abcc0

Browse files
ChronosSFChronosSF
authored
Merge pull request #7625 from IgniteUI/mkirova/mch-percentage
feat(igxGrid): Handle % width for MCH.
2 parents 67b4fbb + fc514e4 commit b1abcc0

File tree

5 files changed

+123
-37
lines changed

5 files changed

+123
-37
lines changed

‎projects/igniteui-angular/src/lib/grids/columns/column-group.component.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -323,18 +323,14 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
323323
* @memberof IgxColumnGroupComponent
324324
*/
325325
get width() {
326-
let isChildrenWidthInPercent = false, width;
326+
let width;
327327
width = `${this.children.reduce((acc, val) => {
328328
if (val.hidden) {
329329
return acc;
330330
}
331-
if (typeof val.width === 'string' && val.width.indexOf('%') !== -1) {
332-
isChildrenWidthInPercent = true;
333-
return acc + parseInt(val.width, 10);
334-
}
335331
return acc + parseInt(val.calcWidth, 10);
336332
}, 0)}`;
337-
return isChildrenWidthInPercent ? width + '%' : width + 'px';
333+
return width + 'px';
338334
}
339335

340336
set width(val) { }

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1762,7 +1762,7 @@ export class IgxColumnComponent implements AfterContentInit {
17621762
* @hidden
17631763
*/
17641764
public getCalcWidth(): any {
1765-
if (this._calcWidth !== null && !isNaN(this.calcPixelWidth)) {
1765+
if (this._calcWidth && !isNaN(this.calcPixelWidth)) {
17661766
return this._calcWidth;
17671767
}
17681768
this.cacheCalcWidth();
@@ -1863,7 +1863,7 @@ export class IgxColumnComponent implements AfterContentInit {
18631863
const colWidth = this.width;
18641864
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
18651865
if (isPercentageWidth) {
1866-
this._calcWidth = parseInt(colWidth, 10) / 100 * (grid.calcWidth - grid.featureColumnsWidth());
1866+
this._calcWidth = parseInt(colWidth, 10) / 100 * grid.calcWidth;
18671867
} else if (!colWidth) {
18681868
// no width
18691869
this._calcWidth = this.defaultWidth || grid.getPossibleColumnWidth();

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3552,15 +3552,13 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
35523552
if (this.hasColumnLayouts) {
35533553
return '';
35543554
}
3555-
const colWidth = column.width;
3555+
const colWidth = parseInt(column.calcWidth, 10);
35563556
const minWidth = this.defaultHeaderGroupMinWidth;
3557-
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
35583557

3559-
if (!isPercentageWidth && parseInt(colWidth, 10) < minWidth) {
3558+
if (colWidth < minWidth) {
35603559
return minWidth + 'px';
35613560
}
3562-
3563-
return colWidth;
3561+
return colWidth + 'px';
35643562
}
35653563

35663564
/**

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

Lines changed: 115 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
261261
fixture.detectChanges();
262262

263263
const locationColGroup = getColGroup(grid, 'Location');
264-
expect(locationColGroup.width).toBe(gridColWidth);
264+
const expectedWidth = (grid.calcWidth / 2) + 'px';
265+
expect(locationColGroup.width).toBe(expectedWidth);
265266
const cityColumn = grid.getColumnByName('City');
266267
expect(cityColumn.width).toBe(gridColWidth);
267268
}));
@@ -293,7 +294,8 @@ describe('IgxGrid - multi-column headers #grid', () => {
293294
fixture.detectChanges();
294295

295296
const locationColGroup = getColGroup(grid, 'Location');
296-
expect(locationColGroup.width).toBe(columnWidth);
297+
const expectedWidth = (grid.calcWidth / 2) + 'px';
298+
expect(locationColGroup.width).toBe(expectedWidth);
297299
const cityColumn = grid.getColumnByName('City');
298300
expect(cityColumn.width).toBe(columnWidth);
299301
}));
@@ -345,6 +347,96 @@ describe('IgxGrid - multi-column headers #grid', () => {
345347
expect(cityColumn.width).toBe(colWidthPx);
346348
}));
347349

350+
it('Width should be correct. Column group with three columns. Columns with mixed width - px and percent.', async() => {
351+
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
352+
fixture.detectChanges();
353+
const componentInstance = fixture.componentInstance;
354+
const grid = componentInstance.grid;
355+
const col1 = grid.getColumnByName('Country');
356+
const col2 = grid.getColumnByName('Region');
357+
const col3 = grid.getColumnByName('City');
358+
359+
360+
col1.width = '200px';
361+
col2.width = '20%';
362+
col3.width = '50%';
363+
364+
fixture.detectChanges();
365+
366+
// check group has correct size.
367+
let locationColGroup = getColGroup(grid, 'Location');
368+
let expectedWidth = (200 + Math.floor(grid.calcWidth * 0.7)) + 'px';
369+
expect(locationColGroup.width).toBe(expectedWidth);
370+
371+
// check header and content have same size.
372+
const col1Header = grid.getColumnByName('Country').headerCell.elementRef.nativeElement;
373+
const cell1 = grid.getRowByIndex(0).cells.toArray()[0].nativeElement;
374+
expect(col1Header.offsetWidth).toEqual(cell1.offsetWidth);
375+
376+
let col2Header = grid.getColumnByName('Region').headerCell.elementRef.nativeElement;
377+
let cell2 = grid.getRowByIndex(0).cells.toArray()[1].nativeElement;
378+
expect(col2Header.offsetWidth - cell2.offsetWidth).toBeLessThanOrEqual(1);
379+
380+
let col3Header = grid.getColumnByName('City').headerCell.elementRef.nativeElement;
381+
let cell3 = grid.getRowByIndex(0).cells.toArray()[2].nativeElement;
382+
expect(col3Header.offsetWidth).toEqual(cell3.offsetWidth);
383+
384+
// check that if grid is resized, group size is updated.
385+
386+
componentInstance.gridWrapperWidthPx = '500';
387+
fixture.detectChanges();
388+
389+
await wait(100);
390+
fixture.detectChanges();
391+
392+
locationColGroup = getColGroup(grid, 'Location');
393+
expectedWidth = (200 + Math.floor(grid.calcWidth * 0.7)) + 'px';
394+
expect(locationColGroup.width).toBe(expectedWidth);
395+
396+
col2Header = grid.getColumnByName('Region').headerCell.elementRef.nativeElement;
397+
cell2 = grid.getRowByIndex(0).cells.toArray()[1].nativeElement;
398+
expect(col2Header.offsetWidth - cell2.offsetWidth).toBeLessThanOrEqual(1);
399+
400+
col3Header = grid.getColumnByName('City').headerCell.elementRef.nativeElement;
401+
cell3 = grid.getRowByIndex(0).cells.toArray()[2].nativeElement;
402+
expect(col3Header.offsetWidth).toEqual(cell3.offsetWidth);
403+
});
404+
405+
it('Width should be correct. Column group with three columns. Columns with mixed width - px, percent and null.', () => {
406+
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
407+
fixture.detectChanges();
408+
const componentInstance = fixture.componentInstance;
409+
const grid = componentInstance.grid;
410+
const col1 = grid.getColumnByName('Country');
411+
const col2 = grid.getColumnByName('Region');
412+
const col3 = grid.getColumnByName('City');
413+
414+
415+
col1.width = '200px';
416+
col2.width = '20%';
417+
col3.width = null;
418+
419+
fixture.detectChanges();
420+
421+
// check group has correct size. Should fill available space in grid since one column has no width.
422+
const locationColGroup = getColGroup(grid, 'Location');
423+
const expectedWidth = grid.calcWidth - 1 + 'px';
424+
expect(locationColGroup.width).toBe(expectedWidth);
425+
426+
// check header and content have same size.
427+
const col1Header = grid.getColumnByName('Country').headerCell.elementRef.nativeElement;
428+
const cell1 = grid.getRowByIndex(0).cells.toArray()[0].nativeElement;
429+
expect(col1Header.offsetWidth).toEqual(cell1.offsetWidth);
430+
431+
const col2Header = grid.getColumnByName('Region').headerCell.elementRef.nativeElement;
432+
const cell2 = grid.getRowByIndex(0).cells.toArray()[1].nativeElement;
433+
expect(col2Header.offsetWidth - cell2.offsetWidth).toBeLessThanOrEqual(1);
434+
435+
const col3Header = grid.getColumnByName('City').headerCell.elementRef.nativeElement;
436+
const cell3 = grid.getRowByIndex(0).cells.toArray()[2].nativeElement;
437+
expect(col3Header.offsetWidth).toEqual(cell3.offsetWidth);
438+
});
439+
348440
it('Width should be correct. Column group with three columns. Width in percent.', fakeAsync(() => {
349441
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
350442
fixture.detectChanges();
@@ -397,15 +489,15 @@ describe('IgxGrid - multi-column headers #grid', () => {
397489
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
398490
fixture.detectChanges();
399491
const gridColWidth = '20%';
400-
const groupWidth = '60%';
401492
const componentInstance = fixture.componentInstance;
402493
const grid = componentInstance.grid;
403494
grid.ngAfterViewInit();
404495
grid.columnWidth = gridColWidth;
405496
fixture.detectChanges();
406497

407498
const locationColGroup = getColGroup(grid, 'Location');
408-
expect(locationColGroup.width).toBe(groupWidth);
499+
const expectedWidth = (Math.floor(grid.calcWidth * 0.2) * 3) + 'px';
500+
expect(locationColGroup.width).toBe(expectedWidth);
409501
const countryColumn = grid.getColumnByName('Country');
410502
expect(countryColumn.width).toBe(gridColWidth);
411503
const regionColumn = grid.getColumnByName('Region');
@@ -437,26 +529,26 @@ describe('IgxGrid - multi-column headers #grid', () => {
437529
}));
438530

439531
it('Width should be correct. Column group with three columns. Columns with width in percent.',
440-
fakeAsync(/** height/width setter rAF */() => {
441-
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
442-
fixture.detectChanges();
443-
const columnWidth = '20%';
444-
const groupWidth = '60%';
445-
const componentInstance = fixture.componentInstance;
446-
const grid = componentInstance.grid;
447-
grid.ngAfterViewInit();
448-
componentInstance.columnWidth = columnWidth;
449-
fixture.detectChanges();
532+
fakeAsync(/** height/width setter rAF */() => {
533+
const fixture = TestBed.createComponent(OneGroupThreeColsGridComponent);
534+
fixture.detectChanges();
535+
const columnWidth = '20%';
536+
const componentInstance = fixture.componentInstance;
537+
const grid = componentInstance.grid;
538+
grid.ngAfterViewInit();
539+
componentInstance.columnWidth = columnWidth;
540+
fixture.detectChanges();
450541

451-
const locationColGroup = getColGroup(grid, 'Location');
452-
expect(locationColGroup.width).toBe(groupWidth);
453-
const countryColumn = grid.getColumnByName('Country');
454-
expect(countryColumn.width).toBe(columnWidth);
455-
const regionColumn = grid.getColumnByName('Region');
456-
expect(regionColumn.width).toBe(columnWidth);
457-
const cityColumn = grid.getColumnByName('City');
458-
expect(cityColumn.width).toBe(columnWidth);
459-
}));
542+
const locationColGroup = getColGroup(grid, 'Location');
543+
const expectedWidth = (Math.floor(grid.calcWidth * 0.2) * 3) + 'px';
544+
expect(locationColGroup.width).toBe(expectedWidth);
545+
const countryColumn = grid.getColumnByName('Country');
546+
expect(countryColumn.width).toBe(columnWidth);
547+
const regionColumn = grid.getColumnByName('Region');
548+
expect(regionColumn.width).toBe(columnWidth);
549+
const cityColumn = grid.getColumnByName('City');
550+
expect(cityColumn.width).toBe(columnWidth);
551+
}));
460552

461553
it('API method level should return correct values', fakeAsync(() => {
462554
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1416,7 +1416,7 @@ describe('IgxGrid Component Tests #grid', () => {
14161416

14171417
// check virtualization cache is valid
14181418
const virtDir = grid.getRowByIndex(0).virtDirRow;
1419-
expect(virtDir.getSizeAt(0)).toEqual(Math.floor(0.7 * grid.unpinnedWidth));
1419+
expect(virtDir.getSizeAt(0)).toEqual(expectedWidth);
14201420
expect(virtDir.getSizeAt(1)).toEqual(136);
14211421
expect(virtDir.getSizeAt(2)).toEqual(136);
14221422

0 commit comments

Comments
 (0)