Skip to content

Commit 214cfb5

Browse files
ChronosSFChronosSF
authored
Merge pull request #6155 from IgniteUI/vmihalkov/fix-6004-master
fix(column): Added property decorator for column component to watch for changes in column properties #6004
2 parents 74dbab4 + 9ae33cb commit 214cfb5

File tree

7 files changed

+67
-4
lines changed

7 files changed

+67
-4
lines changed

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

+32-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212
EventEmitter,
1313
} from '@angular/core';
1414
import { notifyChanges } from '../watch-changes';
15+
import { WatchColumnChanges } from '../watch-changes';
16+
import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
1517
import { DataType } from '../../data-operations/data-util';
1618
import { DeprecateProperty } from '../../core/deprecateDecorators';
1719
import {
@@ -81,6 +83,7 @@ export class IgxColumnComponent implements AfterContentInit {
8183
* @memberof IgxColumnComponent
8284
*/
8385
@notifyChanges()
86+
@WatchColumnChanges()
8487
@Input()
8588
public header = '';
8689
/**
@@ -94,6 +97,7 @@ export class IgxColumnComponent implements AfterContentInit {
9497
* ```
9598
* @memberof IgxColumnComponent
9699
*/
100+
@WatchColumnChanges()
97101
@Input()
98102
public sortable = false;
99103
/**
@@ -108,6 +112,7 @@ export class IgxColumnComponent implements AfterContentInit {
108112
* @memberof IgxColumnComponent
109113
*/
110114
@notifyChanges(true)
115+
@WatchColumnChanges()
111116
@Input()
112117
groupable = false;
113118
/**
@@ -118,6 +123,7 @@ export class IgxColumnComponent implements AfterContentInit {
118123
* ```
119124
* @memberof IgxColumnComponent
120125
*/
126+
@WatchColumnChanges()
121127
@Input()
122128
get editable(): boolean {
123129
// Updating the primary key when grid has transactions (incl. row edit)
@@ -160,6 +166,7 @@ export class IgxColumnComponent implements AfterContentInit {
160166
* @memberof IgxColumnComponent
161167
*/
162168
@notifyChanges()
169+
@WatchColumnChanges()
163170
@Input()
164171
public filterable = true;
165172
/**
@@ -173,6 +180,7 @@ export class IgxColumnComponent implements AfterContentInit {
173180
* ```
174181
* @memberof IgxColumnComponent
175182
*/
183+
@WatchColumnChanges()
176184
@Input()
177185
public resizable = false;
178186
/**
@@ -183,6 +191,7 @@ export class IgxColumnComponent implements AfterContentInit {
183191
* @memberof IgxColumnComponent
184192
*/
185193
@notifyChanges(true)
194+
@WatchColumnChanges()
186195
@Input()
187196
get hasSummary() {
188197
return this._hasSummary;
@@ -210,6 +219,7 @@ export class IgxColumnComponent implements AfterContentInit {
210219
*@memberof IgxColumnComponent
211220
*/
212221
@notifyChanges(true)
222+
@WatchColumnChanges()
213223
@Input()
214224
get hidden(): boolean {
215225
return this._hidden;
@@ -257,6 +267,7 @@ export class IgxColumnComponent implements AfterContentInit {
257267
* @memberof IgxColumnComponent
258268
*/
259269
@notifyChanges()
270+
@WatchColumnChanges()
260271
@Input()
261272
disableHiding = false;
262273
/**
@@ -267,6 +278,7 @@ export class IgxColumnComponent implements AfterContentInit {
267278
* @memberof IgxColumnComponent
268279
*/
269280
@notifyChanges()
281+
@WatchColumnChanges()
270282
@Input()
271283
disablePinning = false;
272284
/**
@@ -280,6 +292,7 @@ export class IgxColumnComponent implements AfterContentInit {
280292
* ```
281293
* @memberof IgxColumnComponent
282294
*/
295+
@WatchColumnChanges()
283296
@notifyChanges()
284297
@Input()
285298
public movable = false;
@@ -291,6 +304,7 @@ export class IgxColumnComponent implements AfterContentInit {
291304
* @memberof IgxColumnComponent
292305
*/
293306
@notifyChanges(true)
307+
@WatchColumnChanges()
294308
@Input()
295309
public get width(): string {
296310
return this.widthSetByUser ? this._width : this.defaultWidth;
@@ -351,6 +365,7 @@ export class IgxColumnComponent implements AfterContentInit {
351365
* ```
352366
* @memberof IgxColumnComponent
353367
*/
368+
@WatchColumnChanges()
354369
@Input()
355370
public maxWidth: string;
356371
/**
@@ -365,6 +380,7 @@ export class IgxColumnComponent implements AfterContentInit {
365380
* @memberof IgxColumnComponent
366381
*/
367382
@notifyChanges()
383+
@WatchColumnChanges()
368384
@Input()
369385
public set minWidth(value: string) {
370386
const minVal = parseFloat(value);
@@ -386,6 +402,7 @@ export class IgxColumnComponent implements AfterContentInit {
386402
* @memberof IgxColumnComponent
387403
*/
388404
@notifyChanges()
405+
@WatchColumnChanges()
389406
@Input()
390407
public headerClasses = '';
391408

@@ -400,6 +417,7 @@ export class IgxColumnComponent implements AfterContentInit {
400417
* @memberof IgxColumnComponent
401418
*/
402419
@notifyChanges()
420+
@WatchColumnChanges()
403421
@Input()
404422
public headerGroupClasses = '';
405423
/**
@@ -419,6 +437,7 @@ export class IgxColumnComponent implements AfterContentInit {
419437
* @memberof IgxColumnComponent
420438
*/
421439
@notifyChanges()
440+
@WatchColumnChanges()
422441
@Input()
423442
public cellClasses: any;
424443

@@ -440,6 +459,7 @@ export class IgxColumnComponent implements AfterContentInit {
440459
* @memberof IgxColumnComponent
441460
*/
442461
@notifyChanges()
462+
@WatchColumnChanges()
443463
@Input()
444464
cellStyles = null;
445465
/**
@@ -473,6 +493,7 @@ export class IgxColumnComponent implements AfterContentInit {
473493
* @memberof IgxColumnComponent
474494
*/
475495
@notifyChanges()
496+
@WatchColumnChanges()
476497
@Input()
477498
formatter: (value: any) => any;
478499
/**
@@ -486,6 +507,7 @@ export class IgxColumnComponent implements AfterContentInit {
486507
* ```
487508
* @memberof IgxColumnComponent
488509
*/
510+
@WatchColumnChanges()
489511
@Input()
490512
public filteringIgnoreCase = true;
491513
/**
@@ -499,6 +521,7 @@ export class IgxColumnComponent implements AfterContentInit {
499521
* ```
500522
* @memberof IgxColumnComponent
501523
*/
524+
@WatchColumnChanges()
502525
@Input()
503526
public sortingIgnoreCase = true;
504527
/**
@@ -521,6 +544,7 @@ export class IgxColumnComponent implements AfterContentInit {
521544
* ```
522545
* @memberof IgxColumnComponent
523546
*/
547+
@WatchColumnChanges()
524548
@Input()
525549
public get pinned(): boolean {
526550
return this._pinned;
@@ -579,6 +603,7 @@ export class IgxColumnComponent implements AfterContentInit {
579603
* @memberof IgxColumnComponent
580604
*/
581605
@notifyChanges(true)
606+
@WatchColumnChanges()
582607
@Input()
583608
public get summaries(): any {
584609
return this._summaries;
@@ -611,6 +636,7 @@ export class IgxColumnComponent implements AfterContentInit {
611636
* @memberof IgxColumnComponent
612637
*/
613638
@notifyChanges()
639+
@WatchColumnChanges()
614640
@Input()
615641
public searchable = true;
616642
/**
@@ -714,6 +740,7 @@ export class IgxColumnComponent implements AfterContentInit {
714740
* @memberof IgxColumnComponent
715741
*/
716742
@notifyChanges()
743+
@WatchColumnChanges()
717744
@Input('cellTemplate')
718745
get bodyTemplate(): TemplateRef<any> {
719746
return this._bodyTemplate;
@@ -745,6 +772,7 @@ export class IgxColumnComponent implements AfterContentInit {
745772
* @memberof IgxColumnComponent
746773
*/
747774
@notifyChanges()
775+
@WatchColumnChanges()
748776
@Input()
749777
get headerTemplate(): TemplateRef<any> {
750778
return this._headerTemplate;
@@ -777,6 +805,7 @@ export class IgxColumnComponent implements AfterContentInit {
777805
* @memberof IgxColumnComponent
778806
*/
779807
@notifyChanges()
808+
@WatchColumnChanges()
780809
@Input('cellEditorTemplate')
781810
get inlineEditorTemplate(): TemplateRef<any> {
782811
return this._inlineEditorTemplate;
@@ -806,6 +835,7 @@ export class IgxColumnComponent implements AfterContentInit {
806835
* @memberof IgxColumnComponent
807836
*/
808837
@notifyChanges()
838+
@WatchColumnChanges()
809839
@Input('filterCellTemplate')
810840
get filterCellTemplate(): TemplateRef<any> {
811841
return this._filterCellTemplate;
@@ -1135,7 +1165,8 @@ export class IgxColumnComponent implements AfterContentInit {
11351165
@ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective, static: false })
11361166
public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
11371167

1138-
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef) { }
1168+
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseDirective & GridType>, public cdr: ChangeDetectorRef,
1169+
public rowIslandAPI: IgxRowIslandAPIService) { }
11391170

11401171
/**
11411172
* @hidden

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/select
2424
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
2525
import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
2626
import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
27+
import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
2728
import { FilterMode } from '../common/enums';
2829
import { GridType } from '../common/grid.interface';
2930

@@ -64,7 +65,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs {
6465
IgxFilteringService,
6566
IgxColumnResizingService,
6667
IgxForOfSyncService,
67-
IgxForOfScrollSyncService
68+
IgxForOfScrollSyncService,
69+
IgxRowIslandAPIService
6870
],
6971
selector: 'igx-grid',
7072
templateUrl: './grid.component.html'

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import { IgxOverlayService } from '../../services/index';
4444
import { IgxColumnResizingService } from '../resizing/resizing.service';
4545
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
4646
import { GridType } from '../common/grid.interface';
47+
import { IgxRowIslandAPIService } from './row-island-api.service';
4748

4849
let NEXT_ID = 0;
4950

@@ -65,7 +66,8 @@ export interface HierarchicalStateRecord {
6566
IgxFilteringService,
6667
IgxHierarchicalGridNavigationService,
6768
IgxForOfSyncService,
68-
IgxForOfScrollSyncService
69+
IgxForOfScrollSyncService,
70+
IgxRowIslandAPIService
6971
]
7072
})
7173
export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirective

‎projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island-api.service.ts

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { IgxRowIslandComponent } from './row-island.component';
33
import { Subject } from 'rxjs';
44

55
export class IgxRowIslandAPIService {
6+
public rowIsland: IgxRowIslandComponent;
67
public change: Subject<any> = new Subject<any>();
78
protected state: Map<string, IgxRowIslandComponent> = new Map<string, IgxRowIslandComponent>();
89
protected destroyMap: Map<string, Subject<boolean>> = new Map<string, Subject<boolean>>();

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

+1
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
235235
*/
236236
ngOnInit() {
237237
this.rootGrid = this.hgridAPI.grid;
238+
this.rowIslandAPI.rowIsland = this;
238239
}
239240

240241
/**

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
3333
import { IgxGridNavigationService } from '../grid-navigation.service';
3434
import { GridType } from '../common/grid.interface';
3535
import { IgxColumnComponent } from '../columns/column.component';
36+
import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
3637

3738
let NEXT_ID = 0;
3839

@@ -66,7 +67,8 @@ let NEXT_ID = 0;
6667
{ provide: IgxGridBaseDirective, useExisting: forwardRef(() => IgxTreeGridComponent) },
6768
IgxFilteringService,
6869
IgxForOfSyncService,
69-
IgxForOfScrollSyncService
70+
IgxForOfScrollSyncService,
71+
IgxRowIslandAPIService
7072
]
7173
})
7274
export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridType, OnInit, DoCheck, AfterContentInit {

‎projects/igniteui-angular/src/lib/grids/watch-changes.ts

+24
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,30 @@ export function WatchChanges(): PropertyDecorator {
3131
};
3232
}
3333

34+
export function WatchColumnChanges(): PropertyDecorator {
35+
return (target: any, key: string, propDesc?: PropertyDescriptor) => {
36+
const privateKey = '_' + key.toString();
37+
propDesc = propDesc || {
38+
configurable: true,
39+
enumerable: true,
40+
};
41+
propDesc.get = propDesc.get || (function (this: any) { return this[privateKey]; });
42+
const originalSetter = propDesc.set || (function (this: any, val: any) { this[privateKey] = val; });
43+
44+
propDesc.set = function (this: any, val: any) {
45+
const init = this._init;
46+
const oldValue = this[key];
47+
originalSetter.call(this, val);
48+
if (val !== oldValue || (typeof val === 'object' && val === oldValue)) {
49+
if (this.rowIslandAPI.rowIsland) {
50+
this.rowIslandAPI.rowIsland.updateColumnList();
51+
}
52+
}
53+
};
54+
return propDesc;
55+
};
56+
}
57+
3458
export function notifyChanges(repaint = false) {
3559
return (_: any, key: string, propDesc?: PropertyDescriptor) => {
3660

0 commit comments

Comments
 (0)