Skip to content

Commit 7933a89

Browse files
mddragnevmddragnev
committed
fix(pivot): Fix wrongly selected column when selecting rows
1 parent 1599dae commit 7933a89

8 files changed

+172
-31
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { IgxGridComponent } from '../grid/grid.component';
88
import { IgxPivotHeaderRowComponent } from './pivot-header-row.component';
99
import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component';
1010
import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component';
11+
import { IgxPivotRowDimensionHeaderComponent } from './pivot-row-dimension-header.component';
1112

1213
/**
1314
* @hidden
@@ -18,6 +19,7 @@ import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-
1819
IgxPivotRowComponent,
1920
IgxPivotHeaderRowComponent,
2021
IgxPivotRowDimensionContentComponent,
22+
IgxPivotRowDimensionHeaderComponent,
2123
IgxPivotRowDimensionHeaderGroupComponent,
2224
IgxPivotRowPipe,
2325
IgxPivotRowExpansionPipe,
@@ -32,6 +34,7 @@ import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-
3234
IgxPivotRowComponent,
3335
IgxPivotHeaderRowComponent,
3436
IgxPivotRowDimensionContentComponent,
37+
IgxPivotRowDimensionHeaderComponent,
3538
IgxPivotRowDimensionHeaderGroupComponent,
3639
IgxPivotRowExpansionPipe,
3740
IgxPivotRowPipe,

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -501,7 +501,8 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
501501
const pivotGrid = fixture.componentInstance.pivotGrid;
502502
const pivotRows = GridFunctions.getPivotRows(fixture);
503503
const row = pivotRows[2].componentInstance;
504-
row.selectPivotRow(row.rowDimensionData[1].column);
504+
const headers = row.nativeElement.querySelectorAll('igx-pivot-row-dimension-header-group');
505+
headers[1].click();
505506
fixture.detectChanges();
506507
expect(row.selected).toBeTrue();
507508
expect(pivotGrid.selectedRows).not.toBeNull();
@@ -517,7 +518,7 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
517518
expect(pivotGrid.selectedRows[0]).toEqual(expected);
518519

519520
//deselect
520-
row.selectPivotRow(row.rowDimensionData[1].column);
521+
headers[1].click();
521522
fixture.detectChanges();
522523
expect(row.selected).toBeFalse();
523524
expect(pivotGrid.selectedRows.length).toBe(0);
@@ -528,7 +529,8 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
528529
const pivotGrid = fixture.componentInstance.pivotGrid;
529530
const pivotRows = GridFunctions.getPivotRows(fixture);
530531
const row = pivotRows[2].componentInstance;
531-
row.selectPivotRow(row.rowDimensionData[0].column);
532+
const headers = row.nativeElement.querySelectorAll('igx-pivot-row-dimension-header-group');
533+
headers[0].click();
532534
fixture.detectChanges();
533535
for (let i = 0; i < 5; ++i) {
534536
expect(pivotRows[i].componentInstance.selected).toBeTrue();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import {
33
Component,
44
Input
55
} from '@angular/core';
6+
import { IgxPivotRowComponent } from 'igniteui-angular';
67
import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component';
7-
import { IgxRowDirective } from '../row.directive';
88

99
/**
1010
*
@@ -25,5 +25,5 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
2525
* @internal
2626
*/
2727
@Input()
28-
public intRow: IgxRowDirective;
28+
public intRow: IgxPivotRowComponent;
2929
}

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<ng-container *ngIf="grid.hasColumnLayouts && column.columnGroup">
2+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
3+
<div class="igx-grid-thead__group igx-grid__mrl-block"
4+
[ngClass]="{
5+
'igx-grid-th--pinned-last': hasLastPinnedChildColumn,
6+
'igx-grid-th--pinned-first': hasFirstPinnedChildColumn
7+
}"
8+
[ngStyle]="{'grid-template-rows':column.getGridTemplate(true),
9+
'grid-template-columns':column.getGridTemplate(false)}">
10+
<ng-container *ngFor="let child of column.children" >
11+
<igx-pivot-row-dimension-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
12+
[ngClass]="child.headerGroupClasses"
13+
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
14+
[column]="child"
15+
[igxColumnMovingDrag]="child"
16+
[ghostHost]="grid.outlet.nativeElement"
17+
[attr.droppable]="true"
18+
[igxColumnMovingDrop]="child">
19+
</igx-pivot-row-dimension-header-group>
20+
</ng-container>
21+
</div>
22+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
23+
</ng-container>
24+
25+
26+
<ng-template #defaultColumn>
27+
<span class="igx-grid-th__group-title" [title]="title">{{column.header}}</span>
28+
</ng-template>
29+
30+
<ng-template #defaultCollapseIndicator>
31+
<igx-icon [attr.draggable]="false" >
32+
{{column.expanded ? 'expand_more' : 'chevron_right'}} </igx-icon>
33+
</ng-template>
34+
35+
<ng-container *ngIf="!grid.hasColumnLayouts && column.columnGroup">
36+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
37+
<div class="igx-grid-thead__title"
38+
role="columnheader"
39+
[attr.aria-label]="column.header || column.field"
40+
[attr.aria-expanded]="column.expanded"
41+
[attr.aria-selected]="column.selected"
42+
[ngClass]="{
43+
'igx-grid-th--pinned-last': hasLastPinnedChildColumn,
44+
'igx-grid-th--pinned-first': hasFirstPinnedChildColumn,
45+
'igx-grid-th--collapsible': column.collapsible,
46+
'igx-grid-th--selectable': selectable,
47+
'igx-grid-th--selected': selected,
48+
'igx-grid-th--active': activeGroup}"
49+
[igxColumnMovingDrag]="column"
50+
[ghostHost]="grid.outlet.nativeElement"
51+
[attr.droppable]="true"
52+
[igxColumnMovingDrop]="column"
53+
(pointerdown)="pointerdown($event)"
54+
(click)="groupClicked($event)"
55+
(pointerenter)="onPinterEnter()"
56+
(pointerleave)="onPointerLeave()"
57+
>
58+
<ng-container *ngIf="column.collapsible">
59+
<div class="igx-grid-th__expander" (click)="toggleExpandState($event)">
60+
<ng-container
61+
*ngTemplateOutlet="column.collapsibleIndicatorTemplate ? column.collapsibleIndicatorTemplate : defaultCollapseIndicator; context: {$implicit: column, column: column}">
62+
</ng-container>
63+
</div>
64+
</ng-container>
65+
<ng-container *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}">
66+
</ng-container>
67+
</div>
68+
<div class="igx-grid-thead__group">
69+
<ng-container *ngFor="let child of column.children">
70+
<igx-pivot-row-dimension-header-group *ngIf="!child.hidden" class="igx-grid-thead__subgroup"
71+
[ngClass]="child.headerGroupClasses"
72+
[ngStyle]="child.headerGroupStyles | igxHeaderGroupStyle:child:grid.pipeTrigger"
73+
[column]="child"
74+
[style.min-width]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts"
75+
[style.flex-basis]="child.calcWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:grid.hasColumnLayouts">
76+
</igx-pivot-row-dimension-header-group>
77+
</ng-container>
78+
</div>
79+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
80+
</ng-container>
81+
82+
<ng-container *ngIf="!column.columnGroup">
83+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-left"></span>
84+
<igx-pivot-row-dimension-header
85+
role="columnheader"
86+
class="igx-grid-th--fw"
87+
[id]="grid.id + '_' + column.field"
88+
[ngClass]="column.headerClasses"
89+
[ngStyle]="column.headerStyles | igxHeaderGroupStyle:column:grid.pipeTrigger"
90+
[igxColumnMovingDrag]="column"
91+
[ghostHost]="grid.outlet.nativeElement"
92+
[attr.droppable]="true"
93+
(pointerdown)="activate()"
94+
[igxColumnMovingDrop]="column"
95+
[column]="column"
96+
[density]="grid.displayDensity"
97+
>
98+
</igx-pivot-row-dimension-header>
99+
<igx-grid-filtering-cell *ngIf="grid.allowFiltering && grid.filterMode === 'quickFilter'" [column]="column" [attr.draggable]="false"></igx-grid-filtering-cell>
100+
<span *ngIf="!column.columnGroup && column.resizable" class="igx-grid-th__resize-handle"
101+
[igxResizeHandle]="column"
102+
[attr.draggable]="false"
103+
[style.cursor]="colResizingService.resizeCursor">
104+
</span>
105+
<span *ngIf="grid.hasMovableColumns" class="igx-grid-th__drop-indicator-right"></span>
106+
</ng-container>

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, Inject, Input } from '@angular/core';
2-
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostBinding, HostListener, Inject, Input } from '@angular/core';
32
import { PlatformUtil } from '../../core/utils';
3+
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';
77
import { IgxColumnResizingService } from '../resizing/resizing.service';
8-
import { IgxRowDirective } from '../row.directive';
98
import { IPivotDimension } from './pivot-grid.interface';
9+
import { IgxPivotRowComponent } from './pivot-row.component';
1010

