Skip to content

Commit 561be0e

Browse files
nrobakovanrobakova
authored
Merge branch 'master' into nrobakova/refactor-esf-tests
2 parents 5a85ddc + 1323048 commit 561be0e

16 files changed

+252
-97
lines changed

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@
3333
@extend %igx-grid-summary--pinned-last !optional;
3434
}
3535

36+
@include m(pinned-first) {
37+
@extend %igx-grid-summary--pinned !optional;
38+
@extend %igx-grid-summary--pinned-first !optional;
39+
}
40+
3641
@include m(empty) {
3742
@extend %igx-grid-summary !optional;
3843
@extend %igx-grid-summary--empty !optional;

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,13 @@
159159
}
160160
}
161161

162+
%igx-grid-summary--pinned-first {
163+
border-#{$left}: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
164+
@media print {
165+
border-left: map-get($cell-pin, 'style') #999;
166+
}
167+
}
168+
162169
%igx-grid-summary__item {
163170
display: flex;
164171
align-items: center;

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { IgxColumnComponent } from '../columns/column.component';
1515
import { ColumnPinningPosition } from '../common/enums';
1616
import { IPinningConfig } from '../common/grid.interface';
1717
import { wait } from '../../test-utils/ui-interactions.spec';
18+
import { GridSummaryFunctions } from '../../test-utils/grid-functions.spec';
1819

1920
describe('IgxGrid - Column Pinning #grid', () => {
2021
const COLUMN_HEADER_CLASS = '.igx-grid__th';
@@ -572,8 +573,33 @@ describe('IgxGrid - Column Pinning #grid', () => {
572573
expect(fistPinnedHeaders[0].nativeElement.getAttribute('aria-label')).toBe('General Information');
573574
expect(fistPinnedHeaders[1].context.column.field).toBe('CompanyName');
574575
});
575-
});
576576

577+
it('should correctly pin columns with their summaries to end.', async() => {
578+
const fix = TestBed.createComponent(GridRightPinningComponent);
579+
fix.detectChanges();
580+
581+
const grid = fix.componentInstance.instance;
582+
grid.pinning = { columns: ColumnPinningPosition.End };
583+
grid.columns.forEach(col => {
584+
if (col.field === 'CompanyName' || col.field === 'ContactName') {
585+
col.hasSummary = true;
586+
}
587+
});
588+
fix.detectChanges();
589+
await wait();
590+
fix.detectChanges();
591+
const summaryRow = fix.debugElement.query(By.css('igx-grid-summary-row'));
592+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 9,
593+
['Count'], ['27']);
594+
GridSummaryFunctions.verifyColumnSummaries(summaryRow, 10,
595+
['Count'], ['27']);
596+
const pinnedSummaryCells = summaryRow.queryAll(By.css('igx-grid-summary-cell.igx-grid-summary--pinned'));
597+
expect(pinnedSummaryCells[0].nativeElement.className.indexOf('igx-grid-summary--pinned-first'))
598+
.not.toBe(-1);
599+
expect(pinnedSummaryCells[1].nativeElement.className.indexOf('igx-grid-summary--pinned-first'))
600+
.toBe(-1);
601+
});
602+
});
577603
});
578604

579605
/* tslint:disable */

‎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/summaries/summary-row.component.html‎

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@
66
[style.flex-basis.px]="grid.summariesMargin"
77
></div>
88
</ng-container>
9-
<ng-container *ngIf="pinnedColumns.length > 0">
10-
<igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
11-
class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
9+
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
10+
<ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
11+
</ng-container>
12+
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
13+
<igx-grid-summary-cell
14+
class="igx-grid-summary igx-grid-summary--fw"
1215
[class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
1316
[class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
1417
[class.igx-grid-summary--empty]="!col.hasSummary"
15-
[class.igx-grid-summary--pinned-last]="col.isLastPinned"
1618
[column]="col"
17-
[firstCellIndentation]="firstCellIndentation"
1819
[rowIndex]="index"
20+
[firstCellIndentation]="firstCellIndentation"
1921
[summaryResults]="getColumnSummaries(col.field)"
2022
[hasSummary]="col.hasSummary"
2123
[density]="grid.displayDensity"
@@ -25,24 +27,31 @@
2527
[style.max-width]="col.getCellWidth()"
2628
[style.flex-basis]="col.getCellWidth()">
2729
</igx-grid-summary-cell>
30+
</ng-template>
31+
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
32+
<ng-container *ngTemplateOutlet="summaryCellTemplate; context: getContext(this)"></ng-container>
2833
</ng-container>
29-
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]="grid.unpinnedWidth" [igxForTrackBy]="grid.trackColumnChanges" [igxForSizePropName]='"calcPixelWidth"' #igxDirRef>
30-
<igx-grid-summary-cell
31-
class="igx-grid-summary igx-grid-summary--fw"
34+
</ng-container>
35+
36+
<ng-template #summaryCellTemplate let-col>
37+
<igx-grid-summary-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
38+
class="igx-grid-summary igx-grid-summary--fw igx-grid-summary--pinned"
3239
[class.igx-grid-summary--cosy]="grid.displayDensity === 'cosy'"
3340
[class.igx-grid-summary--compact]="grid.displayDensity === 'compact'"
3441
[class.igx-grid-summary--empty]="!col.hasSummary"
42+
[class.igx-grid-summary--pinned-first]="col.isFirstPinned"
43+
[class.igx-grid-summary--pinned-last]="col.isLastPinned"
3544
[column]="col"
36-
[rowIndex]="index"
3745
[firstCellIndentation]="firstCellIndentation"
46+
[rowIndex]="index"
3847
[summaryResults]="getColumnSummaries(col.field)"
3948
[hasSummary]="col.hasSummary"
4049
[density]="grid.displayDensity"
4150
[style.max-height.px]="minHeight"
4251
[style.min-height.px]="minHeight"
4352
[style.min-width]="col.getCellWidth()"
4453
[style.max-width]="col.getCellWidth()"
45-
[style.flex-basis]="col.getCellWidth()">
54+
[style.flex-basis]="col.getCellWidth()"
55+
[style.left]="col.rightPinnedOffset">
4656
</igx-grid-summary-cell>
47-
</ng-template>
48-
</ng-container>
57+
</ng-template>

‎projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,10 @@ export class IgxSummaryRowComponent implements DoCheck {
9696
public get unpinnedColumns(): IgxColumnComponent[] {
9797
return this.grid.unpinnedColumns;
9898
}
99+
100+
getContext(row) {
101+
return {
102+
$implicit: row
103+
};
104+
}
99105
}

‎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
});

0 commit comments

Comments
 (0)