Skip to content

Commit 87afbce

Browse files
ddinchevaddincheva
committed
chore(*): update column groups sample
1 parent 7a07636 commit 87afbce

File tree

2 files changed

+27
-38
lines changed

2 files changed

+27
-38
lines changed

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

Lines changed: 15 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,23 @@
11
<div class="sample-wrapper">
22
<app-page-header title="Grid Column Groups"></app-page-header>
33
<section style="height: 800px" class="sample-content">
4-
<ng-template #columnGroupTemplate let-col>
5-
<div class="column-group-template__container">
6-
<igx-icon [attr.draggable]="false"
7-
(click)="toggleColumnGroup(col)"
8-
class="column-group-template__icon">
9-
{{columnGroupStates.get(col) ? 'expand_more' : 'expand_less'}}</igx-icon>
10-
{{col.header}}
11-
</div>
12-
</ng-template>
13-
14-
<igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact">
4+
<igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true"[columnHiding]="true">
155
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column>
16-
<igx-column-group [movable]="true" [pinned]="false" header="General Information" [headerTemplate]="columnGroupTemplate">
17-
<igx-column [movable]="true" [filterable]="false" sortable="true" resizable="true" field="CompanyName" width="200px"></igx-column>
18-
<igx-column-group [movable]="true" header="Person Details">
19-
<igx-column [movable]="true" [pinned]="false" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
20-
<igx-column [movable]="true" [hasSummary]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
6+
<igx-column-group [movable]="true" [pinned]="false" header="General Information" [collapsible]="true">
7+
<igx-column [movable]="true" [filterable]="false" sortable="true" resizable="true" field="CompanyName" width="200px" [openOnGroupCollapsed]="false"></igx-column>
8+
<igx-column field="Missing"></igx-column>
9+
<igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expanded]="false" [openOnGroupCollapsed]="true">
10+
<igx-column [movable]="true" [openOnGroupCollapsed]="true" [pinned]="false" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
11+
<igx-column [movable]="true" [openOnGroupCollapsed]="false" [hasSummary]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
2112
</igx-column-group>
2213
</igx-column-group>
2314
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" field="ID" editable="true"></igx-column>
24-
<igx-column-group [movable]="true" header="Address Information" [headerTemplate]="columnGroupTemplate">
25-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
26-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region"></igx-column>
27-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City"></igx-column>
28-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address"></igx-column>
29-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" width="250px" hidden="true" field="FullAddress"></igx-column>
30-
</igx-column-group>
31-
<igx-column-group [movable]="true" header="Address Information">
32-
<igx-column-group [movable]="true" header="Location">
33-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country"></igx-column>
34-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region"></igx-column>
35-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City"></igx-column>
36-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address"></igx-column>
37-
</igx-column-group>
38-
<igx-column-group [movable]="true" header="Contact Information">
39-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Phone"></igx-column>
40-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Fax"></igx-column>
41-
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="PostalCode"></igx-column>
42-
</igx-column-group>
15+
<igx-column-group [movable]="true" header="Address Information" [collapsible]='collapse' [expanded]='false'>
16+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country" [openOnGroupCollapsed]= 'false'></igx-column>
17+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region" [openOnGroupCollapsed]= 'false'></igx-column>
18+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City" [openOnGroupCollapsed]= 'false'></igx-column>
19+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address" [openOnGroupCollapsed]= 'false'></igx-column>
20+
<igx-column [movable]="true" filterable="true" editable="true" sortable="true" resizable="true" width="250px" [openOnGroupCollapsed]= 'true' [hidden]='true' field="FullAddress"></igx-column>
4321
</igx-column-group>
4422
<igx-column field="Missing"></igx-column>
4523
<igx-column field="Missing"></igx-column>
@@ -73,6 +51,7 @@
7351
</igx-column-group>
7452
</igx-grid>
7553
<span igxButton (click)="pinGroup()">Pin first group</span>
76-
<span igxButton (click)="hideGroup()">Hide first group</span>
54+
<span igxButton (click)="hideGroup()">Person Details - toggle expand</span>
55+
<span igxButton (click)="toggleCollapsible()">Toggle collapsible - Address Information</span>
7756
</section>
7857
</div>

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { IgxGridComponent, IgxButtonDirective, IgxColumnGroupComponent } from 'i
77
templateUrl: 'grid-column-groups.sample.html'
88
})
99
export class GridColumnGroupsSampleComponent implements AfterViewInit {
10+
public collapse = true;
1011

1112
@ViewChild('grid', { read: IgxGridComponent, static: true })
1213
grid: IgxGridComponent;
@@ -58,10 +59,19 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit {
5859
}
5960

6061
hideGroup() {
61-
const col = this.grid.columnList.filter(c => c.header === 'Person Details')[0];
62+
/* const col = this.grid.columnList.filter(c => c.header === 'Person Details')[0];
6263
col.hidden = !col.hidden;
6364
this.grid.getColumnByName('CompanyName').hidden = true;
64-
console.log(this.grid.getColumnByName('CompanyName').parent);
65+
console.log(this.grid.getColumnByName('CompanyName').parent); */
66+
this.grid.columnList.filter(c => c.header === 'Person Details')[0].expanded =
67+
!this.grid.columnList.filter(c => c.header === 'Person Details')[0].expanded;
68+
69+
}
70+
71+
toggleCollapsible() {
72+
this.collapse = !this.collapse;
73+
/* this.grid.columnList.filter(c => c.header === 'General Information')[0].collapsible =
74+
!this.grid.columnList.filter(c => c.header === 'General Information')[0].collapsible; */
6575
}
6676

6777
ngAfterViewInit() {

0 commit comments

Comments
 (0)