Skip to content

Commit be3c832

Browse files
dkamburovdkamburov
authored
Merge pull request #12448 from IgniteUI/skrastev/fix-12413-master
fix(pivotGrid): Apply dimension width to pivot calcWidth.
2 parents 649ebc1 + d6dfb4f commit be3c832

File tree

4 files changed

+69
-38
lines changed

4 files changed

+69
-38
lines changed

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7520,7 +7520,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
75207520
directive.scrollTo(goal);
75217521
}
75227522

7523-
private getColumnWidthSum(): number {
7523+
7524+
/**
7525+
* @hidden
7526+
*/
7527+
protected getColumnWidthSum(): number {
75247528
let colSum = 0;
75257529
const cols = this.hasColumnLayouts ?
75267530
this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2376,6 +2376,8 @@ describe('IgxGrid Component Tests #grid', () => {
23762376
tab.items.toArray()[1].selected = true;
23772377
await wait(100);
23782378
fix.detectChanges();
2379+
await wait(100);
2380+
fix.detectChanges();
23792381

23802382
grid.navigateTo(grid.data.length - 1, grid.columnList.length - 1);
23812383
await wait(100);

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

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@
2121
<div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
2222
<ng-container *ngTemplateOutlet="rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this"></ng-container>
2323
<div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
24-
(dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
24+
(dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
2525
(dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
26-
[style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
26+
[style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
2727
<span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length <= 0"
2828
[igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
2929
class="igx-grid__scroll-on-drag-left"></span>
@@ -38,15 +38,15 @@
3838
| pivotGridAutoTransform:pivotConfiguration:pipeTrigger
3939
| pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger
4040
| pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger"
41-
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
42-
[igxForContainerSize]='calcHeight'
41+
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
42+
[igxForContainerSize]="calcHeight"
4343
[igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
44-
[igxGridForOfVariableSizes]='false'
44+
[igxGridForOfVariableSizes]="false"
4545
#verticalScrollContainer>
4646
<ng-template
47-
[igxTemplateOutlet]='recordTemplate'
48-
[igxTemplateOutletContext]='getContext(rowData, rowIndex)'
49-
(cachedViewLoaded)='cachedViewLoaded($event)'>
47+
[igxTemplateOutlet]="recordTemplate"
48+
[igxTemplateOutletContext]="getContext(rowData, rowIndex)"
49+
(cachedViewLoaded)="cachedViewLoaded($event)">
5050
</ng-template>
5151
</ng-template>
5252
<ng-template #record_template let-rowIndex="index" let-rowData>
@@ -60,33 +60,33 @@
6060
<igc-trial-watermark></igc-trial-watermark>
6161
</div>
6262
<div igxToggle #loadingOverlay>
63-
<igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
63+
<igx-circular-bar [indeterminate]="true" *ngIf="shouldOverlayLoading">
6464
</igx-circular-bar>
6565
</div>
6666
<span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
6767
id="right" class="igx-grid__scroll-on-drag-right"></span>
68-
<div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
69-
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
70-
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
71-
<ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
68+
<div [hidden]="!hasVerticalScroll()" class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
69+
<div class="igx-grid__tbody-scrollbar-start" [style.height.px]=" isRowPinningToTop ? pinnedRowHeight : 0"></div>
70+
<div class="igx-grid__tbody-scrollbar-main" [style.height.px]="calcHeight">
71+
<ng-template igxGridFor [igxGridForOf]="[]" #verticalScrollHolder></ng-template>
7272
</div>
73-
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
73+
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]="!isRowPinningToTop ? pinnedRowHeight : 0"></div>
7474
</div>
7575

7676
<div class="igx-grid__addrow-snackbar">
77-
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
77+
<igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]="snackbarDisplayTime">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
7878
</div>
7979

8080
<div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
8181
</div>
8282

8383
<div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
84-
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
85-
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
86-
<ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
84+
<div class="igx-grid__scroll-start" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth"></div>
85+
<div class="igx-grid__scroll-main" [style.width.px]="pivotUnpinnedWidth">
86+
<ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
8787
</ng-template>
8888
</div>
89-
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
89+
<div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth" [hidden]="pivotPinnedWidth === 0 || isPinningToStart"></div>
9090
</div>
9191

9292
<div class="igx-grid__tfoot" role="rowgroup" #tfoot>
@@ -122,36 +122,36 @@
122122
<div class="igx-grid__tr--header">
123123
<igx-icon [attr.draggable]="false"
124124
(click)="toggleColumn(column)">
125-
{{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>
125+
{{getColumnGroupExpandState(column) ? "chevron_right" : "expand_more"}}</igx-icon>
126126
{{column.header}}
127127
</div>
128128
</ng-template>
129129

130130
<ng-template #defaultRowDimensionsTemplate>
131-
<div tabindex="0" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
131+
<div tabindex="0" [style.height.px]="totalHeight" *ngFor="let dim of rowDimensions; let dimIndex = index;" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
132132
<ng-template igxGridFor let-rowData [igxGridForOf]="dataView
133133
| pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
134-
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
135-
[igxForContainerSize]='calcHeight'
134+
let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
135+
[igxForContainerSize]="calcHeight"
136136
[igxForItemSize]="renderedRowHeight"
137-
[igxForSizePropName]='"height"'
137+
[igxForSizePropName]="'height'"
138138
#verticalRowDimScrollContainer>
139-
<igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
140-
[dimension]='rowData.dimensions[dimIndex]'
141-
[rootDimension]='dim'
139+
<igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
140+
[dimension]="rowData.dimensions[dimIndex]"
141+
[rootDimension]="dim"
142142
[style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
143-
[rowIndex]='rowIndex' [rowData]='rowData'
143+
[rowIndex]="rowIndex" [rowData]="rowData"
144144
[density]="displayDensity" [width]="rowDimensionWidthToPixels(dim)">
145145
</igx-pivot-row-dimension-content>
146146
</ng-template>
147147
</div>
148148
</ng-template>
149149
<ng-template #emptyRowDimensionsTemplate>
150-
<div tabindex="0" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
151-
<igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
152-
[dimension]='emptyRowDimension'
153-
[rootDimension]='emptyRowDimension'
154-
[rowIndex]='0' [rowData]='dataView[0]'
150+
<div tabindex="0" *ngIf="columnDimensions.length > 0 || values.length > 0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
151+
<igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
152+
[dimension]="emptyRowDimension"
153+
[rootDimension]="emptyRowDimension"
154+
[rowIndex]="0" [rowData]="dataView[0]"
155155
[density]="displayDensity" [width]="rowDimensionWidthToPixels(emptyRowDimension)">
156156
</igx-pivot-row-dimension-content>
157157
</div>
@@ -163,9 +163,9 @@
163163
</span>
164164
</ng-template>
165165

166-
<div [hidden]='true'>
167-
<igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>
168-
<div igxExcelStyleColumnOperations [hidden]='true'></div>
166+
<div [hidden]="true">
167+
<igx-grid-excel-style-filtering [maxHeight]="excelStyleFilterMaxHeight" [minHeight]="excelStyleFilterMinHeight">
168+
<div igxExcelStyleColumnOperations [hidden]="true"></div>
169169
<igx-excel-style-filter-operations>
170170
<igx-excel-style-search></igx-excel-style-search>
171171
</igx-excel-style-filter-operations>

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1135,7 +1135,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11351135
/**
11361136
* @hidden @internal
11371137
*/
1138-
public rowDimensionWidthToPixels(dim: IPivotDimension): number {
1138+
public rowDimensionWidthToPixels(dim: IPivotDimension, ignoreBeforeInit: boolean = false): number {
1139+
if (!ignoreBeforeInit && this.shouldGenerate) {
1140+
return 0;
1141+
}
1142+
11391143
if (!dim.width) {
11401144
return MINIMUM_COLUMN_WIDTH;
11411145
}
@@ -1154,6 +1158,21 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11541158
return (width * 100 / this.calcWidth);
11551159
}
11561160

1161+
public get pivotContentCalcWidth() {
1162+
const totalDimWidth = this.rowDimensions.length > 0 ?
1163+
this.rowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
1164+
0;
1165+
return this.calcWidth - totalDimWidth;
1166+
}
1167+
1168+
public get pivotPinnedWidth() {
1169+
return !this.shouldGenerate ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
1170+
}
1171+
1172+
public get pivotUnpinnedWidth() {
1173+
return !this.shouldGenerate ? this.unpinnedWidth : 0;
1174+
}
1175+
11571176
public get rowDimensions() {
11581177
return this.pivotConfiguration.rows?.filter(x => x.enabled) || [];
11591178
}
@@ -1178,6 +1197,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
11781197
this.reflow();
11791198
}
11801199

1200+
protected override getColumnWidthSum(): number {
1201+
let colSum = super.getColumnWidthSum();
1202+
colSum += this.rowDimensions.map(dim => this.rowDimensionWidthToPixels(dim, true)).reduce((prev, cur) => prev + cur, 0);
1203+
return colSum;
1204+
}
1205+
11811206
/**
11821207
* @hidden @internal
11831208
*/

0 commit comments

Comments
 (0)