Skip to content

Commit 1fd604b

Browse files
tachojelevtachojelev
authored
Merge branch 'master' into tzhelev/fix-5577-8.2.x
2 parents 53dad71 + e98cd1a commit 1fd604b

File tree

8 files changed

+116
-33
lines changed

8 files changed

+116
-33
lines changed

‎projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

+10-10
Original file line numberDiff line numberDiff line change
@@ -942,8 +942,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
942942

943943
const totalMovedX = pageX - this._startX;
944944
const totalMovedY = pageY - this._startY;
945-
this._dragGhostHostX = this.dragGhostHost ? this.getdragGhostHostOffsetLeft(this.dragGhostHost) : 0;
946-
this._dragGhostHostY = this.dragGhostHost ? this.getdragGhostHostOffsetTop(this.dragGhostHost) : 0;
945+
this._dragGhostHostX = this.dragGhostHost ? this.getDragGhostHostOffsetLeft(this.dragGhostHost) : 0;
946+
this._dragGhostHostY = this.dragGhostHost ? this.getDragGhostHostOffsetTop(this.dragGhostHost) : 0;
947947

948948
this.dragGhost.style.transitionDuration = '0.0s';
949949
this.dragGhost.style.position = 'absolute';
@@ -1220,21 +1220,21 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
12201220
return window.scrollX ? window.scrollX : (window.pageXOffset ? window.pageXOffset : 0);
12211221
}
12221222

1223-
protected getdragGhostHostOffsetLeft(dragGhostHost: any) {
1224-
if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
1225-
dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
1223+
protected getDragGhostHostOffsetLeft(dragGhostHost: any) {
1224+
const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
1225+
if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
12261226
return 0;
1227-
} else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
1227+
} else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
12281228
return dragGhostHost.offsetParent.getBoundingClientRect().left;
12291229
}
12301230
return dragGhostHost.getBoundingClientRect().left;
12311231
}
12321232

1233-
protected getdragGhostHostOffsetTop(dragGhostHost: any) {
1234-
if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
1235-
dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
1233+
protected getDragGhostHostOffsetTop(dragGhostHost: any) {
1234+
const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
1235+
if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
12361236
return 0;
1237-
} else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
1237+
} else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
12381238
return dragGhostHost.offsetParent.getBoundingClientRect().top;
12391239
}
12401240
return dragGhostHost.getBoundingClientRect().top;

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

-2
Original file line numberDiff line numberDiff line change
@@ -2003,8 +2003,6 @@ export class IgxColumnLayoutComponent extends IgxColumnGroupComponent implements
20032003
}
20042004

20052005
this.children.forEach(child => {
2006-
child.disableHiding = true;
2007-
child.disablePinning = true;
20082006
child.movable = false;
20092007
});
20102008
}

‎projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts

+15
Original file line numberDiff line numberDiff line change
@@ -801,6 +801,21 @@ describe('IgxGrid - multi-row-layout Integration - ', () => {
801801

802802
verifyDOMMatchesLayoutSettings(gridFirstRow, fixture.componentInstance.colGroups);
803803
});
804+
805+
it('should render unpin and hide column buttons into the excel style filter', () => {
806+
const filterIcons = fixture.debugElement.queryAll(By.css('.igx-excel-filter__icon'));
807+
expect(filterIcons.length).not.toBe(0);
808+
809+
filterIcons[0].nativeElement.click();
810+
fixture.detectChanges();
811+
812+
const excelMenu = grid.nativeElement.querySelector('.igx-excel-filter__menu');
813+
const unpinComponent = excelMenu.querySelector('.igx-excel-filter__actions-unpin');
814+
const hideComponent = excelMenu.querySelector('.igx-excel-filter__actions-hide');
815+
816+
expect(unpinComponent).toBeDefined();
817+
expect(hideComponent).toBeDefined();
818+
});
804819
});
805820

