Skip to content

Commit b54e9fa

Browse files
Svetloslav15Svetloslav15
committed
fix(grid): add sorting for state persistance sample
1 parent 5ea7d5e commit b54e9fa

2 files changed

Lines changed: 41 additions & 23 deletions

File tree

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

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,33 @@
1414
</div>
1515

1616
<div class="grid__wrapper">
17-
<igx-grid [igxPreventDocumentScroll]="true" [igxGridState]="options" [sortStrategy]="customStrategy" #grid [data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false' [allowFiltering]="true">
18-
<igx-column [field]="'Category'" [width]="'120px'"></igx-column>
19-
<igx-column [field]="'Type'" [width]="'150px'" [filterable]='false'></igx-column>
20-
<igx-column [field]="'Open Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency">
17+
<igx-grid [igxPreventDocumentScroll]="true" [igxGridState]="options" #grid
18+
[data]="data | async" [height]="'500px'" width="100%" [autoGenerate]='false' [allowFiltering]="true">
19+
<igx-column [field]="'Category'" [sortable]="true" [width]="'120px'"></igx-column>
20+
<igx-column [field]="'Type'" [sortable]="true" [width]="'150px'" [filterable]='false'></igx-column>
21+
<igx-column [field]="'Open Price'" [sortable]="true" [width]="'120px'" dataType="number"
22+
[formatter]="formatCurrency">
2123
</igx-column>
22-
<igx-column [field]="'Price'" [width]="'120px'" dataType="number" [formatter]="formatCurrency"></igx-column>
23-
<igx-column [field]="'Change'" [width]="'120px'" dataType="number" [headerClasses]="'headerAlignSyle'">
24+
<igx-column [field]="'Price'" [sortable]="true" [width]="'120px'" dataType="number"
25+
[formatter]="formatCurrency"></igx-column>
26+
<igx-column [field]="'Change'" [sortable]="true" [width]="'120px'" dataType="number"
27+
[headerClasses]="'headerAlignSyle'">
2428
<ng-template igxHeader>
2529
<span>Change</span>
2630
</ng-template>
2731

2832
<ng-template igxCell let-val>
2933
<div class="currency-badge-container">
30-
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
31-
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
34+
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward"
35+
class="badge-left"></igx-badge>
36+
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward"
37+
class="error badge-left"></igx-badge>
3238
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}</span>
3339
</div>
3440
</ng-template>
3541
</igx-column>
36-
<igx-column [field]="'Change(%)'" [width]="'130px'" dataType="number" [formatter]="formatNumber">
42+
<igx-column [field]="'Change(%)'" [sortable]="true" [width]="'130px'" dataType="number"
43+
[formatter]="formatNumber">
3744
<ng-template igxHeader>
3845
<span>Change(%)</span>
3946
</ng-template>
@@ -42,24 +49,36 @@
4249
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
4350
</ng-template>
4451
</igx-column>
45-
<igx-column [field]="'Change On Year(%)'" [width]="'150px'" dataType="number" [formatter]="formatNumber">
52+
<igx-column [field]="'Change On Year(%)'" [sortable]="true" [width]="'150px'" dataType="number"
53+
[formatter]="formatNumber">
4654
<ng-template igxCell let-val>
4755
<div class="currency-badge-container">
48-
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward" class="badge-left"></igx-badge>
49-
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward" class="error badge-left"></igx-badge>
56+
<igx-badge *ngIf="val>0" type="success" position="bottom-right" icon="arrow_upward"
57+
class="badge-left"></igx-badge>
58+
<igx-badge *ngIf="val<0" type="error" position="bottom-right" icon="arrow_downward"
59+
class="error badge-left"></igx-badge>
5060
<span class="cellAlignSyle" [class.up]="val>0" [class.down]="val<0">{{ formatNumber(val) }}%</span>
5161
</div>
5262
</ng-template>
5363
</igx-column>
54-
<igx-column [field]="'Buy'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
55-
<igx-column [field]="'Sell'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
56-
<igx-column [field]="'Spread'" [width]="'130px'" dataType="number" [formatter]="formatNumber"></igx-column>
57-
<igx-column [field]="'Volume'" [width]="'130px'" dataType="number" [formatter]="formatNumber"></igx-column>
58-
<igx-column [field]="'High(D)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
59-
<igx-column [field]="'Low(D)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
60-
<igx-column [field]="'High(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
61-
<igx-column [field]="'Low(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
62-
<igx-column [field]="'Start(Y)'" [width]="'130px'" dataType="number" [formatter]="formatCurrency"></igx-column>
64+
<igx-column [field]="'Buy'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatCurrency">
65+
</igx-column>
66+
<igx-column [field]="'Sell'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatCurrency">
67+
</igx-column>
68+
<igx-column [field]="'Spread'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatNumber">
69+
</igx-column>
70+
<igx-column [field]="'Volume'" [sortable]="true" [width]="'130px'" dataType="number" [formatter]="formatNumber">
71+
</igx-column>
72+
<igx-column [field]="'High(D)'" [sortable]="true" [width]="'130px'" dataType="number"
73+
[formatter]="formatCurrency"></igx-column>
74+
<igx-column [field]="'Low(D)'" [sortable]="true" [width]="'130px'" dataType="number"
75+
[formatter]="formatCurrency"></igx-column>
76+
<igx-column [field]="'High(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
77+
[formatter]="formatCurrency"></igx-column>
78+
<igx-column [field]="'Low(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
79+
[formatter]="formatCurrency"></igx-column>
80+
<igx-column [field]="'Start(Y)'" [sortable]="true" [width]="'130px'" dataType="number"
81+
[formatter]="formatCurrency"></igx-column>
6382
</igx-grid>
6483
<br />
65-
</div>
84+
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export class GridStatePersistenceSampleComponent {
1919
public state!: IgxGridStateDirective;
2020

2121
public data: Observable<any[]>;
22-
public customStrategy = NoopSortingStrategy.instance();
2322
public options: IGridStateOptions = {
2423
rowSelection: true,
2524
filtering: true,

0 commit comments

Comments
 (0)