Skip to content

Commit fef77b1

Browse files
ChronosSFChronosSF
authored
Merge pull request #6089 from IgniteUI/vmihalkov/fix-6004-8.2.x
fix(column): Added property decorator for column component to watch for changes in column properties #6004
2 parents 216f339 + b8b09dd commit fef77b1

File tree

6 files changed

+67
-5
lines changed

6 files changed

+67
-5
lines changed

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

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
Output,
1414
EventEmitter
1515
} from '@angular/core';
16+
import { WatchColumnChanges } from './watch-changes';
17+
import { IgxRowIslandAPIService } from './hierarchical-grid/row-island-api.service';
1618
import { DataType } from '../data-operations/data-util';
1719
import { GridBaseAPIService } from './api.service';
1820
import { IgxGridCellComponent } from './cell.component';
@@ -84,6 +86,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
8486
* @memberof IgxColumnComponent
8587
*/
8688
@notifyChanges()
89+
@WatchColumnChanges()
8790
@Input()
8891
public header = '';
8992
/**
@@ -97,6 +100,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
97100
* ```
98101
* @memberof IgxColumnComponent
99102
*/
103+
@WatchColumnChanges()
100104
@Input()
101105
public sortable = false;
102106
/**
@@ -111,6 +115,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
111115
* @memberof IgxColumnComponent
112116
*/
113117
@notifyChanges(true)
118+
@WatchColumnChanges()
114119
@Input()
115120
groupable = false;
116121
/**
@@ -121,6 +126,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
121126
* ```
122127
* @memberof IgxColumnComponent
123128
*/
129+
@WatchColumnChanges()
124130
@Input()
125131
get editable(): boolean {
126132
// Updating the primary key when grid has transactions (incl. row edit)
@@ -163,6 +169,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
163169
* @memberof IgxColumnComponent
164170
*/
165171
@notifyChanges()
172+
@WatchColumnChanges()
166173
@Input()
167174
public filterable = true;
168175
/**
@@ -176,6 +183,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
176183
* ```
177184
* @memberof IgxColumnComponent
178185
*/
186+
@WatchColumnChanges()
179187
@Input()
180188
public resizable = false;
181189
/**
@@ -186,6 +194,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
186194
* @memberof IgxColumnComponent
187195
*/
188196
@notifyChanges(true)
197+
@WatchColumnChanges()
189198
@Input()
190199
get hasSummary() {
191200
return this._hasSummary;
@@ -213,6 +222,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
213222
*@memberof IgxColumnComponent
214223
*/
215224
@notifyChanges(true)
225+
@WatchColumnChanges()
216226
@Input()
217227
get hidden(): boolean {
218228
return this._hidden;
@@ -261,6 +271,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
261271
* @memberof IgxColumnComponent
262272
*/
263273
@notifyChanges()
274+
@WatchColumnChanges()
264275
@Input()
265276
disableHiding = false;
266277
/**
@@ -271,6 +282,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
271282
* @memberof IgxColumnComponent
272283
*/
273284
@notifyChanges()
285+
@WatchColumnChanges()
274286
@Input()
275287
disablePinning = false;
276288
/**
@@ -284,6 +296,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
284296
* ```
285297
* @memberof IgxColumnComponent
286298
*/
299+
@WatchColumnChanges()
287300
@notifyChanges()
288301
@Input()
289302
public movable = false;
@@ -295,6 +308,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
295308
* @memberof IgxColumnComponent
296309
*/
297310
@notifyChanges(true)
311+
@WatchColumnChanges()
298312
@Input()
299313
public get width(): string {
300314
return this.widthSetByUser ? this._width : this.defaultWidth;
@@ -350,6 +364,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
350364
* ```
351365
* @memberof IgxColumnComponent
352366
*/
367+
@WatchColumnChanges()
353368
@Input()
354369
public maxWidth: string;
355370
/**
@@ -364,6 +379,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
364379
* @memberof IgxColumnComponent
365380
*/
366381
@notifyChanges()
382+
@WatchColumnChanges()
367383
@Input()
368384
public set minWidth(value: string) {
369385
const minVal = parseFloat(value);
@@ -385,6 +401,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
385401
* @memberof IgxColumnComponent
386402
*/
387403
@notifyChanges()
404+
@WatchColumnChanges()
388405
@Input()
389406
public headerClasses = '';
390407

@@ -399,6 +416,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
399416
* @memberof IgxColumnComponent
400417
*/
401418
@notifyChanges()
419+
@WatchColumnChanges()
402420
@Input()
403421
public headerGroupClasses = '';
404422
/**
@@ -418,6 +436,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
418436
* @memberof IgxColumnComponent
419437
*/
420438
@notifyChanges()
439+
@WatchColumnChanges()
421440
@Input()
422441
public cellClasses: any;
423442

@@ -439,6 +458,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
439458
* @memberof IgxColumnComponent
440459
*/
441460
@notifyChanges()
461+
@WatchColumnChanges()
442462
@Input()
443463
cellStyles = null;
444464
/**
@@ -472,6 +492,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
472492
* @memberof IgxColumnComponent
473493
*/
474494
@notifyChanges()
495+
@WatchColumnChanges()
475496
@Input()
476497
formatter: (value: any) => any;
477498
/**
@@ -485,6 +506,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
485506
* ```
486507
* @memberof IgxColumnComponent
487508
*/
509+
@WatchColumnChanges()
488510
@Input()
489511
public filteringIgnoreCase = true;
490512
/**
@@ -498,6 +520,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
498520
* ```
499521
* @memberof IgxColumnComponent
500522
*/
523+
@WatchColumnChanges()
501524
@Input()
502525
public sortingIgnoreCase = true;
503526
/**
@@ -520,6 +543,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
520543
* ```
521544
* @memberof IgxColumnComponent
522545
*/
546+
@WatchColumnChanges()
523547
@Input()
524548
public get pinned(): boolean {
525549
return this._pinned;
@@ -578,6 +602,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
578602
* @memberof IgxColumnComponent
579603
*/
580604
@notifyChanges(true)
605+
@WatchColumnChanges()
581606
@Input()
582607
public get summaries(): any {
583608
return this._summaries;
@@ -610,6 +635,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
610635
* @memberof IgxColumnComponent
611636
*/
612637
@notifyChanges()
638+
@WatchColumnChanges()
613639
@Input()
614640
public searchable = true;
615641
/**
@@ -713,6 +739,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
713739
* @memberof IgxColumnComponent
714740
*/
715741
@notifyChanges()
742+
@WatchColumnChanges()
716743
@Input('cellTemplate')
717744
get bodyTemplate(): TemplateRef<any> {
718745
return this._bodyTemplate;
@@ -744,6 +771,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
744771
* @memberof IgxColumnComponent
745772
*/
746773
@notifyChanges()
774+
@WatchColumnChanges()
747775
@Input()
748776
get headerTemplate(): TemplateRef<any> {
749777
return this._headerTemplate;
@@ -776,6 +804,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
776804
* @memberof IgxColumnComponent
777805
*/
778806
@notifyChanges()
807+
@WatchColumnChanges()
779808
@Input('cellEditorTemplate')
780809
get inlineEditorTemplate(): TemplateRef<any> {
781810
return this._inlineEditorTemplate;
@@ -805,6 +834,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
805834
* @memberof IgxColumnComponent
806835
*/
807836
@notifyChanges()
837+
@WatchColumnChanges()
808838
@Input('filterCellTemplate')
809839
get filterCellTemplate(): TemplateRef<any> {
810840
return this._filterCellTemplate;
@@ -1138,7 +1168,8 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
11381168
@ContentChild(IgxFilterCellTemplateDirective, { read: IgxFilterCellTemplateDirective, static: false })
11391169
public filterCellTemplateDirective: IgxFilterCellTemplateDirective;
11401170

1141-
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef) { }
1171+
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef,
1172+
public rowIslandAPI: IgxRowIslandAPIService) { }
11421173

11431174
/**
11441175
* @hidden
@@ -1932,9 +1963,10 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
19321963

19331964
set width(val) { }
19341965

1935-
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef) {
1966+
constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent & IGridDataBindable>, public cdr: ChangeDetectorRef,
1967+
public rowIslandAPI: IgxRowIslandAPIService) {
19361968
// D.P. constructor duplication due to es6 compilation, might be obsolete in the future
1937-
super(gridAPI, cdr);
1969+
super(gridAPI, cdr, rowIslandAPI);
19381970
}
19391971
}
19401972

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { IgxGridSelectionService, IgxGridCRUDService } from '../../core/grid-sel
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

2930
let NEXT_ID = 0;
@@ -63,7 +64,8 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs {
6364
IgxFilteringService,
6465
IgxColumnResizingService,
6566
IgxForOfSyncService,
66-
IgxForOfScrollSyncService
67+
IgxForOfScrollSyncService,
68+
IgxRowIslandAPIService
6769
],
6870
selector: 'igx-grid',
6971
templateUrl: './grid.component.html'

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

Lines changed: 1 addition & 0 deletions
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,6 +234,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseComponent
234234
*/
235235
ngOnInit() {
236236
this.rootGrid = this.hgridAPI.grid;
237+
this.rowIslandAPI.rowIsland = this;
237238
}
238239

239240
/**

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { IgxRowLoadingIndicatorTemplateDirective } from './tree-grid.directives'
3232
import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
3333
import { IgxDragIndicatorIconDirective } from '../row-drag.directive';
3434
import { IgxGridNavigationService } from '../grid-navigation.service';
35+
import { IgxRowIslandAPIService } from '../hierarchical-grid/row-island-api.service';
3536

3637
let NEXT_ID = 0;
3738

@@ -65,7 +66,8 @@ let NEXT_ID = 0;
6566
{ provide: IgxGridBaseComponent, useExisting: forwardRef(() => IgxTreeGridComponent) },
6667
IgxFilteringService,
6768
IgxForOfSyncService,
68-
IgxForOfScrollSyncService
69+
IgxForOfScrollSyncService,
70+
IgxRowIslandAPIService
6971
]
7072
})
7173
export class IgxTreeGridComponent extends IgxGridBaseComponent implements IGridDataBindable, OnInit, DoCheck, AfterContentInit {

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

Lines changed: 24 additions & 0 deletions
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)