Skip to content

Commit d712f4d

Browse files
3phase3phase
committed
Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into mkirova/fix-6731
2 parents 984ea59 + f031d31 commit d712f4d

File tree

11 files changed

+150
-24
lines changed

11 files changed

+150
-24
lines changed

‎gulpfile.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ function typedocBuildExportFn(cb) {
184184
}
185185

186186
function typedocImportJsonFn(cb) {
187-
spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-from-json", TYPEDOC.EXPORT_JSON_PATH],
187+
spawnSync('typedoc', [TYPEDOC.PROJECT_PATH, "--generate-from-json", TYPEDOC.EXPORT_JSON_PATH, "--warns"],
188188
{ stdio: 'inherit', shell: true});
189189
cb();
190190
}
@@ -206,6 +206,7 @@ function typedocBuildDocsJA (cb) {
206206
slash(path.join(__dirname, 'i18nRepo', 'typedoc', 'ja')),
207207
'--templateStrings',
208208
TYPEDOC.TEMPLATE_STRINGS_PATH,
209+
'--warns',
209210
'--localize',
210211
'jp'], { stdio: 'inherit', shell: true });
211212

‎package-lock.json‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@
115115
"ts-node": "~7.0.1",
116116
"tslint": "~5.12.1",
117117
"typedoc": "^0.16.9",
118-
"typedoc-plugin-localization": "^1.6.1",
118+
"typedoc-plugin-localization": "^2.2.0",
119119
"typescript": "~3.7.5",
120120
"webpack-sources": "1.3.0"
121121
}

‎projects/igniteui-angular/src/lib/calendar/calendar.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -316,7 +316,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
316316
/**
317317
* Sets the header template.
318318
*
319-
* @example
319+
* @example
320320
* ```html
321321
* <igx-calendar headerTemplateDirective = "igxCalendarHeader"></igx-calendar>
322322
* ```

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -852,6 +852,7 @@
852852
%grid-mrl-block {
853853
display: grid;
854854
background: inherit;
855+
position: relative;
855856

856857
%grid-thead-item {
857858
display: flex;

‎projects/igniteui-angular/src/lib/grids/columns/column-layout.component.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,17 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
131131
return this.children.some(child => child.isLastPinned);
132132
}
133133

134+
/*
135+
* Gets whether the group contains the first pinned child column of the column layout.
136+
* ```typescript
137+
* let hasFirstPinnedChildColumn = this.columnLayout.hasFirstPinnedChildColumn;
138+
* ```
139+
* @memberof IgxColumnLayoutComponent
140+
*/
141+
get hasFirstPinnedChildColumn() {
142+
return this.children.some(child => child.isFirstPinned);
143+
}
144+
134145
/**
135146
*@hidden
136147
*/

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3606,8 +3606,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
36063606

36073607
if (dropTarget.pinned && !column.pinned) {
36083608
column.pin();
3609+
if (!this.isPinningToStart) {
3610+
if (pos === DropPosition.AfterDropTarget) {
3611+
position = DropPosition.AfterDropTarget;
3612+
} else {
3613+
position = DropPosition.None;
3614+
}
3615+
}
36093616
this._reorderColumns(column, dropTarget, position, this._pinnedColumns);
3610-
36113617
}
36123618

