diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
index cf9eb20e996..0f05119cecc 100644
--- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -1437,7 +1437,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
}
const unpinnedColumns = this.grid.unpinnedColumns.filter(c => !c.columnGroup);
const pinnedColumns = this.grid.pinnedColumns.filter(c => !c.columnGroup);
-
+
let col = this;
let vIndex = -1;
@@ -2326,10 +2326,10 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
columns = columns.filter(c => c.level >= this.level && c !== this && c.parent !== this &&
c.topLevelParent === this.topLevelParent);
}
-
+
// If isPreceding, find a target such that when the current column is placed after it, current colummn will receive a visibleIndex === index. This takes into account visible children of the columns.
// If !isPreceding, finds a column of the same level and visible index that equals the passed index agument (c.visibleIndex === index). No need to consider the children here.
-
+
if (isPreceding) {
columns = columns.filter(c => c.visibleIndex > this.visibleIndex);
target = columns.find(c => c.level === this.level && c.visibleIndex + (c as any).calcChildren() - this.calcChildren() === index);
@@ -2558,7 +2558,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
const colWidth = this.width;
const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
const isAutoWidth = colWidth && typeof colWidth === 'string' && colWidth === 'fit-content';
- if (isPercentageWidth) {
+ if (isPercentageWidth && this.grid.isColumnWidthSum) {
+ this._calcWidth = this.grid.minColumnWidth;
+ } else if (isPercentageWidth ) {
this._calcWidth = Math.floor(parseFloat(colWidth) / 100 * this.grid.calcWidth);
} else if (!colWidth || isAutoWidth && !this.autoSize) {
// no width
diff --git a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
index 767f042ce9f..782f5276ec1 100644
--- a/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
+++ b/projects/igniteui-angular/src/lib/grids/common/grid.interface.ts
@@ -719,7 +719,10 @@ export interface GridType extends IGridDataBindable {
isLoading: boolean;
/** @hidden @internal */
gridSize: Size;
-
+ /** @hidden @internal */
+ isColumnWidthSum: boolean;
+ /** @hidden @internal */
+ minColumnWidth: number;
/** Strategy, used for cloning the provided data. The type has one method, that takes any type of data */
dataCloneStrategy: IDataCloneStrategy;
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index b3ce4f4f7b8..585eaf12af2 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -3007,6 +3007,12 @@ export abstract class IgxGridBaseDirective implements GridType,
* @hidden @internal
*/
public filteringPipeTrigger = 0;
+
+ /**
+ * @hidden @internal
+ */
+ public isColumnWidthSum = false;
+
/**
* @hidden @internal
*/
@@ -3208,7 +3214,7 @@ export abstract class IgxGridBaseDirective implements GridType,
private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
private lastAddedRowIndex;
- protected isColumnWidthSum = false;
+
private _currencyPositionLeft: boolean;
private rowEditPositioningStrategy = new RowEditPositionStrategy({
@@ -3241,7 +3247,7 @@ export abstract class IgxGridBaseDirective implements GridType,
/**
* @hidden @internal
*/
- protected get minColumnWidth() {
+ public get minColumnWidth() {
return MINIMUM_COLUMN_WIDTH;
}
@@ -4930,7 +4936,7 @@ export abstract class IgxGridBaseDirective implements GridType,
* @param value
* @param condition
* @param ignoreCase
- * @deprecated in version 19.0.0.
+ * @deprecated in version 19.0.0.
*/
public filterGlobal(value: any, condition, ignoreCase?) {
this.filteringService.filterGlobal(value, condition, ignoreCase);
@@ -6496,8 +6502,10 @@ export abstract class IgxGridBaseDirective implements GridType,
if (this.width === null || !width) {
- width = this.getColumnWidthSum();
this.isColumnWidthSum = true;
+ width = this.getColumnWidthSum();
+ } else {
+ this.isColumnWidthSum = false;
}
if (this.hasVerticalScroll() && this.width !== null) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
index 9db4ce08fe8..77856d7b7e1 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -1900,6 +1900,21 @@ describe('IgxGrid Component Tests #grid', () => {
expect(parseInt(grid.hostWidth, 10)).toBe(30 * 136);
});
+ it('should render grid and columns with correct width when all are in % and inside a hidden container.', () => {
+ // in this case since the grid width is 0, the grid will use the sum of the columns
+ // those should resolve to 136px, as per the docs
+ const fix = TestBed.createComponent(IgxGridColumnHiddenPercentageWidthComponent);
+ const grid = fix.componentInstance.grid;
+ grid.width = '100%';
+ // 4 cols - 10% width
+ fix.componentInstance.initColumnsRows(5, 4);
+ fix.detectChanges();
+
+ expect(grid.calcWidth).toBe(136*4);
+ expect(grid.columns[0].calcWidth).toBe(136);
+ expect(grid.columns[1].calcWidth).toBe(136);
+ });
+
it('should retain column with in % after hiding/showing grid with 100% width', () => {
const fix = TestBed.createComponent(IgxGridColumnPercentageWidthComponent);
fix.componentInstance.initColumnsRows(5, 3);
@@ -3123,6 +3138,17 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi
}
}
+@Component({
+ template: `
+
+
+ `,
+ imports: [IgxGridComponent, IgxColumnComponent, NgFor]
+})
+export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent {
+ public hidden = true;
+}
+
@Component({
template: `