Skip to content

Commit 9139cb7

Browse files
dkamburovdkamburov
authored
Merge pull request #10708 from IgniteUI/mdragnev/fix-10706
fix(pivot): Fix wrongly selected column when selecting rows
2 parents ad6a22e + d568227 commit 9139cb7

10 files changed

+172
-30
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -213,9 +213,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnDestroy {
213213
}
214214
}
215215
}
216-
if (!this.grid.isPivot || !this.grid.navigation.isRowHeaderActive) {
217-
this.grid.theadRow.nativeElement.focus();
218-
}
216+
this.grid.theadRow.nativeElement.focus();
219217
}
220218

221219
/**

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export { IgxGridHeaderRowComponent } from './grid-header-row.component';
3737
IgxGridHeaderGroupComponent,
3838
IgxGridHeaderRowComponent,
3939
IgxHeaderGroupWidthPipe,
40+
SortingIndexPipe,
4041
IgxHeaderGroupStylePipe
4142
]
4243
})

‎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
@@ -781,7 +781,8 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
781781
const pivotGrid = fixture.componentInstance.pivotGrid;
782782
const pivotRows = GridFunctions.getPivotRows(fixture);
783783
const row = pivotRows[2].componentInstance;
784-
row.selectPivotRow(row.rowDimensionData[1].column);
784+
const headers = row.nativeElement.querySelectorAll('igx-pivot-row-dimension-header-group');
785+
headers[1].click();
785786
fixture.detectChanges();
786787
expect(row.selected).toBeTrue();
787788
expect(pivotGrid.selectedRows).not.toBeNull();
@@ -797,7 +798,7 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
797798
expect(pivotGrid.selectedRows[0]).toEqual(expected);
798799

799800
//deselect
800-
row.selectPivotRow(row.rowDimensionData[1].column);
801+
headers[1].click();
801802
fixture.detectChanges();
802803
expect(row.selected).toBeFalse();
803804
expect(pivotGrid.selectedRows.length).toBe(0);
@@ -808,7 +809,8 @@ describe('IgxPivotGrid complex hierarchy #pivotGrid', () => {
808809
const pivotGrid = fixture.componentInstance.pivotGrid;
809810
const pivotRows = GridFunctions.getPivotRows(fixture);
810811
const row = pivotRows[2].componentInstance;
811-
row.selectPivotRow(row.rowDimensionData[0].column);
812+
const headers = row.nativeElement.querySelectorAll('igx-pivot-row-dimension-header-group');
813+
headers[0].click();
812814
fixture.detectChanges();
813815
for (let i = 0; i < 5; ++i) {
814816
expect(pivotRows[i].componentInstance.selected).toBeTrue();

‎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: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
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';
@@ -14,7 +14,7 @@ import { IPivotDimension } from './pivot-grid.interface';
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

@@ -39,6 +39,24 @@ export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroup
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 row = this.grid.rowList.find(r => r.key === this.intRow.key);
52+
const key = row.getRowDimensionKey(this.column as IgxColumnComponent);
53+
if (this.grid.selectionService.isRowSelected(key)) {
54+
this.grid.selectionService.deselectRow(key, event);
55+
} else {
56+
this.grid.selectionService.selectRowById(key, true, event);
57+
}
58+
}
59+
4260
/**
4361
* @hidden
4462
* @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;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@ export * from './pivot-row.component';
88
export * from './pivot-header-row.component';
99
export * from './pivot-row-dimension-content.component';
1010
export * from './pivot-row-dimension-header-group.component';
11+
export * from './pivot-row-dimension-header.component';

0 commit comments

Comments
 (0)