36133619
if (!dropTarget.pinned && column.pinned) {

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

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,8 @@
3232
</ng-container>
3333

3434
<ng-container *ngIf="grid.hasColumnLayouts">
35-
<ng-container *ngIf="pinnedColumns.length > 0">
36-
<div *ngFor="let col of pinnedColumns | igxTopLevel" class="igx-grid__mrl-block"
37-
[class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
38-
[ngStyle]="{
39-
'grid-template-rows':col.getGridTemplate(true, false),
40-
'grid-template-columns':col.getGridTemplate(false, false),
41-
'z-index': col.pinned ? 1 : null,
42-
'-ms-grid-rows':col.getGridTemplate(true, true),
43-
'-ms-grid-columns':col.getGridTemplate(false, true)
44-
}">
45-
<ng-template ngFor let-col [ngForOf]="col.children">
46-
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
47-
</ng-template>
48-
</div>
35+
<ng-container *ngIf="pinnedColumns.length > 0 && grid.isPinningToStart">
36+
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
4937
</ng-container>
5038
<ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxTopLevel" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForSizePropName]='"calcPixelWidth"' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
5139
<div class="igx-grid__mrl-block" [ngStyle]="{
@@ -59,8 +47,30 @@
5947
</ng-template>
6048
</div>
6149
</ng-template>
50+
51+
<ng-container *ngIf="pinnedColumns.length > 0 && !grid.isPinningToStart">
52+
<ng-container *ngTemplateOutlet="mrlPinnedTemplate; context: getContextMRL(pinnedColumns, this)"></ng-container>
53+
</ng-container>
6254
</ng-container>
6355

56+
<ng-template #mrlPinnedTemplate let-pinnedColumns>
57+
<div *ngFor="let col of pinnedColumns | igxTopLevel" class="igx-grid__mrl-block"
58+
[class.igx-grid__td--pinned-last]="col.hasLastPinnedChildColumn"
59+
[class.igx-grid__td--pinned-first]="col.hasFirstPinnedChildColumn"
60+
[style.left]="mrlRightPinnedOffset"
61+
[ngStyle]="{
62+
'grid-template-rows':col.getGridTemplate(true, false),
63+
'grid-template-columns':col.getGridTemplate(false, false),
64+
'z-index': col.pinned ? 1 : null,
65+
'-ms-grid-rows':col.getGridTemplate(true, true),
66+
'-ms-grid-columns':col.getGridTemplate(false, true)
67+
}">
68+
<ng-template ngFor let-col [ngForOf]="col.children">
69+
<ng-container *ngTemplateOutlet="col.visibleIndex === 0 && grid.hasDetails? mrlExpandableCellTemplate : mrlCellTemplate; context: getContext(col, this)"></ng-container>
70+
</ng-template>
71+
</div>
72+
</ng-template>
73+
6474
<ng-template #rowSelectorBaseTemplate>
6575
<div class="igx-grid__cbx-padding">
6676
<igx-checkbox
@@ -147,6 +157,7 @@
147157
[style.-ms-grid-column]="col.colStart"
148158
[style.grid-column-start]="col.colStart"
149159
[lastPinned]="col.columnLayoutChild ? null : col.isLastPinned"
160+
[firstPinned]="col.columnLayoutChild ? null : col.isFirstPinned"
150161
[formatter]="col.formatter"
151162
[row]="this"
152163
[style.min-height.px]="grid.rowHeight || 32"

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,19 @@ export class IgxGridRowComponent extends IgxRowDirective<IgxGridComponent> {
5454
};
5555
}
5656

57+
get mrlRightPinnedOffset(): string {
58+
return !this.grid.isPinningToStart ?
59+
- this.grid.pinnedWidth - this.grid.headerFeaturesWidth + 'px' :
60+
null;
61+
}
62+
63+
getContextMRL(pinnedCols, row) {
64+
return {
65+
$implicit: pinnedCols,
66+
row: row
67+
};
68+
}
69+
5770
get expanded() {
5871
return this.gridAPI.get_row_expansion_state(this.rowData);
5972
}

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

