Skip to content

Commit e984516

Browse files
dkamburovdkamburov
authored
Merge branch 'master' into dkamburov/right-pin-summaries
2 parents 6f36a3b + a596645 commit e984516

File tree

9 files changed

+171
-82
lines changed

9 files changed

+171
-82
lines changed

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</ng-template>
4545
</div>
4646
</ng-container>
47-
<ng-container *ngIf="pinnedColumns.length > 0">
47+
<ng-container *ngIf="pinnedColumns.length > 0 && isPinningToStart">
4848
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
4949
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
5050
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
@@ -57,6 +57,17 @@
5757
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
5858
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
5959
</ng-template>
60+
<ng-container *ngIf="pinnedColumns.length > 0 && !isPinningToStart">
61+
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
62+
<igx-grid-header-group
63+
[column]="col"
64+
[gridID]="id"
65+
[style.min-width]="getHeaderGroupWidth(col)"
66+
[style.flex-basis]="getHeaderGroupWidth(col)"
67+
[style.left]="col.rightPinnedOffset">
68+
</igx-grid-header-group>
69+
</ng-template>
70+
</ng-container>
6071
</div>
6172
<igx-grid-filtering-row #filteringRow [style.width.px]='calcWidth' *ngIf="filteringService.isFilterRowVisible"
6273
[column]="filteringService.filteredColumn"></igx-grid-filtering-row>
@@ -137,11 +148,12 @@
137148
</div>
138149

139150
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
140-
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
151+
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
141152
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
142153
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
143154
</ng-template>
144155
</div>
156+
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
145157
</div>
146158

