Skip to content

Commit 24e4220

Browse files
SAndreevaSAndreeva
committed
Merge branch 'rkaraivanov/multi-column-headers' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/multi-column-headers
2 parents cfe5a59 + 6371049 commit 24e4220

File tree

5 files changed

+155
-11
lines changed

5 files changed

+155
-11
lines changed

‎projects/igniteui-angular/src/lib/chips/chips.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { cloneArray } from '../core/utils';
55
import { IgxRippleModule } from '../directives/ripple/ripple.directive';
66
import { IgxButtonModule } from '../directives/button/button.directive';
77
import { IgxAvatarModule } from '../avatar/avatar.component';
8-
import { IgxIconModule } from '../icon';
8+
import { IgxIconModule } from '../icon/index';
99
import { IgxConnectorDirective } from './connector.directive';
1010
import { IgxChipComponent } from './chip.component';
1111
import { IgxChipsAreaComponent } from './chips-area.component';

‎projects/igniteui-angular/src/lib/grid/column-group.spec.ts‎

Lines changed: 139 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { By } from '@angular/platform-browser';
99
const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid__th-title';
1010
const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid__thead-title';
1111
const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid__thead-group';
12+
const GRID_COL_THEAD_CLASS = '.igx-grid__th'
1213

1314
const expectedColumnGroups = 5;
1415
const expectedLevel = 2;
@@ -68,6 +69,81 @@ describe('IgxGrid - multi-column headers', () => {
6869
expect(addressGroup.children.first.children.toArray().every(c => c.hidden === true)).toEqual(true);
6970
});
7071

