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 5a999f6f8a7..137d81d9999 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -6550,6 +6550,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements }); this.initColumns(this.columnList.toArray(), (col: IgxColumnComponent) => this.columnInit.emit(col)); + this.handleColumnPinningForGroups(); diff.forEachRemovedItem((record: IterableChangeRecord) => { const isColumnGroup = record.item instanceof IgxColumnGroupComponent; @@ -7158,42 +7159,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements * @hidden */ protected initPinning() { - const pinnedColumns = []; - const unpinnedColumns = []; - this.calculateGridWidth(); this.resetCaches(); - // When a column is a group or is inside a group, pin all related. - this._pinnedColumns.forEach(col => { - if (col.parent) { - col.parent.pinned = true; - } - if (col.columnGroup) { - col.children.forEach(child => child.pinned = true); - } - }); - - // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections. - // We take into account top level columns (top level groups and non groups). - // If top level is unpinned the pinning handles all children to be unpinned as well. - for (const column of this._columns) { - if (column.pinned && !column.parent) { - pinnedColumns.push(column); - } else if (column.pinned && column.parent) { - if (column.topLevelParent.pinned) { - pinnedColumns.push(column); - } else { - column.pinned = false; - unpinnedColumns.push(column); - } - } else { - unpinnedColumns.push(column); - } - } - - // Assign the applicable collections. - this._pinnedColumns = pinnedColumns; - this._unpinnedColumns = unpinnedColumns; + this.handleColumnPinningForGroups(); this.notifyChanges(); } @@ -7625,4 +7593,40 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements settings.target = targetRow.element.nativeElement; this.toggleRowEditingOverlay(true); } + + private handleColumnPinningForGroups(): void { + // When a column is a group or is inside a group, pin all related. + const pinnedColumns = []; + const unpinnedColumns = []; + + this._pinnedColumns.forEach(col => { + if (col.parent) { + col.parent.pinned = true; + } + if (col.columnGroup) { + col.children.forEach(child => child.pinned = true); + } + }); + + // Make sure we don't exceed unpinned area min width and get pinned and unpinned col collections. + // We take into account top level columns (top level groups and non groups). + // If top level is unpinned the pinning handles all children to be unpinned as well. + for (const column of this._columns) { + if (column.pinned && !column.parent) { + pinnedColumns.push(column); + } else if (column.pinned && column.parent) { + if (column.topLevelParent.pinned) { + pinnedColumns.push(column); + } else { + column.pinned = false; + unpinnedColumns.push(column); + } + } else { + unpinnedColumns.push(column); + } + } + // Assign the applicable collections. + this._pinnedColumns = pinnedColumns; + this._unpinnedColumns = unpinnedColumns; + } }