1111
/**
1212
* @hidden
1313
*/
1414
@Component({
1515
changeDetection: ChangeDetectionStrategy.OnPush,
1616
selector: 'igx-pivot-row-dimension-header-group',
17-
templateUrl: '../headers/grid-header-group.component.html'
17+
templateUrl: './pivot-row-dimension-header-group.component.html'
1818
})
1919
export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent {
2020

@@ -32,13 +32,30 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
3232
* @internal
3333
*/
3434
@Input()
35-
public intRow: IgxRowDirective;
35+
public intRow: IgxPivotRowComponent;
3636

3737
@HostBinding('attr.id')
3838
public get headerID() {
3939
return `${this.grid.id}_-2_${this.intRow.index}_${this.visibleIndex}`;
4040
}
4141

42+
/**
43+
* @hidden @internal
44+
*/
45+
@HostListener('click', ['$event'])
46+
public onClick(event: MouseEvent) {
47+
if (this.grid.rowSelection === 'none') {
48+
return;
49+
}
50+
event?.stopPropagation();
51+
const key = this.intRow.getRowDimensionKey(this.column as IgxColumnComponent);
52+
if (this.grid.selectionService.isRowSelected(key)) {
53+
this.grid.selectionService.deselectRow(key, event);
54+
} else {
55+
this.grid.selectionService.selectRowById(key, true, event);
56+
}
57+
}
58+
4259
/**
4360
* @hidden
4461
* @internal

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, HostListener, Inject } from '@angular/core';
2+
3+
import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
4+
5+
import { IgxGridHeaderComponent } from '../headers/grid-header.component';
6+
import { IgxColumnResizingService } from '../resizing/resizing.service';
7+
8+
/**
9+
* @hidden
10+
*/
11+
@Component({
12+
changeDetection: ChangeDetectionStrategy.OnPush,
13+
selector: 'igx-pivot-row-dimension-header',
14+
templateUrl: '../headers/grid-header.component.html'
15+
})
16+
export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent {
17+
18+
constructor(
19+
@Inject(IGX_GRID_BASE) public grid: GridType,
20+
public colResizingService: IgxColumnResizingService,
21+
public cdr: ChangeDetectorRef,
22+
private refInstance: ElementRef<HTMLElement>
23+
) {
24+
super(grid, colResizingService, cdr, refInstance);
25+
}
26+
27+
@HostListener('click', ['$event'])
28+
public onClick(event: MouseEvent) {
29+
event.preventDefault();
30+
}
31+
}

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,7 @@
6666
</ng-template>
6767

6868
<ng-template #headerTemplate let-column>
69-
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
70-
(click)="this.selectPivotRow(column, $event)">
69+
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
7170
<igx-icon [attr.draggable]=" false" (click)="grid.toggleRow(getRowDimensionKey(column))">
7271
{{ getExpandState(column) ? 'expand_more' : 'chevron_right'}}</igx-icon>
7372
{{column.header}}
@@ -76,10 +75,9 @@
7675

7776
<ng-template #headerDefaultTemplate let-column>
7877

79-
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'
80-
(click)="this.selectPivotRow(column, $event)">
78+
<div class='igx-grid__tr--header igx-grid__row-indentation--level-{{getLevel(column)}}'>
8179
<igx-icon style='flex-shrink: 0;' [attr.draggable]=" false">
8280
</igx-icon>
8381
{{column.header}}
8482
</div>
85-
</ng-template>
83+
</ng-template>

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

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -145,22 +145,6 @@ export class IgxPivotRowComponent extends IgxRowDirective implements OnChanges {
145145
false;
146146
}
147147

148-
/**
149-
* @hidden @internal
150-
*/
151-
public selectPivotRow(col: any, event?: any) {
152-
if (this.grid.rowSelection === 'none') {
153-
return;
154-
}
155-
event?.stopPropagation();
156-
const key = this.getRowDimensionKey(col);
157-
if (this.grid.selectionService.isRowSelected(key)) {
158-
this.grid.selectionService.deselectRow(key, event);
159-
} else {
160-
this.grid.selectionService.selectRowById(key, true, event);
161-
}
162-
}
163-
164148
protected extractFromDimensions(rowDimConfig: IPivotDimension[], level: number) {
165149
let dimIndex = 0;
166150
let currentLvl = 0;

0 commit comments

Comments
 (0)