72+
it('column hiding - Verify column hiding of Individual column and Child column', () => {
73+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
74+
fixture.detectChanges();
75+
const grid = fixture.componentInstance.grid;
76+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
77+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
78+
79+
//Hide individual column
80+
grid.getColumnByName('ID').hidden = true;
81+
fixture.detectChanges();
82+
83+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
84+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
85+
86+
//Hide column in goup
87+
grid.getColumnByName('CompanyName').hidden = true;
88+
fixture.detectChanges();
89+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(16);
90+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(9);
91+
92+
grid.getColumnByName('Address').hidden = true;
93+
fixture.detectChanges();
94+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(15);
95+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(8);
96+
});
97+
98+
it('column hiding - Verify when 2 of 2 child columns are hidden, the Grouped column would be hidden as well.', () => {
99+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
100+
fixture.detectChanges();
101+
const grid = fixture.componentInstance.grid;
102+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
103+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
104+
105+
//Hide 2 columns in the group
106+
grid.getColumnByName('ContactName').hidden = true;
107+
grid.getColumnByName('ContactTitle').hidden = true;
108+
fixture.detectChanges();
109+
110+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(15);
111+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(9);
112+
expect(getColGroup(grid, 'Person Details').hidden).toEqual(true);
113+
114+
// Show one of the columns
115+
grid.getColumnByName('ContactName').hidden = false;
116+
fixture.detectChanges();
117+
118+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
119+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
120+
expect(getColGroup(grid, 'Person Details').hidden).toEqual(false);
121+
});
122+
123+
it('column hiding - Verify when 1 child column and 1 group are hidden, the Grouped column would be hidden as well.', () => {
124+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
125+
fixture.detectChanges();
126+
const grid = fixture.componentInstance.grid;
127+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(18);
128+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(11);
129+
130+
//Hide 2 columns in the group
131+
grid.getColumnByName('CompanyName').hidden = true;
132+
getColGroup(grid, 'Person Details').hidden = true;
133+
fixture.detectChanges();
134+
135+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(13);
136+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(8);
137+
expect(getColGroup(grid, 'General Information').hidden).toEqual(true);
138+
139+
// Show the group
140+
getColGroup(grid, 'Person Details').hidden = false;
141+
fixture.detectChanges();
142+
expect(document.querySelectorAll('igx-grid-header').length).toEqual(17);
143+
expect(fixture.debugElement.queryAll(By.css(GRID_COL_THEAD_CLASS)).length).toEqual(10);
144+
expect(getColGroup(grid, 'General Information').hidden).toEqual(false);
145+
});
146+
71147
it('Width should be correct. Column group with column. No width.', () => {
72148
const fixture = TestBed.createComponent(OneGroupOneColGridComponent);
73149
fixture.detectChanges();
@@ -307,6 +383,9 @@ describe('IgxGrid - multi-column headers', () => {
307383
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
308384
fixture.detectChanges();
309385
const grid = fixture.componentInstance.grid;
386+
grid.getColumnByName('Fax').hidden = true;
387+
getColGroup(grid, 'Person Details').hidden=true;
388+
fixture.detectChanges();
310389

311390
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
312391

@@ -335,6 +414,9 @@ describe('IgxGrid - multi-column headers', () => {
335414
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
336415
fixture.detectChanges();
337416
const grid = fixture.componentInstance.grid;
417+
grid.getColumnByName('Fax').hidden = true;
418+
getColGroup(grid, 'Person Details').hidden=true;
419+
fixture.detectChanges();
338420

339421
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
340422
// Get columnGroup of column
@@ -354,6 +436,9 @@ describe('IgxGrid - multi-column headers', () => {
354436
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
355437
fixture.detectChanges();
356438
const grid = fixture.componentInstance.grid;
439+
grid.getColumnByName('Fax').hidden = true;
440+
getColGroup(grid, 'Person Details').hidden=true;
441+
fixture.detectChanges();
357442

358443
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
359444
// Get allChildren of column
@@ -390,6 +475,9 @@ describe('IgxGrid - multi-column headers', () => {
390475
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
391476
fixture.detectChanges();
392477
const grid = fixture.componentInstance.grid;
478+
grid.getColumnByName('Fax').hidden = true;
479+
getColGroup(grid, 'Person Details').hidden=true;
480+
fixture.detectChanges();
393481

394482
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
395483

@@ -412,6 +500,9 @@ describe('IgxGrid - multi-column headers', () => {
412500
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
413501
fixture.detectChanges();
414502
const grid = fixture.componentInstance.grid;
503+
grid.getColumnByName('Fax').hidden = true;
504+
getColGroup(grid, 'Person Details').hidden=true;
505+
fixture.detectChanges();
415506

416507
expect(grid.columnList.filter(col => col.columnGroup).length).toEqual(7);
417508

@@ -506,6 +597,51 @@ describe('IgxGrid - multi-column headers', () => {
506597
}, 200);
507598
});
508599
}));
600+
601+
it('column pinning - Pin a column in a group', () => {
602+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
603+
fixture.detectChanges();
604+
const grid = fixture.componentInstance.grid;
605+
expect(grid.pinnedColumns.length).toEqual(0);
606+
expect(grid.unpinnedColumns.length).toEqual(18);
607+
608+
// Pin a column in a group
609+
const colContactTitle = grid.getColumnByName('ContactTitle');
610+
colContactTitle.pinned = true;
611+
fixture.detectChanges();
612+
613+
// Verify the topParent group is pinned
614+
const grGeneralInf = getColGroup(grid, 'General Information');
615+
expect(grGeneralInf.allChildren.every(c => c.pinned === true)).toEqual(true);
616+
617+
expect(colContactTitle.visibleIndex).toEqual(5);
618+
expect(grid.getColumnByName('CompanyName').visibleIndex).toEqual(0);
619+
620+
expect(grid.pinnedColumns.length).toEqual(5);
621+
expect(grid.unpinnedColumns.length).toEqual(13);
622+
});
623+
624+
it('column pinning - Pin a group in level one', () => {
625+
const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
626+
fixture.detectChanges();
627+
const grid = fixture.componentInstance.grid;
628+
expect(grid.pinnedColumns.length).toEqual(0);
629+
expect(grid.unpinnedColumns.length).toEqual(18);
630+
631+
// Try to pin a column in a group
632+
const grGeneralInf = getColGroup(grid, 'General Information');
633+
grGeneralInf.pinned = true;
634+
fixture.detectChanges();
635+
636+
// Verify group and all its children are pinned
637+
expect(grGeneralInf.allChildren.every(c => c.pinned === true)).toEqual(true);
638+
639+
expect(grGeneralInf.visibleIndex).toEqual(-1);
640+
expect(grid.getColumnByName('CompanyName').visibleIndex).toEqual(0);
641+
642+
expect(grid.pinnedColumns.length).toEqual(5);
643+
expect(grid.unpinnedColumns.length).toEqual(13);
644+
});
509645
});
510646

511647
@Component({
@@ -584,11 +720,11 @@ export class ColumnGroupTestComponent {
584720

585721
@Component({
586722
template: `
587-
<igx-grid #grid [data]="data" height="600px">
723+
<igx-grid #grid [data]="data" height="600px" width="800px">
588724
<igx-column field="ID"></igx-column>
589725
<igx-column-group header="General Information">
590726
<igx-column field="CompanyName"></igx-column>
591-
<igx-column-group header="Person Details" hidden="true">
727+
<igx-column-group header="Person Details">
592728
<igx-column field="ContactName"></igx-column>
593729
<igx-column field="ContactTitle"></igx-column>
594730
</igx-column-group>
@@ -604,7 +740,7 @@ export class ColumnGroupTestComponent {
604740
</igx-column-group>
605741
<igx-column-group header="Contact Information">
606742
<igx-column field="Phone"></igx-column>
607-
<igx-column field="Fax" hidden="true"></igx-column>
743+
<igx-column field="Fax"></igx-column>
608744
</igx-column-group>
609745
<igx-column-group header="Postal Code">
610746
<igx-column field="PostalCode"></igx-column>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -236,9 +236,11 @@ export class IgxColumnComponent implements AfterContentInit {
236236
get visibleIndex(): number {
237237
const grid = this.gridAPI.get(this.gridID);
238238
let vIndex = -1;
239+
239240
if (this.columnGroup) {
240241
return vIndex;
241242
}
243+
242244
if (!this.pinned) {
243245
const indexInCollection = grid.unpinnedColumns.indexOf(this);
244246
vIndex = indexInCollection === -1 ? -1 : grid.pinnedColumns.length + indexInCollection;
@@ -503,7 +505,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
503505

504506
@Input()
505507
get hidden() {
506-
return this._hidden;
508+
return this.allChildren.every(c => c.hidden);
507509
}
508510

509511
set hidden(value: boolean) {
@@ -538,8 +540,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
538540
}
539541

540542

541-
function flatten(arr: any[]) {
542543

544+
function flatten(arr: any[]) {
543545
let result = [];
544546

545547
arr.forEach(el => {

‎src/app/drop-down/drop-down.sample.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
<app-page-header title="Dropdown menu" description="description for dropdown menu"></app-page-header>
33
<section class="sample-content">
44
<button #button igxButton="raised" igxRipple (click)="toggleDropDown()">Toggle</button>
5-
<igx-drop-down (onSelection)="onSelection($event)" (onOpening)="onOpening($event)">
5+
<igx-drop-down (onSelection)="onSelection()" (onOpening)="onOpening()">
66
<igx-drop-down-item *ngFor="let item of items" disabled={{item.disabled}} isHeader={{item.header}}>
77
<div class="igx-drop-down__item-template">
88
{{ item.field }}
99
</div>
1010
</igx-drop-down-item>
1111
</igx-drop-down>
1212
</section>
13-
</div>
13+
</div>

‎src/app/grid-column-groups/grid-column-groups.sample.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Component, ViewChild } from '@angular/core';
1+
import { Component, ViewChild, AfterViewInit } from '@angular/core';
22
import { IgxGridComponent } from 'igniteui-angular';
33

44
@Component({
55
selector: 'app-grid-column-groups-sample',
66
templateUrl: 'grid-column-groups.sample.html'
77
})
8-
export class GridColumnGroupsSampleComponent {
8+
export class GridColumnGroupsSampleComponent implements AfterViewInit {
99

1010
@ViewChild('grid', { read: IgxGridComponent })
1111
grid: IgxGridComponent;
@@ -43,12 +43,18 @@ export class GridColumnGroupsSampleComponent {
4343
// tslint:enable:max-line-length
4444

4545
pinGroup() {
46-
const t = this.grid.getColumnByName('ID');
46+
const t = this.grid.getColumnByName('ContactTitle');
4747
t.pinned = !t.pinned;
4848
}
4949

5050
hideGroup() {
5151
const col = this.grid.columnList.filter(c => c.header === 'Person Details')[0];
5252
col.hidden = !col.hidden;
53+
this.grid.getColumnByName('CompanyName').hidden = true;
54+
console.log(this.grid.getColumnByName('CompanyName').parent);
55+
}
56+
57+
ngAfterViewInit() {
58+
// this.grid.groupBy({ fieldName: 'Country', dir: 1, ignoreCase: false });
5359
}
5460
}

0 commit comments

Comments
 (0)