Skip to content

Commit 25df434

Browse files
Svetloslav15Svetloslav15
committed
fix(state-persistance): update restoring columns
1 parent 56daa66 commit 25df434

4 files changed

Lines changed: 348 additions & 29 deletions

File tree

‎.history/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component_20230105140626.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { Component, TemplateRef, ViewChild } from '@angular/core';
2+
3+
import { IGridStateOptions, IgxGridStateDirective, IgxGridComponent, NoopSortingStrategy, IgxColumnComponent } from 'igniteui-angular';
4+
import { Observable } from 'rxjs';
5+
import { take } from 'rxjs/operators';
6+
import { FinancialDataService } from '../../services/financial.service';
7+
8+
@Component({
9+
providers: [FinancialDataService],
10+
selector: 'app-grid-state-persistance-sample',
11+
styleUrls: ['./grid-state-persistance-sample.component.scss'],
12+
templateUrl: 'grid-state-persistance-sample.component.html'
13+
})
14+
15+
export class GridStatePersistenceSampleComponent {
16+
@ViewChild('grid', { static: true })
17+
public grid: IgxGridComponent;
18+
@ViewChild(IgxGridStateDirective, { static: true })
19+
public state!: IgxGridStateDirective;
20+
public data: Observable<any[]>;
21+
public customStrategy = NoopSortingStrategy.instance();
22+
public options: IGridStateOptions = {
23+
rowSelection: true,
24+
filtering: true,
25+
sorting: true,
26+
columnSelection: true
27+
};
28+
29+
constructor(private localService: FinancialDataService) {
30+
this.localService.getData(100000);
31+
this.data = this.localService.records;
32+
}
33+
34+
public formatNumber(value: number) {
35+
return value.toFixed(2);
36+
}
37+
38+
public formatCurrency(value: number) {
39+
return '$' + value.toFixed(2);
40+
}
41+
42+
public saveState() {
43+
const state = this.state.getState() as string;
44+
window.sessionStorage.setItem('grid-state', state);
45+
}
46+
47+
public restoreState() {
48+
const state = window.sessionStorage.getItem('grid-state');
49+
this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
50+
parsedState.sorting.forEach(x => x.strategy = this.customStrategy);
51+
});
52+
this.state.setState(state);
53+
}
54+
55+
public clearStorage() {
56+
window.sessionStorage.removeItem('grid-state');
57+
}
58+
59+
@ViewChild('price', { static: true }) public priceTemplate: TemplateRef<any>;
60+
@ViewChild('change', { static: true }) public changeTemplate: TemplateRef<any>;
61+
@ViewChild('buy', { static: true }) public buyTemplate: TemplateRef<any>;
62+
@ViewChild('sell', { static: true }) public sellTemplate: TemplateRef<any>;
63+
@ViewChild('spread', { static: true }) public spreadTemplate: TemplateRef<any>;
64+
@ViewChild('volume', { static: true }) public volumeTemplate: TemplateRef<any>;
65+
@ViewChild('highD', { static: true }) public highDTemplate: TemplateRef<any>;
66+
@ViewChild('lowD', { static: true }) public lowDTemplate: TemplateRef<any>;
67+
@ViewChild('highY', { static: true }) public highYTemplate: TemplateRef<any>;
68+
@ViewChild('lowY', { static: true }) public lowYTemplate: TemplateRef<any>;
69+
@ViewChild('startY', { static: true }) public startYTemplate: TemplateRef<any>;
70+
@ViewChild('changeOnYear', { static: true }) public changeOnYearTemplate: TemplateRef<any>;
71+
@ViewChild('changePercentage', { static: true }) public changePercentageTemplate: TemplateRef<any>;
72+
73+
public onColumnInit(column: IgxColumnComponent) {
74+
if (column.field === 'Price') {
75+
column.bodyTemplate = this.priceTemplate;
76+
}
77+
else if (column.field === 'Buy') {
78+
column.bodyTemplate = this.buyTemplate;
79+
}
80+
else if (column.field === 'Sell') {
81+
column.bodyTemplate = this.sellTemplate;
82+
}
83+
else if (column.field === 'Spread') {
84+
column.bodyTemplate = this.spreadTemplate;
85+
}
86+
else if (column.field === 'Volume') {
87+
column.bodyTemplate = this.volumeTemplate;
88+
}
89+
else if (column.field === 'High(D)') {
90+
column.bodyTemplate = this.highDTemplate;
91+
}
92+
else if (column.field === 'Low(D)') {
93+
column.bodyTemplate = this.lowDTemplate;
94+
}
95+
else if (column.field === 'High(Y)') {
96+
column.bodyTemplate = this.highYTemplate;
97+
}
98+
else if (column.field === 'Low(Y)') {
99+
column.bodyTemplate = this.lowYTemplate;
100+
}
101+
else if (column.field === 'Start(Y)') {
102+
column.bodyTemplate = this.startYTemplate;
103+
}
104+
else if (column.field === 'Change On Year(%)') {
105+
column.bodyTemplate = this.changeOnYearTemplate;
106+
}
107+
else if (column.field === 'Change(%)') {
108+
column.bodyTemplate = this.changeTemplate;
109+
}
110+
else if (column.field === 'Change') {
111+
column.bodyTemplate = this.changePercentageTemplate;
112+
}
113+
}
114+
115+
}

