Skip to content

Commit 4ae418d

Browse files
dkamburovdkamburov
authored
Merge pull request #10804 from IgniteUI/mkirova/pivot-headers-virtualizaton-per-level
[igxPivot]Add headers virtualization per column dimension level
2 parents 0b84427 + 552ad87 commit 4ae418d

File tree

14 files changed

+202
-33
lines changed

14 files changed

+202
-33
lines changed

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,14 @@
581581
@extend %igx-grid__tr-header-row !optional;
582582
}
583583

584+
@include e(tr-pivot, $m: 'columnDimensionLeaf') {
585+
@extend %igx-grid__tr-pivot--columnDimensionLeaf !optional
586+
}
587+
588+
@include e(tr-pivot, $m: 'columnMultiRowSpan') {
589+
@extend %igx-grid__tr-pivot--columnMultiRowSpan !optional
590+
}
591+
584592
@include e(tr-pivot-toggle-icons) {
585593
@extend %igx-grid__tr-pivot-toggle-icons !optional;
586594
}

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2881,6 +2881,15 @@
28812881
flex-direction: column;
28822882
}
28832883

2884+
%grid-thead--virtualizationWrapper {
2885+
height: 100%;
2886+
}
2887+
2888+
%grid-thead--virtualizationContainer {
2889+
overflow: visible;
2890+
height: 100%;
2891+
}
2892+
28842893
%igx-grid__tr-pivot {
28852894
display: flex;
28862895
align-items: center;
@@ -2978,6 +2987,22 @@
29782987
display: inline-flex !important;
29792988
}
29802989