147159
<div class="igx-grid__footer" #footer>

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -969,6 +969,23 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
969969
expect(cell.visibleColumnIndex).toEqual(2);
970970
expect(cell.nativeElement.classList.contains('igx-grid__td--pinned')).toBe(false);
971971
}));
972+
973+
it('should be applied correctly even on the right side', (() => {
974+
hierarchicalGrid = fixture.componentInstance.hgrid;
975+
hierarchicalGrid.columnList.find(x => x.field === 'ID').pinned = true;
976+
hierarchicalGrid.pinning.columns = 1;
977+
hierarchicalGrid.cdr.detectChanges();
978+
const rightMostGridPart = hierarchicalGrid.nativeElement.getBoundingClientRect().right;
979+
const leftMostGridPart = hierarchicalGrid.nativeElement.getBoundingClientRect().left;
980+
const leftMostRightPinnedCellsPart = hierarchicalGrid.getCellByColumn(0, 'ID').nativeElement.getBoundingClientRect().left;
981+
const pinnedCellWidth = hierarchicalGrid.getCellByColumn(0, 'ID').width;
982+
// Expects that right pinning has been in action
983+
expect(leftMostGridPart !== leftMostRightPinnedCellsPart).toBeTruthy();
984+
// Expects that pinned column is in the visible grid's area
985+
expect(leftMostRightPinnedCellsPart < rightMostGridPart).toBeTruthy();
986+
// Expects that the whole pinned column is visible
987+
expect(leftMostRightPinnedCellsPart + Number.parseInt(pinnedCellWidth, 10) < rightMostGridPart).toBeTruthy();
988+
}));
972989
});
973990
});
974991

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -566,6 +566,7 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
566566
fixture.detectChanges();
567567
// collapse
568568
parentCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft', altKey: true }));
569+
await wait(100);
569570
fixture.detectChanges();
570571
await wait(100);
571572
fixture.detectChanges();
@@ -574,6 +575,7 @@ describe('IgxHierarchicalGrid Basic Navigation #hGrid', () => {
574575

575576
// expand
576577
parentCell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', altKey: true }));
578+
await wait(100);
577579
fixture.detectChanges();
578580
await wait(100);
579581
fixture.detectChanges();

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,20 @@
3333
</div>
3434
</ng-container>
3535

36-
<ng-container *ngIf="pinnedColumns.length > 0">
37-
<igx-hierarchical-grid-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
38-
class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
36+
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
37+
<ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
38+
</ng-container>
39+
40+
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
41+
<igx-hierarchical-grid-cell
42+
class="igx-grid__td igx-grid__td--fw"
3943
[class.igx-grid__td--number]="col.dataType === 'number'"
4044
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
4145
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
4246
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
4347
[column]="col"
4448
[formatter]="col.formatter"
4549
[row]="this"
46-
[lastPinned]="col.isLastPinned"
4750
[style.min-height.px]="grid.rowHeight || 32"
4851
[rowData]="rowData"
4952
[style.min-width]="col.width"
@@ -56,41 +59,48 @@
5659
[lastSearchInfo]="grid.lastSearchInfo"
5760
[cellSelectionMode]="grid.cellSelection">
5861
</igx-hierarchical-grid-cell>
62+
</ng-template>
63+
64+
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
65+
<ng-template *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-template>
5966
</ng-container>
6067

61-
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
62-
<igx-hierarchical-grid-cell
63-
class="igx-grid__td igx-grid__td--fw"
68+
<ng-template #rowSelectorBaseTemplate>
69+
<div class="igx-grid__cbx-padding">
70+
<igx-checkbox
71+
[readonly]="true"
72+
[checked]="selected"
73+
disableRipple="true"
74+
[disabled]="deleted"
75+
[disableTransitions]="grid.disableTransitions"
76+
[aria-label]="rowCheckboxAriaLabel">
77+
</igx-checkbox>
78+
</div>
79+
</ng-template>
80+
81+
<ng-template #pinnedCellsTemplate let-col>
82+
<igx-hierarchical-grid-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
83+
class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
6484
[class.igx-grid__td--number]="col.dataType === 'number'"
6585
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
6686
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
6787
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
6888
[column]="col"
6989
[formatter]="col.formatter"
7090
[row]="this"
91+
[firstPinned]="col.isFirstPinned"
92+
[lastPinned]="col.isLastPinned"
7193
[style.min-height.px]="grid.rowHeight || 32"
7294
[rowData]="rowData"
7395
[style.min-width]="col.width"
7496
[style.max-width]="col.width"
7597
[style.flex-basis]="col.width"
98+
[style.left]="col.rightPinnedOffset"
7699
[width]="col.getCellWidth()"
77100
[visibleColumnIndex]="col.visibleIndex"
78101
[value]="rowData[col.field]"
79102
[cellTemplate]="col.bodyTemplate"
80103
[lastSearchInfo]="grid.lastSearchInfo"
81104
[cellSelectionMode]="grid.cellSelection">
82105
</igx-hierarchical-grid-cell>
83-
</ng-template>
84-
85-
<ng-template #rowSelectorBaseTemplate>
86-
<div class="igx-grid__cbx-padding">
87-
<igx-checkbox
88-
[readonly]="true"
89-
[checked]="selected"
90-
disableRipple="true"
91-
[disabled]="deleted"
92-
[disableTransitions]="grid.disableTransitions"
93-
[aria-label]="rowCheckboxAriaLabel">
94-
</igx-checkbox>
95-
</div>
96-
</ng-template>
106+
</ng-template>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1352,4 +1352,26 @@ describe('IgxTreeGrid - Integration #tGrid', () => {
13521352
expect(treeGrid.records.get(13).level).toBe(2);
13531353
}));
13541354
});
1355+
1356+
describe('Column Pinning', () => {
1357+
it('should have right pinning applied correctly', () => {
1358+
fix = TestBed.createComponent(IgxTreeGridRowEditingHierarchicalDSTransactionComponent);
1359+
fix.detectChanges();
1360+
treeGrid = fix.componentInstance.treeGrid as IgxTreeGridComponent;
1361+
treeGrid.columnList.find(x => x.field === 'Age').pinned = true;
1362+
treeGrid.pinning.columns = 1;
1363+
1364+
fix.detectChanges();
1365+
const rightMostGridPart = treeGrid.nativeElement.getBoundingClientRect().right;
1366+
const leftMostGridPart = treeGrid.nativeElement.getBoundingClientRect().left;
1367+
const leftMostRightPinnedCellsPart = treeGrid.getCellByColumn(0, 'Age').nativeElement.getBoundingClientRect().left;
1368+
const pinnedCellWidth = treeGrid.getCellByColumn(0, 'Age').width;
1369+
// Expects that right pinning has been in action
1370+
expect(leftMostGridPart !== leftMostRightPinnedCellsPart).toBeTruthy();
1371+
// Expects that pinned column is in the visible grid's area
1372+
expect(leftMostRightPinnedCellsPart < rightMostGridPart).toBeTruthy();
1373+
// Expects that the whole pinned column is visible
1374+
expect(leftMostRightPinnedCellsPart + Number.parseInt(pinnedCellWidth, 10) <= rightMostGridPart).toBeTruthy();
1375+
});
1376+
});
13551377
});

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