Lines changed: 82 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -421,12 +421,12 @@ describe('IgxGrid - Column Pinning #grid', () => {
421421

422422
describe('To End', () => {
423423
configureTestSuite();
424-
425424
beforeAll(async(() => {
426425
TestBed.configureTestingModule({
427426
declarations: [
428427
GridRightPinningComponent,
429-
PinnedGroupsGridComponent
428+
PinnedGroupsGridComponent,
429+
GridRightPinningMRLComponent
430430
],
431431
imports: [NoopAnimationsModule, IgxGridModule]
432432
}).compileComponents();
@@ -574,6 +574,28 @@ describe('IgxGrid - Column Pinning #grid', () => {
574574
expect(fistPinnedHeaders[1].context.column.field).toBe('CompanyName');
575575
});
576576

577+
it('should pin an unpinned column when drag/drop it among pinned columns.', (async() => {
578+
579+
const fix = TestBed.createComponent(GridRightPinningComponent);
580+
fix.detectChanges();
581+
582+
const grid = fix.componentInstance.instance;
583+
grid.pinning = { columns: ColumnPinningPosition.End };
584+
fix.detectChanges();
585+
await wait();
586+
fix.detectChanges();
587+
588+
// move 'ID' column to the pinned area
589+
grid.moveColumn(grid.getColumnByName('ID'), grid.getColumnByName('ContactName'));
590+
fix.detectChanges();
591+
592+
// verify column is pinned at the correct place
593+
expect(grid.pinnedColumns[0].field).toEqual('CompanyName');
594+
expect(grid.pinnedColumns[1].field).toEqual('ID');
595+
expect(grid.pinnedColumns[2].field).toEqual('ContactName');
596+
expect(grid.getColumnByName('ID').pinned).toBeTruthy();
597+
}));
598+
577599
it('should correctly pin columns with their summaries to end.', async() => {
578600
const fix = TestBed.createComponent(GridRightPinningComponent);
579601
fix.detectChanges();
@@ -599,6 +621,24 @@ describe('IgxGrid - Column Pinning #grid', () => {
599621
expect(pinnedSummaryCells[1].nativeElement.className.indexOf('igx-grid-summary--pinned-first'))
600622
.toBe(-1);
601623
});
624+
625+
it('should correctly pin multi-row-layouts to end.', () => {
626+
const fix = TestBed.createComponent(GridRightPinningMRLComponent);
627+
fix.detectChanges();
628+
const grid = fix.componentInstance.instance;
629+
// check row DOM
630+
const row = grid.getRowByIndex(0).nativeElement;
631+
expect(row.children[0].classList.contains('igx-display-container')).toBeTruthy();
632+
expect(row.children[1].classList.contains('igx-grid__td--pinned-first')).toBeTruthy();
633+
expect(row.children[1].classList.contains('igx-grid__mrl-block')).toBeTruthy();
634+
expect(parseInt((row.children[1] as any).style.left, 10)).toEqual(-408);
635+
636+
// check correct headers have left border
637+
const fistPinnedHeaders = fix.debugElement.query(By.css('.igx-grid__thead-wrapper'))
638+
.query((By.css('.igx-grid__th--pinned-first')));
639+
expect(fistPinnedHeaders.classes['igx-grid__mrl-block']).toBeTruthy();
640+
expect(fistPinnedHeaders.classes['igx-grid__th--pinned-first']).toBeTruthy();
641+
});
602642
});
603643
});
604644

@@ -969,3 +1009,43 @@ export class GridRightPinningComponent {
9691009
this.selectedCell = event.cell;
9701010
}
9711011
}
1012+
1013+
@Component({
1014+
template: `
1015+
<igx-grid
1016+
[pinning]='pinningConfig'
1017+
[width]='"800px"'
1018+
[height]='"500px"'
1019+
[data]="data"
1020+
[autoGenerate]="false">
1021+
<igx-column-layout *ngFor='let group of colGroups' [pinned]='group.pinned'>
1022+
<igx-column *ngFor='let col of group.columns'
1023+
[rowStart]="col.rowStart" [colStart]="col.colStart" [width]='col.width'
1024+
[colEnd]="col.colEnd" [rowEnd]="col.rowEnd" [field]='col.field'></igx-column>
1025+
</igx-column-layout>
1026+
</igx-grid>
1027+
`
1028+
})
1029+
export class GridRightPinningMRLComponent extends GridRightPinningComponent {
1030+
colGroups = [
1031+
{
1032+
group: 'group1',
1033+
pinned: true,
1034+
columns: [
1035+
{ field: 'ID', rowStart: 1, colStart: 1 },
1036+
{ field: 'CompanyName', rowStart: 1, colStart: 2 },
1037+
{ field: 'ContactName', rowStart: 1, colStart: 3 },
1038+
{ field: 'ContactTitle', rowStart: 2, colStart: 1, rowEnd: 4, colEnd: 4 },
1039+
]
1040+
},
1041+
{
1042+
group: 'group2',
1043+
columns: [
1044+
{ field: 'Country', rowStart: 1, colStart: 1, colEnd: 4, rowEnd: 3 },
1045+
{ field: 'Region', rowStart: 3, colStart: 1 },
1046+
{ field: 'PostalCode', rowStart: 3, colStart: 2 },
1047+
{ field: 'Fax', rowStart: 3, colStart: 3 }
1048+
]
1049+
}
1050+
];
1051+
}

0 commit comments

Comments
 (0)