2990+
%igx-grid__tr-pivot--columnDimensionLeaf {
2991+
box-shadow: none;
2992+
2993+
igx-grid-header {
2994+
border: none;
2995+
}
2996+
}
2997+
2998+
%igx-grid__tr-pivot--columnMultiRowSpan {
2999+
igx-grid-header {
3000+
> * {
3001+
visibility: hidden;
3002+
}
3003+
}
3004+
}
3005+
29813006
%igx-grid__tr-header-row {
29823007
igx-pivot-row-dimension-header-group {
29833008
igx-pivot-row-dimension-header {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_header-row-component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,14 @@
7777
@include m(pivot) {
7878
@extend %grid-thead--pivot !optional;
7979
}
80+
81+
@include m(virtualizationWrapper) {
82+
@extend %grid-thead--virtualizationWrapper !optional;
83+
}
84+
85+
@include m(virtualizationContainer) {
86+
@extend %grid-thead--virtualizationContainer !optional;
87+
}
8088
}
8189

8290
@include b(igx-grid-th) {

‎projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1455,6 +1455,9 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
14551455
this.igxForOf = value;
14561456
}
14571457

1458+
@Input()
1459+
public igxGridForOfUniqueSizeCache = false;
1460+
14581461
public get igxGridForOf() {
14591462
return this.igxForOf;
14601463
}
@@ -1465,7 +1468,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
14651468
*/
14661469
public get sizesCache(): number[] {
14671470
if (this.igxForScrollOrientation === 'horizontal') {
1468-
if (this.syncService.isMaster(this)) {
1471+
if (this.igxGridForOfUniqueSizeCache || this.syncService.isMaster(this)) {
14691472
return this._sizesCache;
14701473
}
14711474
return this.syncService.sizesCache(this.igxForScrollOrientation);

‎projects/igniteui-angular/src/lib/grids/common/grid.interface.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -639,6 +639,7 @@ export interface PivotGridType extends GridType {
639639
dimensionsChange: EventEmitter<IDimensionsChange>;
640640
valuesChange: EventEmitter<IValuesChange>;
641641
pivotKeys: IPivotKeys;
642+
hasMultipleValues: boolean;
642643
}
643644
export interface GridSVGIcon {
644645
name: string;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1183,7 +1183,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
11831183
public footer: ElementRef;
11841184

11851185
public get headerContainer() {
1186-
return this.theadRow?.headerContainer;
1186+
return this.theadRow?.headerForOf;
11871187
}
11881188

11891189
public get headerSelectorContainer() {
@@ -7027,7 +7027,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
70277027
this.gridScroll.emit(args);
70287028
}
70297029

7030-
private horizontalScrollHandler(event) {
7030+
protected horizontalScrollHandler(event) {
70317031
const scrollLeft = event.target.scrollLeft;
70327032
this.headerContainer.onHScroll(scrollLeft);
70337033
this._horizontalForOfs.forEach(vfor => vfor.onHScroll(scrollLeft));

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
<ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
6666
</ng-container>
6767
</div>
68-
<div class="igx-grid-thead__group">
68+
<div class="igx-grid-thead__group" *ngIf='!grid.isPivot'>
6969
<ng-container *ngFor="let child of column.children">
7070
<igx-grid-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
7171
[ngClass]="child.headerGroupClasses"

‎projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,10 @@ export class IgxGridHeaderRowComponent implements DoCheck {
122122
@ViewChild('headerVirtualContainer', { read: IgxGridForOfDirective, static: true })
123123
public headerContainer: IgxGridForOfDirective<IgxGridHeaderGroupComponent>;
124124

125+
public get headerForOf() {
126+
return this.headerContainer;
127+
}
128+
125129
@ViewChild('headerDragContainer')
126130
public headerDragContainer: ElementRef<HTMLElement>;
127131

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-keyboard-nav.spec.ts‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -120,28 +120,36 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
120120
});
121121

122122
it('should allow navigating between column headers', () => {
123-
const [firstHeader, secondHeader] = fixture.debugElement.queryAll(
124-
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
123+
let firstHeader = fixture.debugElement.queryAll(
124+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
125125
UIInteractions.simulateClickAndSelectEvent(firstHeader);
126126
fixture.detectChanges();
127127

128+
firstHeader = fixture.debugElement.queryAll(
129+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
128130
GridFunctions.verifyHeaderIsFocused(firstHeader.parent);
129131
let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
130132
expect(activeCells.length).toBe(1);
131133

132-
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', firstHeader.nativeElement);
134+
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', pivotGrid.theadRow.nativeElement);
133135
fixture.detectChanges();
136+
137+
const secondHeader = fixture.debugElement.queryAll(
138+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[1];
134139
GridFunctions.verifyHeaderIsFocused(secondHeader.parent);
135140
activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
136141
expect(activeCells.length).toBe(1);
137142
});
138143

139144
it('should allow navigating from first to last column headers', async () => {
140-
const [firstHeader] = fixture.debugElement.queryAll(
141-
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
145+
let firstHeader = fixture.debugElement.queryAll(
146+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
142147
UIInteractions.simulateClickAndSelectEvent(firstHeader);
143148
fixture.detectChanges();
144149

150+
firstHeader = fixture.debugElement.queryAll(
151+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
152+
145153
GridFunctions.verifyHeaderIsFocused(firstHeader.parent);
146154
let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
147155
expect(activeCells.length).toBe(1);
@@ -164,17 +172,21 @@ describe('IgxPivotGrid - Keyboard navigation #pivotGrid', () => {
164172
UIInteractions.simulateClickAndSelectEvent(firstCell);
165173
fixture.detectChanges();
166174

167-
const [firstHeader, secondHeader] = fixture.debugElement.queryAll(
168-
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`));
175+
let firstHeader = fixture.debugElement.queryAll(
176+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
169177
UIInteractions.simulateClickAndSelectEvent(firstHeader);
170178
fixture.detectChanges();
171179

180+
firstHeader = fixture.debugElement.queryAll(
181+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[0];
172182
GridFunctions.verifyHeaderIsFocused(firstHeader.parent);
173183
let activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
174184
expect(activeCells.length).toBe(1);
175185

176186
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', firstHeader.nativeElement);
177187
fixture.detectChanges();
188+
let secondHeader = fixture.debugElement.queryAll(
189+
By.css(`${PIVOT_HEADER_ROW} ${HEADER_CELL_CSS_CLASS}`))[1];
178190
GridFunctions.verifyHeaderIsFocused(secondHeader.parent);
179191
activeCells = fixture.debugElement.queryAll(By.css(`${ACTIVE_CELL_CSS_CLASS}`));
180192
expect(activeCells.length).toBe(1);

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1048,6 +1048,13 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10481048
}
10491049
}
10501050

1051+
/**
1052+
* @hidden
1053+
*/
1054+
public get hasMultipleValues() {
1055+
return this.values.length > 1;
1056+
}
1057+
10511058
protected resolveToggle(groupColumn: IgxColumnComponent, state: boolean) {
10521059
groupColumn.hidden = state;
10531060
this.columnGroupStates.set(groupColumn.field, state);
@@ -1090,8 +1097,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
10901097
return dvl < this._defaultTargetRecordNumber ? 0 : this.defaultTargetBodyHeight;
10911098
}
10921099

1093-
protected get hasMultipleValues() {
1094-
return this.values.length > 1;
1100+
protected horizontalScrollHandler(event) {
1101+
const scrollLeft = event.target.scrollLeft;
1102+
this.theadRow.headerContainers.forEach(headerForOf => {
1103+
headerForOf.onHScroll(scrollLeft);
1104+
});
1105+
super.horizontalScrollHandler(event);
10951106
}
10961107

10971108
/**

0 commit comments

Comments
 (0)