Skip to content

Commit 53adc8b

Browse files
dkamburovdkamburov
authored
Merge pull request #10816 from IgniteUI/skrastev/pivot-grid-resize
Implementation of Pivot Grid row header resizing
2 parents 907dcdb + c0a1c37 commit 53adc8b

21 files changed

+356
-38
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -628,6 +628,7 @@ export interface PivotGridType extends GridType {
628628
showPivotConfigurationUI: boolean;
629629
columnDimensions: IPivotDimension[];
630630
rowDimensions: IPivotDimension[];
631+
rowDimensionResizing: boolean;
631632
values: IPivotValue[];
632633
filterDimensions: IPivotDimension[];
633634
dimensionDataColumns: ColumnType[];

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
</igx-circular-bar>
127127
</div>
128128
</ng-template>
129-
<igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
129+
<igx-pivot-grid-column-resizer [restrictResizerTop]="theadRow.nativeElement.clientHeight" *ngIf="colResizingService.showResizer"></igx-pivot-grid-column-resizer>
130130
<div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
131131
<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
132132

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

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import { DropPosition } from '../moving/moving.service';
5151
import { DimensionValuesFilteringStrategy, NoopPivotDimensionsStrategy } from '../../data-operations/pivot-strategy';
5252
import { IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/grid.excel-style-filtering.component';
5353
import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
54-
import { IgxColumnResizingService } from '../resizing/resizing.service';
54+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
5555
import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
5656
import { DOCUMENT } from '@angular/common';
5757
import { DisplayDensityToken, IDisplayDensityOptions } from '../../core/displayDensity';
@@ -65,6 +65,7 @@ import { GridBaseAPIService } from '../api.service';
6565
import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive';
6666
import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
6767
import { flatten } from '@angular/compiler';
68+
import { IgxPivotGridColumnResizerComponent } from '../resizing/pivot-grid/pivot-resizer.component';
6869

6970
let NEXT_ID = 0;
7071
const MINIMUM_COLUMN_WIDTH = 200;
@@ -81,6 +82,7 @@ const MINIMUM_COLUMN_WIDTH = 200;
8182
{ provide: IGX_GRID_BASE, useExisting: IgxPivotGridComponent },
8283
{ provide: IgxFilteringService, useClass: IgxPivotFilteringService },
8384
IgxPivotGridNavigationService,
85+
IgxPivotColumnResizingService,
8486
IgxForOfSyncService,
8587
IgxForOfScrollSyncService
8688
]
@@ -131,7 +133,14 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
131133
* <igx-pivot-grid [pivotConfiguration]="config"></igx-pivot-grid>
132134
* ```
133135
*/
134-
public pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
136+
public set pivotConfiguration(value :IPivotConfiguration) {
137+
this._pivotConfiguration = value;
138+
this.notifyChanges(true);
139+
}
140+
141+
public get pivotConfiguration() {
142+
return this._pivotConfiguration;
143+
}
135144

136145
@Input()
137146
/**
@@ -163,6 +172,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
163172
@ViewChild('headerTemplate', { read: TemplateRef, static: true })
164173
public headerTemplate: TemplateRef<any>;
165174

175+
/**
176+
* @hidden @internal
177+
*/
178+
@ViewChild(IgxPivotGridColumnResizerComponent)
179+
public resizeLine: IgxPivotGridColumnResizerComponent;
180+
166181
/**
167182
* @hidden @interal
168183
*/
@@ -325,9 +340,15 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
325340
return false;
326341
}
327342

343+
/**
344+
* @hidden @internal
345+
*/
346+
public rowDimensionResizing = true;
347+
328348
protected _defaultExpandState = false;
329349
private _data;
330350
private _filteredData;
351+
private _pivotConfiguration: IPivotConfiguration = { rows: null, columns: null, values: null, filters: null };
331352
private p_id = `igx-pivot-grid-${NEXT_ID++}`;
332353

333354

@@ -500,7 +521,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
500521

501522
constructor(
502523
public selectionService: IgxGridSelectionService,
503-
public colResizingService: IgxColumnResizingService,
524+
public colResizingService: IgxPivotColumnResizingService,
504525
gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>,
505526
protected transactionFactory: IgxFlatTransactionFactory,
506527
elementRef: ElementRef<HTMLElement>,

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,11 @@ export interface IPivotDimensionData {
175175
/** Whether this a child dimension. */
176176
isChild?: boolean;
177177
}
178+
179+
export interface PivotRowHeaderGroupType {
180+
rowIndex: number;
181+
parent: any;
182+
header: any;
183+
headerID: string;
184+
grid: any;
185+
}

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

Lines changed: 109 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { fakeAsync, TestBed } from '@angular/core/testing';
1+
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
22
import { By } from '@angular/platform-browser';
33
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
4-
import { FilteringExpressionsTree, FilteringLogic, IgxPivotDateDimension, IgxPivotGridModule, IgxStringFilteringOperand } from 'igniteui-angular';
4+
import { FilteringExpressionsTree, FilteringLogic, IgxPivotDateDimension, IgxPivotGridComponent, IgxPivotGridModule, IgxPivotRowComponent, IgxPivotRowDimensionContentComponent, IgxPivotRowDimensionHeaderGroupComponent, IgxStringFilteringOperand } from 'igniteui-angular';
55
import { IgxChipsAreaComponent } from '../../chips/chips-area.component';
66
import { configureTestSuite } from '../../test-utils/configure-suite';
77
import { GridFunctions, GridSelectionFunctions } from '../../test-utils/grid-functions.spec';
@@ -965,3 +965,110 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
965965
GridSelectionFunctions.verifyColumnGroupSelected(fixture, group, false);
966966
});
967967
});
968+
969+
describe('IgxPivotGrid Resizing #pivotGrid', () => {
970+
let fixture: ComponentFixture<any>;
971+
let pivotGrid: IgxPivotGridComponent;
972+
973+
configureTestSuite((() => {
974+
TestBed.configureTestingModule({
975+
declarations: [
976+
IgxPivotGridTestComplexHierarchyComponent
977+
],
978+
imports: [
979+
NoopAnimationsModule,
980+
IgxPivotGridModule
981+
]
982+
});
983+
}));
984+
985+
beforeEach(fakeAsync(() => {
986+
fixture = TestBed.createComponent(IgxPivotGridTestComplexHierarchyComponent);
987+
fixture.detectChanges();
988+
989+
pivotGrid = fixture.componentInstance.pivotGrid;
990+
}));
991+
992+
it('should define grid with resizable columns.', fakeAsync(() => {
993+
let dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
994+
995+
let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
996+
expect(rowHeaders[0].componentInstance.column.resizable).toBeTrue();
997+
expect(rowHeaders[3].componentInstance.column.resizable).toBeTrue();
998+
999+
rowHeaders = dimensionContents[1].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1000+
expect(rowHeaders[0].componentInstance.column.resizable).toBeTrue();
1001+
expect(rowHeaders[1].componentInstance.column.resizable).toBeTrue();
1002+
expect(rowHeaders[5].componentInstance.column.resizable).toBeTrue();
1003+
expect(rowHeaders[7].componentInstance.column.resizable).toBeTrue();
1004+
}));
1005+
1006+
it('should update grid after resizing a top dimension header to be bigger.', fakeAsync(() => {
1007+
let dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
1008+
1009+
let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1010+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1011+
expect(rowHeaders[3].componentInstance.column.width).toEqual('200px');
1012+
1013+
rowHeaders = dimensionContents[1].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1014+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1015+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1016+
expect(rowHeaders[5].componentInstance.column.width).toEqual('200px');
1017+
expect(rowHeaders[7].componentInstance.column.width).toEqual('200px');
1018+
1019+
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1020+
const headerResArea = GridFunctions.getHeaderResizeArea(rowHeaders[0]).nativeElement;
1021+
1022+
// Resize first column
1023+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 0);
1024+
tick(200);
1025+
fixture.detectChanges();
1026+
1027+
const resizer = GridFunctions.getResizer(fixture).nativeElement;
1028+
expect(resizer).toBeDefined();
1029+
UIInteractions.simulateMouseEvent('mousemove', resizer, 300, 5);
1030+
UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
1031+
fixture.detectChanges();
1032+
1033+
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1034+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1035+
expect(rowHeaders[3].componentInstance.column.width).toEqual('400px');
1036+
1037+
rowHeaders = dimensionContents[1].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1038+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1039+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1040+
expect(rowHeaders[5].componentInstance.column.width).toEqual('200px');
1041+
expect(rowHeaders[7].componentInstance.column.width).toEqual('200px');
1042+
}));
1043+
1044+
it('should update grid after resizing a child dimension header to be bigger.', fakeAsync(() => {
1045+
let dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
1046+
1047+
let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1048+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1049+
expect(rowHeaders[3].componentInstance.column.width).toEqual('200px');
1050+
1051+
const headerResArea = GridFunctions.getHeaderResizeArea(rowHeaders[3]).nativeElement;
1052+
1053+
// Resize first column
1054+
UIInteractions.simulateMouseEvent('mousedown', headerResArea, 100, 0);
1055+
tick(200);
1056+
fixture.detectChanges();
1057+
1058+
const resizer = GridFunctions.getResizer(fixture).nativeElement;
1059+
expect(resizer).toBeDefined();
1060+
UIInteractions.simulateMouseEvent('mousemove', resizer, 300, 5);
1061+
UIInteractions.simulateMouseEvent('mouseup', resizer, 300, 5);
1062+
fixture.detectChanges();
1063+
1064+
rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1065+
expect(rowHeaders[0].componentInstance.column.width).toEqual('400px');
1066+
expect(rowHeaders[3].componentInstance.column.width).toEqual('400px');
1067+
1068+
rowHeaders = dimensionContents[1].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
1069+
expect(rowHeaders[0].componentInstance.column.width).toEqual('200px');
1070+
expect(rowHeaders[1].componentInstance.column.width).toEqual('200px');
1071+
expect(rowHeaders[5].componentInstance.column.width).toEqual('200px');
1072+
expect(rowHeaders[7].componentInstance.column.width).toEqual('200px');
1073+
}));
1074+
});

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,11 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
7575
) {
7676
super(ref, cdr);
7777
}
78-
protected rowDimensionData: IPivotDimensionData;
78+
79+
/**
80+
* @hidden @internal
81+
*/
82+
public rowDimensionData: IPivotDimensionData;
7983

8084
public get rowDimensionColumn() {
8185
return this.rowDimensionData?.column;
@@ -182,6 +186,7 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
182186
ref.instance.field = field;
183187
ref.instance.header = header;
184188
ref.instance.width = this.grid.resolveRowDimensionWidth(this.dimension) + 'px';
189+
ref.instance.resizable = this.grid.rowDimensionResizing;
185190
(ref as any).instance._vIndex = this.grid.columns.length + this.rowIndex + this.rowIndex * this.grid.pivotConfiguration.rows.length;
186191
if (dim.childLevel && lvl >= PivotUtil.getTotalLvl(this.rowData, this.grid.pivotKeys)) {
187192
ref.instance.headerTemplate = this.headerTemplate;

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@
9898
</igx-pivot-row-dimension-header>
9999
<igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode === 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
100100
<span *ngIf="!column.columnGroup && column.resizable" class="igx-grid-th__resize-handle"
101-
[igxResizeHandle]="column"
101+
[igxPivotResizeHandle]="column"
102+
[igxPivotResizeHandleHeader]="this"
102103
[attr.draggable]="false"
103104
[style.cursor]="colResizingService.resizeCursor">
104105
</span>

‎projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { IgxColumnComponent } from '../columns/column.component';
44
import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface';
55
import { IgxFilteringService } from '../filtering/grid-filtering.service';
66
import { IgxGridHeaderGroupComponent } from '../headers/grid-header-group.component';
7-
import { IgxColumnResizingService } from '../resizing/resizing.service';
7+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
88
import { IgxRowDirective } from '../row.directive';
9-
import { IPivotDimension } from './pivot-grid.interface';
9+
import { IPivotDimension, PivotRowHeaderGroupType } from './pivot-grid.interface';
1010
import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
1111

1212
/**
@@ -17,12 +17,18 @@ import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-heade
1717
selector: 'igx-pivot-row-dimension-header-group',
1818
templateUrl: './pivot-row-dimension-header-group.component.html'
1919
})
20-
export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent {
20+
export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType {
21+
22+
/**
23+
* @hidden
24+
*/
25+
@HostBinding('style.user-select')
26+
public userSelect = 'none';
2127

2228
constructor(private cdRef: ChangeDetectorRef,
2329
@Inject(IGX_GRID_BASE) public grid: PivotGridType,
2430
private elementRef: ElementRef<HTMLElement>,
25-
public colResizingService: IgxColumnResizingService,
31+
public colResizingService: IgxPivotColumnResizingService,
2632
public filteringService: IgxFilteringService,
2733
protected platform: PlatformUtil) {
2834
super(cdRef, grid, elementRef, colResizingService, filteringService, platform);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Host
33
import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
44

55
import { IgxGridHeaderComponent } from '../headers/grid-header.component';
6-
import { IgxColumnResizingService } from '../resizing/resizing.service';
6+
import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
77

88
/**
99
* @hidden
@@ -17,7 +17,7 @@ export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent
1717

1818
constructor(
1919
@Inject(IGX_GRID_BASE) public grid: GridType,
20-
public colResizingService: IgxColumnResizingService,
20+
public colResizingService: IgxPivotColumnResizingService,
2121
public cdr: ChangeDetectorRef,
2222
public refInstance: ElementRef<HTMLElement>
2323
) {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export class IgxPivotRowComponent extends IgxRowDirective {
5959
){
6060
super(grid, selectionService, element, cdr);
6161
}
62+
6263
/**
6364
* @hidden
6465
* @internal

0 commit comments

Comments
 (0)