‎.history/src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component_20230105140845.ts‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { Component, TemplateRef, ViewChild } from '@angular/core';
2+
3+
import { IGridStateOptions, IgxGridStateDirective, IgxGridComponent, NoopSortingStrategy, IgxColumnComponent } from 'igniteui-angular';
4+
import { Observable } from 'rxjs';
5+
import { take } from 'rxjs/operators';
6+
import { FinancialDataService } from '../../services/financial.service';
7+
8+
@Component({
9+
providers: [FinancialDataService],
10+
selector: 'app-grid-state-persistance-sample',
11+
styleUrls: ['./grid-state-persistance-sample.component.scss'],
12+
templateUrl: 'grid-state-persistance-sample.component.html'
13+
})
14+
15+
export class GridStatePersistenceSampleComponent {
16+
@ViewChild('grid', { static: true })
17+
public grid: IgxGridComponent;
18+
@ViewChild(IgxGridStateDirective, { static: true })
19+
public state!: IgxGridStateDirective;
20+
21+
@ViewChild('price', { static: true }) public priceTemplate: TemplateRef<any>;
22+
@ViewChild('change', { static: true }) public changeTemplate: TemplateRef<any>;
23+
@ViewChild('buy', { static: true }) public buyTemplate: TemplateRef<any>;
24+
@ViewChild('sell', { static: true }) public sellTemplate: TemplateRef<any>;
25+
@ViewChild('spread', { static: true }) public spreadTemplate: TemplateRef<any>;
26+
@ViewChild('volume', { static: true }) public volumeTemplate: TemplateRef<any>;
27+
@ViewChild('highD', { static: true }) public highDTemplate: TemplateRef<any>;
28+
@ViewChild('lowD', { static: true }) public lowDTemplate: TemplateRef<any>;
29+
@ViewChild('highY', { static: true }) public highYTemplate: TemplateRef<any>;
30+
@ViewChild('lowY', { static: true }) public lowYTemplate: TemplateRef<any>;
31+
@ViewChild('startY', { static: true }) public startYTemplate: TemplateRef<any>;
32+
@ViewChild('changeOnYear', { static: true }) public changeOnYearTemplate: TemplateRef<any>;
33+
@ViewChild('changePercentage', { static: true }) public changePercentageTemplate: TemplateRef<any>;
34+
35+
public data: Observable<any[]>;
36+
public customStrategy = NoopSortingStrategy.instance();
37+
public options: IGridStateOptions = {
38+
rowSelection: true,
39+
filtering: true,
40+
sorting: true,
41+
columnSelection: true
42+
};
43+
44+
constructor(private localService: FinancialDataService) {
45+
this.localService.getData(100000);
46+
this.data = this.localService.records;
47+
}
48+
49+
public formatNumber(value: number) {
50+
return value.toFixed(2);
51+
}
52+
53+
public formatCurrency(value: number) {
54+
return '$' + value.toFixed(2);
55+
}
56+
57+
public saveState() {
58+
const state = this.state.getState() as string;
59+
window.sessionStorage.setItem('grid-state', state);
60+
}
61+
62+
public restoreState() {
63+
const state = window.sessionStorage.getItem('grid-state');
64+
this.state.stateParsed.pipe(take(1)).subscribe(parsedState => {
65+
parsedState.sorting.forEach(x => x.strategy = this.customStrategy);
66+
});
67+
this.state.setState(state);
68+
}
69+
70+
public clearStorage() {
71+
window.sessionStorage.removeItem('grid-state');
72+
}
73+
74+
public onColumnInit(column: IgxColumnComponent) {
75+
if (column.field === 'Price') {
76+
column.bodyTemplate = this.priceTemplate;
77+
}
78+
else if (column.field === 'Buy') {
79+
column.bodyTemplate = this.buyTemplate;
80+
}
81+
else if (column.field === 'Sell') {
82+
column.bodyTemplate = this.sellTemplate;
83+
}
84+
else if (column.field === 'Spread') {
85+
column.bodyTemplate = this.spreadTemplate;
86+
}
87+
else if (column.field === 'Volume') {
88+
column.bodyTemplate = this.volumeTemplate;
89+
}
90+
else if (column.field === 'High(D)') {
91+
column.bodyTemplate = this.highDTemplate;
92+
}
93+
else if (column.field === 'Low(D)') {
94+
column.bodyTemplate = this.lowDTemplate;
95+
}
96+
else if (column.field === 'High(Y)') {
97+
column.bodyTemplate = this.highYTemplate;
98+
}
99+
else if (column.field === 'Low(Y)') {
100+
column.bodyTemplate = this.lowYTemplate;
101+
}
102+
else if (column.field === 'Start(Y)') {
103+
column.bodyTemplate = this.startYTemplate;
104+
}
105+
else if (column.field === 'Change On Year(%)') {
106+
column.bodyTemplate = this.changeOnYearTemplate;
107+
}
108+
else if (column.field === 'Change(%)') {
109+
column.bodyTemplate = this.changeTemplate;
110+
}
111+
else if (column.field === 'Change') {
112+
column.bodyTemplate = this.changePercentageTemplate;
113+
}
114+
}
115+
116+
}

