Skip to content

Commit 8327d97

Browse files
ddinchevaddincheva
committed
refactor(IgxColumnGroup): rename visibleOnCollapse property #3343 
1 parent 1ada151 commit 8327d97

File tree

5 files changed

+29
-25
lines changed

5 files changed

+29
-25
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ All notable changes for each version of this project will be documented in this
2727
- `advancedFilteringExpressionsTreeChange` event emitter is added, which is fired whenever a change to the advanced filtering expressions has occurred (prior to performing the actual filtering).
2828
- `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;
2929
- `collapsibleChange` and `expandChange` events are added to the IgxColumnGroupComponent which are emited whenever `collapsible` and `expand` properties are changed accordingly;
30-
- `visibleOnCollapse` property has been added to the IgxColumnComponent; Allows you to set whether the column stay visible when its parrent is collapsed.
31-
- `visibleOnCollapseChange` events is added to the IgxColumnComponent which are emited whenever `visibleOnCollapse` property is changed;
30+
- `visibleWhenCollapse` property has been added to the IgxColumnComponent; Allows you to set whether the column stay visible when its parrent is collapsed.
31+
- `visibleWhenCollapseChange` events is added to the IgxColumnComponent which are emited whenever `visibleWhenCollapse` property is changed;
3232
- `collapsibleIndicatorTemplate` property is introduced to IgxColumnGroupComponent, which allows you to set a custom template for the expand collapse indicator;
3333
- `igxCollapsibleIndicator` directive has been introduced, which allows you to set a custom template for the expand collapse indicator;
3434
- `IgxGridExcelStyleFilteringComponent` and `IgxAdvancedFilteringDialogComponent` can now be hosted outside of the grid in order to provide the same experience as the built-in filtering UI.

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -207,8 +207,8 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
207207
this.children.forEach(child => child.hidden = value);
208208
} else {
209209
this.children.forEach(c => {
210-
if (c.visibleOnCollapse === undefined) {c.hidden = false; return; }
211-
c.hidden = this.expand ? c.visibleOnCollapse : !c.visibleOnCollapse;
210+
if (c.visibleWhenCollapse === undefined) {c.hidden = false; return; }
211+
c.hidden = this.expand ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
212212
});
213213
}
214214
}
@@ -241,7 +241,7 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
241241
child.parent = this;
242242
});
243243
if (this.collapsible) {
244-
const cols = this.children.map(child => child.visibleOnCollapse);
244+
const cols = this.children.map(child => child.visibleWhenCollapse);
245245
if (!(cols.some(c => c === true) && cols.some(c => c === false))) {
246246
this.collapsible = false;
247247
return;

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -258,6 +258,9 @@ export class IgxColumnComponent implements AfterContentInit {
258258
/** @hidden */
259259
@Output()
260260
public collapsibleChange = new EventEmitter<boolean>();
261+
/** @hidden */
262+
@Output()
263+
public visibleWhenCollapseChange = new EventEmitter<boolean>();
261264

262265
/**
263266
* Gets whether the hiding is disabled.
@@ -1013,16 +1016,17 @@ export class IgxColumnComponent implements AfterContentInit {
10131016
* Indicates whether the column will be visible when its parent is collapsed.
10141017
* ```html
10151018
* <igx-column-group>
1016-
* <igx-column [visibleOnCollapse]="true"></igx-column>
1019+
* <igx-column [visibleWhenCollapse]="true"></igx-column>
10171020
* </igx-column-group>
10181021
* ```
10191022
* @memberof IgxColumnComponent
10201023
*/
10211024
@Input()
1022-
set visibleOnCollapse(value: boolean) {
1023-
this._visibleOnCollapse = value;
1025+
set visibleWhenCollapse(value: boolean) {
1026+
this._visibleWhenCollapse = value;
1027+
this.visibleWhenCollapseChange.emit(this._visibleWhenCollapse);
10241028
if (this.parent) {
1025-
const cols = this.parent.children.map(child => child.visibleOnCollapse);
1029+
const cols = this.parent.children.map(child => child.visibleWhenCollapse);
10261030
if (!(cols.some(c => c === true) && cols.some(c => c === false))) {
10271031
this.parent.collapsible = false;
10281032
} else {
@@ -1031,9 +1035,9 @@ export class IgxColumnComponent implements AfterContentInit {
10311035
}
10321036
}
10331037

1034-
get visibleOnCollapse(): boolean {
1038+
get visibleWhenCollapse(): boolean {
10351039
if (!this.parent) { return; }
1036-
return this._visibleOnCollapse;
1040+
return this._visibleWhenCollapse;
10371041
}
10381042

10391043
/**
@@ -1166,7 +1170,7 @@ export class IgxColumnComponent implements AfterContentInit {
11661170
/**
11671171
* @hidden
11681172
*/
1169-
protected _visibleOnCollapse;
1173+
protected _visibleWhenCollapse;
11701174
/**
11711175
* @hidden
11721176
*/
@@ -1764,8 +1768,8 @@ export class IgxColumnComponent implements AfterContentInit {
17641768
* @internal
17651769
*/
17661770
protected setExpandCollapseState() {
1767-
this.children.filter(col => (col.visibleOnCollapse !== undefined)).forEach(c => {
1768-
c.hidden = this._expand ? c.visibleOnCollapse : !c.visibleOnCollapse;
1771+
this.children.filter(col => (col.visibleWhenCollapse !== undefined)).forEach(c => {
1772+
c.hidden = this._expand ? c.visibleWhenCollapse : !c.visibleWhenCollapse;
17691773
});
17701774
}
17711775

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,23 @@
77
<igx-grid [allowFiltering]="true" [rowSelectable]="false" #grid [data]="data" displayDensity="compact" [showToolbar]="true" [allowAdvancedFiltering]="true" [columnHiding]="true">
88
<igx-column [movable]="true" [resizable]="true" [pinned]="true" field="Missing"></igx-column>
99
<igx-column-group [movable]="true" header="General Information" [collapsible]="true" [expand]="true" [hidden]="true">
10-
<igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" width="200px" [visibleOnCollapse]="false"></igx-column>
10+
<igx-column [movable]="true" [filterable]="false" [hidden]="true" sortable="true" resizable="true" field="CompanyName" width="200px" [visibleWhenCollapse]="false"></igx-column>
1111
<igx-column field="Missing"></igx-column>
12-
<igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expand]="false" [visibleOnCollapse]="true">
13-
<igx-column [movable]="true" [visibleOnCollapse]="false" [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>
12+
<igx-column-group [movable]="true" header="Person Details" [collapsible]="true" [expand]="false" [visibleWhenCollapse]="true">
13+
<igx-column [movable]="true" [visibleWhenCollapse]="false" [hidden]="true" filterable="true" sortable="true" resizable="true" field="ContactName"></igx-column>
14+
<igx-column [movable]="true" [visibleWhenCollapse]="false" [pinned]="true" filterable="true" sortable="true" resizable="true" field="ContactTitle"></igx-column>
1515
</igx-column-group>
1616
<ng-template igxCollapsibleIndicator let-column="column" #ind >
1717
<igx-icon [attr.draggable]="false">{{column.expand ? 'remove' : 'add'}} </igx-icon>
1818
</ng-template>
1919
</igx-column-group>
2020
<igx-column [movable]="true" [hidden]="s" [resizable]="true" field="ID" editable="true"></igx-column>
2121
<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>
22+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Country" [visibleWhenCollapse]= 'false'></igx-column>
23+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Region" [visibleWhenCollapse]= 'false'></igx-column>
24+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="City" [visibleWhenCollapse]= 'false'></igx-column>
25+
<igx-column [movable]="true" filterable="true" sortable="true" resizable="true" field="Address" [visibleWhenCollapse]= 'false'></igx-column>
26+
<igx-column [movable]="true" filterable="true" editable="true" sortable="true" [visibleWhenCollapse]= 'true' field="FullAddress"></igx-column>
2727
</igx-column-group>
2828
<igx-column field="Missing"></igx-column>
2929
<igx-column field="Missing"></igx-column>
@@ -57,7 +57,7 @@
5757
</igx-column-group>
5858
</igx-grid>
5959
<span igxButton (click)="log()">Pin first group</span>
60-
<span igxButton (click)="pinGroup()">Toggle visibleOnCollapse - Person Details</span>
60+
<span igxButton (click)="pinGroup()">Toggle visibleWhenCollapse - Person Details</span>
6161
<span igxButton (click)="hideGroup()">Toggle expand - Address Information</span>
6262
<span igxButton (click)="toggleCollapsible()">Toggle collapsible - General Information</span>
6363
</section>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ export class GridColumnGroupsSampleComponent implements AfterViewInit {
5656

5757
pinGroup() {
5858
const t = this.grid.getColumnByName('ContactName');
59-
t.visibleOnCollapse = !t.visibleOnCollapse;
59+
t.visibleWhenCollapse = !t.visibleWhenCollapse;
6060
}
6161

6262
log() {

0 commit comments

Comments
 (0)