Skip to content

Commit 2f90507

Browse files
ddinchevaddincheva
committed
chore(*): updare changelog and column group sample
1 parent 53cebd9 commit 2f90507

File tree

3 files changed

+41
-24
lines changed

3 files changed

+41
-24
lines changed

‎CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@ All notable changes for each version of this project will be documented in this
2424
- `NoopFilteringStrategy` is added, which can be used to disable the default filtering of the grid by assigning its instance to the grid's `filterStrategy` input. (Useful for remote filtering.)
2525
- `sortingExpressionsChange` event emitter is added, which is fired whenever a change to the sorting expressions has occurred (prior to performing the actual sorting).
2626
- `filteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the filtering expressions has occurred (prior to performing the actual filtering).
27+
- `collapsible` and `expand` properties are added to the IgxColumnGroupComponent; `collapsible` property identifies that certain column group is collapsible; `expand` identifies whether the group is expanded or collapsed initially;
28+
- `collapsibleChange` and `expandChange` events are added to the IgxColumnGroupComponent which are emited whenever `collapsible` and `expand` properties are changed accordingly;
29+
- `visibleOnCollapse` property has been added to the IgxColumnComponent; Allows you to set whether the column stay visible when its parrent is collapsed.
30+
- `visibleOnCollapseChange` events is added to the IgxColumnComponent which are emited whenever `visibleOnCollapse` property is changed;
31+
- `collapsibleIndicatorTemplate` property is introduced to IgxColumnGroupComponent, which allows you to set a custom template for the expand collapse indicator;
32+
- `igxCollapsibleIndicator` directive has been introduced, which allows you to set a custom template for the expand collapse indicator;
2733
- `IgxOverlayService`:
2834
- `setOffset` method added. It offsets the content along the corresponding axis by the provided amount.
2935
- `IgxToggleDirective`:

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,29 @@
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-
<igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true"[columnHiding]="true">
5-
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" [pinned]="true" field="Missing"></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>
4+
<ng-template igxCollapsibleIndicator let-column="column" #ind >
5+
<igx-icon [attr.draggable]="false">{{column.expand ? 'remove' : 'add'}} </igx-icon>
6+
</ng-template>
7+
<igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true" [allowAdvancedFiltering]="true" [columnHiding]="true">
8+
<igx-column [movable]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column>
9+
<igx-column-group [movable]="true" header="General Information" [collapsible]="true" [expand]="s" [hidden]="true">
10+
<igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" width="200px" [visibleOnCollapse]="false"></igx-column>
811
<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>
12+
<igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expand]="false" [visibleOnCollapse]="true">
13+
<igx-column [movable]="true" [visibleOnCollapse]="true" [hidden]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
14+
<igx-column [movable]="true" [visibleOnCollapse]="false" [pinned]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
1215
</igx-column-group>
16+
<ng-template igxCollapsibleIndicator let-column="column" #ind >
17+
<igx-icon [attr.draggable]="false">{{column.expand ? 'remove' : 'add'}} </igx-icon>
18+
</ng-template>
1319
</igx-column-group>
14-
<igx-column [movable]="true" [hasSummary]="true" [resizable]="true" field="ID" editable="true"></igx-column>
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>
20+
<igx-column [movable]="true" [hidden]="s" [resizable]="true" field="ID" editable="true"></igx-column>
21+
<igx-column-group [movable]="true" header="Address Information" [(collapsible)]='s' [expand]='true'>
22+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country" [visibleOnCollapse]= 'false'></igx-column>
23+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region" [visibleOnCollapse]= 'false'></igx-column>
24+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City" [visibleOnCollapse]= 'false'></igx-column>
25+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address" [visibleOnCollapse]= 'false'></igx-column>
26+
<igx-column [movable]="true" filterable="true" editable="true" sortable="true" [visibleOnCollapse]= 'true' field="FullAddress"></igx-column>
2127
</igx-column-group>
2228
<igx-column field="Missing"></igx-column>
2329
<igx-column field="Missing"></igx-column>
@@ -50,8 +56,8 @@
5056
<igx-column filterable="true" sortable="true" resizable="true" field="PostalCode"></igx-column>
5157
</igx-column-group>
5258
</igx-grid>
53-
<span igxButton (click)="pinGroup()">Pin first group</span>
54-
<span igxButton (click)="hideGroup()">Person Details - toggle expand</span>
55-
<span igxButton (click)="toggleCollapsible()">Toggle collapsible - Address Information</span>
59+
<span igxButton (click)="log()">Pin first group</span>
60+
<span igxButton (click)="hideGroup()">Toggle expand - Address Information</span>
61+
<span igxButton (click)="toggleCollapsible()">Toggle collapsible - General Information</span>
5662
</section>
5763
</div>

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

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, ViewChild, AfterViewInit } from '@angular/core';
2-
import { IgxGridComponent, IgxButtonDirective, IgxColumnGroupComponent } from 'igniteui-angular';
2+
import { IgxGridComponent, IgxColumnGroupComponent } from 'igniteui-angular';
33

44
@Component({
55
selector: 'app-grid-column-groups-sample',
@@ -11,8 +11,9 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit {
1111

1212
@ViewChild('grid', { read: IgxGridComponent, static: true })
1313
grid: IgxGridComponent;
14-
14+
wid = '250px';
1515
columnGroupStates = new Map<IgxColumnGroupComponent, boolean>();
16+
s = true;
1617

1718
data: any[] = [
1819
// tslint:disable:max-line-length
@@ -58,20 +59,24 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit {
5859
t.pinned = !t.pinned;
5960
}
6061

62+
log() {
63+
console.log(this.s);
64+
}
65+
6166
hideGroup() {
6267
/* const col = this.grid.columnList.filter(c => c.header === 'Person Details')[0];
6368
col.hidden = !col.hidden;
6469
this.grid.getColumnByName('CompanyName').hidden = true;
6570
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;
71+
(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expand =
72+
!(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).expand;
6873

6974
}
7075

7176
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; */
77+
// this.collapse = !this.collapse;
78+
(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).collapsible =
79+
!(this.grid.columnList.filter(c => c.header === 'Address Information')[0] as any).collapsible;
7580
}
7681

7782
ngAfterViewInit() {

0 commit comments

Comments
 (0)