‎src/app/grid/grid-state-persistence-sample/grid-state-persistance-sample.component.html‎

Lines changed: 56 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,31 @@
1212
<span>Clear</span>
1313
</button>
1414

15-
<button igxButton="raised" (click)="grid.sortStrategy = customStrategy">
15+
<button igxButton="raised" (click)="grid.sortStrategy = customStrategy">
1616
<igx-icon class="btn-icon">Set Strategy</igx-icon>
1717
<span>Set NooP custom Sort Strategy</span>
1818
</button>
1919
</div>
2020

2121
<div class="grid__wrapper">
22-
<igx-grid [igxPreventDocumentScroll]="true" [igxGridState]="options" #grid
23-
[data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false' [allowFiltering]="true">
22+
<igx-grid [igxPreventDocumentScroll]="true" [igxGridState]="options" #grid [data]="data | async" [height]="'500px'"
23+
width="100%" [autoGenerate]='false' [allowFiltering]="true" (columnInit)="onColumnInit($event)">
2424
<igx-column [field]="'Category'" [sortable]="true" [width]="'120px'"></igx-column>
2525
<igx-column [field]="'Type'" [sortable]="true" [width]="'150px'" [filterable]='false'></igx-column>
26-
<igx-column [field]="'Open Price'" [sortable]="true" [width]="'120px'" dataType="number"
27-
[formatter]="formatCurrency">
26+
<igx-column [field]="'Open Price'" [sortable]="true" [width]="'120px'" dataType="number">
27+
</igx-column>
28+
<igx-column [field]="'Price'" [sortable]="true" [width]="'120px'" dataType="number">
29+
<ng-template igxCell let-column let-val #price>
30+
{{formatCurrency(val)}}
31+
</ng-template>
2832
</igx-column>
29-
<igx-column [field]="'Price'" [sortable]="true" [width]="'120px'" dataType="number"
30-
[formatter]="formatCurrency"></igx-column>
3133
<igx-column [field]="'Change'" [sortable]="true" [width]="'120px'" dataType="number"
3234
[headerClasses]="'headerAlignSyle'">
3335
<ng-template igxHeader>
3436
<span>Change</span>
3537
</ng-template>
3638

37-
<ng-template igxCell let-val>
39+
<ng-template igxCell let-val #change>
3840
<div class="currency-badge-container">
3941
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward"
4042
class="badge-left"></igx-badge>
@@ -44,8 +46,10 @@
4446
</div>
4547
</ng-template>
4648
</igx-column>
47-
<igx-column [field]="'Change(%)'" [sortable]="true" [width]="'130px'" dataType="number"
48-
[formatter]="formatNumber">
49+
<igx-column [field]="'Change(%)'" [sortable]="true" [width]="'130px'" dataType="number">
50+
<ng-template igxCell let-column let-val #changePercentage>
51+
{{formatNumber(val)}}
52+
</ng-template>
4953
<ng-template igxHeader>
5054
<span>Change(%)</span>
5155
</ng-template>
@@ -54,9 +58,8 @@
5458
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
5559
</ng-template>
5660
</igx-column>
57-
<igx-column [field]="'Change On Year(%)'" [sortable]="true" [width]="'150px'" dataType="number"
58-
[formatter]="formatNumber">
59-
<ng-template igxCell let-val>
61+
<igx-column [field]="'Change On Year(%)'" [sortable]="true" [width]="'150px'" dataType="number">
62+
<ng-template igxCell let-val #changeOnYear>
6063
<div class="currency-badge-container">
6164
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward"
6265
class="badge-left"></igx-badge>
@@ -66,24 +69,51 @@
6669
</div>
6770
</ng-template>
6871
</igx-column>
69-
<igx-column [field]="'Buy'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatCurrency">
72+
<igx-column [field]="'Buy'" [sortable]="true" [width]="'130px'" dataType="number">
73+
<ng-template igxCell let-column let-val #buy>
74+
{{formatCurrency(val)}}
75+
</ng-template>
7076
</igx-column>
71-
<igx-column [field]="'Sell'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatCurrency">
77+
<igx-column [field]="'Sell'" [sortable]="true" [width]="'130px'" dataType="number">
78+
<ng-template igxCell let-column let-val #sell>
79+
{{formatCurrency(val)}}
80+
</ng-template>
7281
</igx-column>
73-
<igx-column [field]="'Spread'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatNumber">
82+
<igx-column [field]="'Spread'" [sortable]="true" [width]="'130px'" dataType="number">
83+
<ng-template igxCell let-column let-val #spread>
84+
{{formatNumber(val)}}
85+
</ng-template>
7486
</igx-column>
75-
<igx-column [field]="'Volume'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatNumber">
87+
<igx-column [field]="'Volume'" [sortable]="true" [width]="'130px'" dataType="number">
88+
<ng-template igxCell let-column let-val #volume>
89+
{{formatNumber(val)}}
90+
</ng-template>
7691
</igx-column>
7792
<igx-column [field]="'High(D)'" [sortable]="true" [width]="'130px'" dataType="number"
78-
[formatter]="formatCurrency"></igx-column>
79-
<igx-column [field]="'Low(D)'" [sortable]="true" [width]="'130px'" dataType="number"
80-
[formatter]="formatCurrency"></igx-column>
81-
<igx-column [field]="'High(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
82-
[formatter]="formatCurrency"></igx-column>
83-
<igx-column [field]="'Low(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
84-
[formatter]="formatCurrency"></igx-column>
85-
<igx-column [field]="'Start(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
86-
[formatter]="formatCurrency"></igx-column>
93+
[formatter]="formatCurrency">
94+
<ng-template igxCell let-column let-val #highD>
95+
{{formatCurrency(val)}}
96+
</ng-template></igx-column>
97+
<igx-column [field]="'Low(D)'" [sortable]="true" [width]="'130px'" dataType="number">
98+
<ng-template igxCell let-column let-val #lowD>
99+
{{formatCurrency(val)}}
100+
</ng-template>
101+
</igx-column>
102+
<igx-column [field]="'High(Y)'" [sortable]="true" [width]="'130px'" dataType="number">
103+
<ng-template igxCell let-column let-val #highY>
104+
{{formatCurrency(val)}}
105+
</ng-template>
106+
</igx-column>
107+
<igx-column [field]="'Low(Y)'" [sortable]="true" [width]="'130px'" dataType="number">
108+
<ng-template igxCell let-column let-val #lowY>
109+
{{formatCurrency(val)}}
110+
</ng-template>
111+
</igx-column>
112+
<igx-column [field]="'Start(Y)'" [sortable]="true" [width]="'130px'" dataType="number">
113+
<ng-template igxCell let-column let-val #startY>
114+
{{formatCurrency(val)}}
115+
</ng-template>
116+
</igx-column>
87117
</igx-grid>
88118
<br />
89119
</div>

0 commit comments

Comments
 (0)