806821
describe('GroupBy ', () => {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
436436

437437
protected onColumnsChanged(change: QueryList<IgxColumnComponent>) {
438438
this.updateColumnList();
439-
const cols = change.filter(c => c.grid === this);
439+
const cols = change.filter(c => c.gridAPI.grid === this);
440440
if (cols.length > 0) {
441441
this.columnList.reset(cols);
442442
super.onColumnsChanged(this.columnList);

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

+39-19
Original file line numberDiff line numberDiff line change
@@ -930,49 +930,76 @@ describe('IgxHierarchicalGrid Multi-layout Navigation', () => {
930930
hierarchicalGrid = fixture.componentInstance.hgrid;
931931
setupHierarchicalGridScrollDetection(fixture, hierarchicalGrid);
932932
}));
933-
it('should allow navigating up/down between sibling child grids.', (async () => {
933+
934+
it('should allow navigating up between sibling child grids.', (async () => {
934935
hierarchicalGrid.verticalScrollContainer.scrollTo(2);
935936
await wait(100);
936937
fixture.detectChanges();
937938
const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
938939
const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4];
939940

940941
const child2Cell = child2.dataRowList.toArray()[0].cells.toArray()[0];
941-
child2Cell.nativeElement.focus();
942-
await wait(100);
943-
fixture.detectChanges();
944-
945-
let keyboardEvent = new KeyboardEvent('keydown', {
942+
const keyboardEvent = new KeyboardEvent('keydown', {
946943
code: 'ArrowUp',
947944
key: 'ArrowUp'
948945
});
949946
child2Cell.dispatchEvent(keyboardEvent);
947+
fixture.detectChanges();
950948
await wait(100);
951949
fixture.detectChanges();
952950
const lastCellPrevRI = child1.dataRowList.toArray()[1].cells.toArray()[0];
953951

954952
expect(lastCellPrevRI.selected).toBe(true);
955-
expect(lastCellPrevRI.focused).toBe(true);
956953
expect(lastCellPrevRI.rowIndex).toBe(9);
954+
}));
955+
it('should allow navigating down between sibling child grids.', (async () => {
956+
hierarchicalGrid.verticalScrollContainer.scrollTo(2);
957+
await wait(100);
958+
fixture.detectChanges();
959+
const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
960+
const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4];
957961

958-
keyboardEvent = new KeyboardEvent('keydown', {
962+
child1.verticalScrollContainer.scrollTo(child1.verticalScrollContainer.igxForOf.length - 1);
963+
await wait(100);
964+
fixture.detectChanges();
965+
966+
const keyboardEvent = new KeyboardEvent('keydown', {
959967
code: 'ArrowDown',
960968
key: 'ArrowDown'
961969
});
970+
const child2Cell = child2.dataRowList.toArray()[0].cells.toArray()[0];
971+
const lastCellPrevRI = child1.dataRowList.toArray()[1].cells.toArray()[0];
962972
lastCellPrevRI.dispatchEvent(keyboardEvent);
973+
fixture.detectChanges();
963974
await wait(100);
964975
fixture.detectChanges();
965976
expect(child2Cell.selected).toBe(true);
966977
}));
967-
it('should allow navigating with Tab/Shift+Tab between sibling child grids.', (async () => {
978+
979+
it('should allow navigating with Tab between sibling child grids.', (async () => {
968980
const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
969981
const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4];
970982

971-
const child2Cell = child2.dataRowList.toArray()[0].cells.toArray()[0];
972-
child2Cell.nativeElement.focus();
973-
await wait(240);
983+
child1.verticalScrollContainer.scrollTo(child1.verticalScrollContainer.igxForOf.length - 1);
984+
await wait(100);
974985
fixture.detectChanges();
986+
const rowVirt = child1.dataRowList.toArray()[0].virtDirRow;
987+
rowVirt.scrollTo(rowVirt.igxForOf.length - 1);
988+
await wait(100);
989+
fixture.detectChanges();
990+
const child1Cell = child1.getCellByColumn(9, 'childData');
991+
const child2Cell = child2.dataRowList.toArray()[0].cells.toArray()[0];
992+
// Tab from last cell in 1st child
993+
child1Cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab'}));
994+
await wait(100);
995+
fixture.detectChanges();
996+
expect(child2Cell.selected).toBe(true);
997+
}));
998+
it('should allow navigating with Shift+Tab between sibling child grids.', (async () => {
999+
const child1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
1000+
const child2 = hierarchicalGrid.hgridAPI.getChildGrids(false)[4];
9751001

1002+
const child2Cell = child2.dataRowList.toArray()[0].cells.toArray()[0];
9761003
// Shift + Tab from 2nd child
9771004
child2Cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab', shiftKey: true }));
9781005
await wait(240);
@@ -983,13 +1010,6 @@ describe('IgxHierarchicalGrid Multi-layout Navigation', () => {
9831010
expect(child1Cell.selected).toBe(true);
9841011
expect(child1Cell.rowIndex).toBe(9);
9851012
expect(child1Cell.columnIndex).toBe(6);
986-
987-
// Tab from last cell in 1st child
988-
child1Cell.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab'}));
989-
await wait(100);
990-
fixture.detectChanges();
991-
992-
expect(child2Cell.selected).toBe(true);
9931013
}));
9941014
it('should navigate up from parent row to the correct child sibling.', (async () => {
9951015
const parentCell = hierarchicalGrid.dataRowList.toArray()[1].cells.toArray()[0];

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

+26
Original file line numberDiff line numberDiff line change
@@ -906,6 +906,30 @@ describe('IgxHierarchicalGrid Template Changing Scenarios', () => {
906906
expect(child2Headers[2].nativeElement.innerText).toEqual('Col1');
907907
});
908908

909+
it('should render correct columns when setting columns for parent and child post init using ngFor', () => {
910+
const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
911+
UIInteractions.clickElement(row.expander);
912+
fixture.detectChanges();
913+
914+
const child1Grids = fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
915+
const child1Grid = child1Grids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
916+
917+
fixture.componentInstance.parentCols = ['Col1', 'Col2'];
918+
fixture.componentInstance.islandCols1 = ['ID', 'ProductName', 'Col1'];
919+
fixture.detectChanges();
920+
// check parent cols
921+
expect(hierarchicalGrid.columns.length).toBe(4);
922+
expect(hierarchicalGrid.columns[0].field).toBe('ID');
923+
expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
924+
expect(hierarchicalGrid.columns[2].field).toBe('Col1');
925+
expect(hierarchicalGrid.columns[3].field).toBe('Col2');
926+
// check child cols
927+
expect(child1Grid.columns.length).toBe(3);
928+
expect(hierarchicalGrid.columns[0].field).toBe('ID');
929+
expect(hierarchicalGrid.columns[1].field).toBe('ProductName');
930+
expect(hierarchicalGrid.columns[2].field).toBe('Col1');
931+
});
932+
909933
it('should update columns for expanded child when adding column to row island', () => {
910934
const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
911935
UIInteractions.clickElement(row.expander);
@@ -1206,6 +1230,7 @@ export class IgxHGridRemoteOnDemandComponent {
12061230
<igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" [height]="'500px'" [width]="'800px'" >
12071231
<igx-column field="ID"></igx-column>
12081232
<igx-column field="ProductName"></igx-column>
1233+
<igx-column *ngFor="let colField of parentCols" [field]="colField"></igx-column>
12091234
<igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland [height]="'350px'">
12101235
<igx-column *ngFor="let colField of islandCols1" [field]="colField"></igx-column>
12111236
<igx-row-island [key]="'childData'" [autoGenerate]="false" #rowIsland2 [height]="'200px'">
@@ -1217,6 +1242,7 @@ export class IgxHGridRemoteOnDemandComponent {
12171242
export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGridTestBaseComponent implements AfterViewInit {
12181243
public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3'];
12191244
public cols2 = ['ID', 'ProductName', 'Col1'];
1245+
public parentCols = [];
12201246
public islandCols1 = [];
12211247
public islandCols2 = [];
12221248
constructor(public cdr: ChangeDetectorRef) {

‎src/app/hierarchical-grid/hierarchical-grid.sample.html

+16-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ <h4 class="sample-title">Sample three</h4>
6666
<igx-hierarchical-grid [data]="localData" [autoGenerate]="true" [height]="'600px'" [width]="'800px'" #hGrid2>
6767

6868
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true' >
69-
<div *ngIf='riToggle'>
69+
<div *ngIf='riToggle'>
7070
<igx-row-island [key]="'childData'" [autoGenerate]="true" [rowSelectable]='isRowSelectable' [allowFiltering]='true'></igx-row-island>
7171
</div>
7272
</igx-row-island>
@@ -81,5 +81,20 @@ <h4 class="sample-title">Sample three</h4>
8181
</div> -->
8282
</igx-hierarchical-grid>
8383

84+
<h4 class="sample-title">Sample 4</h4>
85+
<div class="sample-actions">
86+
<button igxButton="raised" (click)='LoadMoreColumns()'>Change columns runtime</button>
87+
</div>
88+
<igx-hierarchical-grid [data]="localData" [autoGenerate]="false" [height]="'600px'" [width]="'800px'" #hGrid2>
89+
<igx-column field="ID" [resizable]="true" [pinned]="true" [filterable]='true'></igx-column>
90+
<igx-column field="ChildLevels" [resizable]="true" [groupable]='true'></igx-column>
91+
<igx-column field="ProductName" hasSummary='true'></igx-column>
92+
<igx-column *ngFor="let c of columns" [field]="c"></igx-column>
93+
<igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelectable]='isRowSelectable' [allowFiltering]='true'>
94+
<igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
95+
<igx-column *ngFor="let c of childColumns" [field]="c"></igx-column>
96+
</igx-row-island>
97+
</igx-hierarchical-grid>
98+
8499

85100
</div>

‎src/app/hierarchical-grid/hierarchical-grid.sample.ts

+9
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export class HierarchicalGridSampleComponent {
1515
displayDensities;
1616
riToggle = true;
1717

18+
19+
public columns;
20+
public childColumns;
21+
1822
@ViewChild('layout1', { static: true })
1923
layout1: IgxRowIslandComponent;
2024

@@ -96,4 +100,9 @@ export class HierarchicalGridSampleComponent {
96100
selectDensity(event) {
97101
this.density = this.displayDensities[event.index].label;
98102
}
103+
104+
public LoadMoreColumns() {
105+
this.columns = ['Col1', 'Col2', 'Col3'];
106+
this.childColumns = ['ChildCol1', 'ChildCol2'];
107+
}
99108
}

0 commit comments

Comments
 (0)