Lines changed: 66 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -11,62 +11,8 @@
1111
</ng-template>
1212
</div>
1313
</ng-container>
14-
<ng-container *ngIf="pinnedColumns.length > 0">
15-
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
16-
<ng-template #cellTemplate>
17-
<igx-grid-cell
18-
class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
19-
[class.igx-grid__td--number]="col.dataType === 'number'"
20-
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
21-
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
22-
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
23-
[column]="col"
24-
[formatter]="col.formatter"
25-
[row]="this"
26-
[lastPinned]="col.isLastPinned"
27-
[style.min-height.px]="grid.rowHeight || 32"
28-
[rowData]="rowData"
29-
[style.min-width]="col.width"
30-
[style.max-width]="col.width"
31-
[style.flex-basis]="col.width"
32-
[width]="col.getCellWidth()"
33-
[visibleColumnIndex]="col.visibleIndex"
34-
[value]="rowData[col.field]"
35-
[cellTemplate]="col.bodyTemplate"
36-
[lastSearchInfo]="grid.lastSearchInfo"
37-
[cellSelectionMode]="grid.cellSelection" #treeCell>
38-
</igx-grid-cell>
39-
</ng-template>
40-
<ng-template #treeCellTemplate>
41-
<igx-tree-grid-cell
42-
class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
43-
[class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
44-
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
45-
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
46-
[level]="treeRow.level"
47-
[expanded]="treeRow.expanded"
48-
[showIndicator]="showIndicator"
49-
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
50-
[column]="col"
51-
[formatter]="col.formatter"
52-
[row]="this"
53-
[lastPinned]="col.isLastPinned"
54-
[style.min-height.px]="grid.rowHeight || 32"
55-
[rowData]="rowData"
56-
[style.min-width]="col.width"
57-
[style.max-width]="col.width"
58-
[style.flex-basis]="col.width"
59-
[width]="col.getCellWidth()"
60-
[visibleColumnIndex]="col.visibleIndex"
61-
[value]="rowData[col.field]"
62-
[isLoading]="isLoading"
63-
[cellTemplate]="col.bodyTemplate"
64-
[lastSearchInfo]="grid.lastSearchInfo"
65-
[cellSelectionMode]="grid.cellSelection" #treeCell>
66-
</igx-tree-grid-cell>
67-
</ng-template>
68-
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
69-
</ng-template>
14+
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
15+
<ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
7016
</ng-container>
7117
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]="'calcPixelWidth'" [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
7218
<ng-template #cellTemplate>
@@ -121,6 +67,9 @@
12167
</ng-template>
12268
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
12369
</ng-template>
70+
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
71+
<ng-container *ngTemplateOutlet="pinnedCellsTemplate; context: this"></ng-container>
72+
</ng-container>
12473
<ng-template #rowSelectorBaseTemplate>
12574
<div class="igx-grid__cbx-padding">
12675
<igx-checkbox
@@ -133,3 +82,64 @@
13382
</igx-checkbox>
13483
</div>
13584
</ng-template>
85+
86+
<ng-template #pinnedCellsTemplate let-col>
87+
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxNotGrouped">
88+
<ng-template #cellTemplate>
89+
<igx-grid-cell
90+
class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
91+
[class.igx-grid__td--number]="col.dataType === 'number'"
92+
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
93+
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
94+
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
95+
[column]="col"
96+
[formatter]="col.formatter"
97+
[row]="this"
98+
[firstPinned]="col.isFirstPinned"
99+
[lastPinned]="col.isLastPinned"
100+
[style.min-height.px]="grid.rowHeight || 32"
101+
[rowData]="rowData"
102+
[style.min-width]="col.width"
103+
[style.max-width]="col.width"
104+
[style.flex-basis]="col.width"
105+
[style.left]="col.rightPinnedOffset"
106+
[width]="col.getCellWidth()"
107+
[visibleColumnIndex]="col.visibleIndex"
108+
[value]="rowData[col.field]"
109+
[cellTemplate]="col.bodyTemplate"
110+
[lastSearchInfo]="grid.lastSearchInfo"
111+
[cellSelectionMode]="grid.cellSelection" #treeCell>
112+
</igx-grid-cell>
113+
</ng-template>
114+
<ng-template #treeCellTemplate>
115+
<igx-tree-grid-cell
116+
class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
117+
[class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
118+
[ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex"
119+
[ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex"
120+
[level]="treeRow.level"
121+
[expanded]="treeRow.expanded"
122+
[showIndicator]="showIndicator"
123+
[editMode]="col.editable && crudService.isInEditMode(index, col.index)"
124+
[column]="col"
125+
[formatter]="col.formatter"
126+
[row]="this"
127+
[lastPinned]="col.isLastPinned"
128+
[style.min-height.px]="grid.rowHeight || 32"
129+
[rowData]="rowData"
130+
[style.min-width]="col.width"
131+
[style.max-width]="col.width"
132+
[style.flex-basis]="col.width"
133+
[style.left]="col.rightPinnedOffset"
134+
[width]="col.getCellWidth()"
135+
[visibleColumnIndex]="col.visibleIndex"
136+
[value]="rowData[col.field]"
137+
[isLoading]="isLoading"
138+
[cellTemplate]="col.bodyTemplate"
139+
[lastSearchInfo]="grid.lastSearchInfo"
140+
[cellSelectionMode]="grid.cellSelection" #treeCell>
141+
</igx-tree-grid-cell>
142+
</ng-template>
143+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 ? treeCellTemplate : cellTemplate"></ng-container>
144+
</ng-template>
145+
</ng-template>

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
</ng-template>
3333
</div>
3434
</ng-container>
35-
<ng-container *ngIf="pinnedColumns.length > 0">
35+
<ng-container *ngIf="pinnedColumns.length > 0 && isPinningToStart">
3636
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
3737
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
3838
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
@@ -45,6 +45,12 @@
4545
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
4646
[style.flex-basis]="getHeaderGroupWidth(col)"></igx-grid-header-group>
4747
</ng-template>
48+
<ng-container *ngIf="pinnedColumns.length > 0 && !isPinningToStart">
49+
<ng-template ngFor let-col [ngForOf]="pinnedColumns | igxTopLevel">
50+
<igx-grid-header-group [column]="col" [gridID]="id" [style.min-width]="getHeaderGroupWidth(col)"
51+
[style.flex-basis]="getHeaderGroupWidth(col)" [style.left]="col.rightPinnedOffset"></igx-grid-header-group>
52+
</ng-template>
53+
</ng-container>
4854
</div>
4955
<igx-grid-filtering-row #filteringRow *ngIf="filteringService.isFilterRowVisible"
5056
[column]="filteringService.filteredColumn"></igx-grid-filtering-row>
@@ -121,11 +127,12 @@
121127
</div>
122128

123129
<div class="igx-grid__scroll" [style.height]="'18px'" #scr [hidden]="isHorizontalScrollHidden">
124-
<div class="igx-grid__scroll-start" [style.width.px]='pinnedWidth' [hidden]="pinnedWidth === 0"></div>
130+
<div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
125131
<div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
126132
<ng-template igxGridFor [igxGridForOf]='[]' #scrollContainer>
127133
</ng-template>
128134
</div>
135+
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
129136
</div>
130137

131138
<div class="igx-grid__footer" #footer>

0 commit comments

Comments
 (0)