11import { Component , OnInit , ViewChild , AfterViewInit } from '@angular/core' ;
22import { IgxGridComponent , FilteringExpressionsTree , FilteringLogic ,
3- IPagingState , IGroupingExpression , ISortingExpression } from 'igniteui-angular' ;
3+ IPagingState , IGroupingExpression , ISortingExpression , IgxNumberSummaryOperand , IgxSummaryResult ,
4+ IgxGridStateDirective , IGridState , IColumnState } from 'igniteui-angular' ;
45import { employeesData } from './localData' ;
56import { take } from 'rxjs/operators' ;
67import { NavigationStart , Router } from '@angular/router' ;
7- import { IgxGridStateDirective , IGridState } from 'projects/igniteui-angular/src/lib/grids/state.directive' ;
8-
9- interface IColumnState {
10- field : string ;
11- header : string ;
12- width ?: string ;
13- groupable ?: boolean ;
14- dataType ?: string ;
15- pinned ?: boolean ;
16- sortable ?: boolean ;
17- filterable ?: boolean ;
18- movable ?: true ;
19- hidden ?: boolean ;
8+
9+ class MySummary extends IgxNumberSummaryOperand {
10+
11+ constructor ( ) {
12+ super ( ) ;
13+ }
14+
15+ operate ( data ?: any [ ] ) : IgxSummaryResult [ ] {
16+ const result = super . operate ( data ) ;
17+ result . push ( {
18+ key : 'test' ,
19+ label : 'Test' ,
20+ summaryResult : data . filter ( rec => rec > 10 && rec < 30 ) . length
21+ } ) ;
22+ return result ;
23+ }
2024}
2125
2226@Component ( {
@@ -40,20 +44,20 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
4044 advancedFiltering : true ,
4145 paging : true ,
4246 sorting : true ,
43- groupby : true ,
47+ groupBy : true ,
4448 columns : true
4549 } ;
4650
4751 @ViewChild ( IgxGridStateDirective , { static : true } ) public state : IgxGridStateDirective ;
4852 @ViewChild ( IgxGridComponent , { static : true } ) public grid : IgxGridComponent ;
4953
50- public initialColumns : IColumnState [ ] = [
54+ public initialColumns : any [ ] = [
5155 // tslint:disable:max-line-length
52- { field : 'FirstName' , header : 'First Name' , width : '150px' , dataType : 'string' , pinned : true , movable : true , sortable : true , filterable : true } ,
53- { field : 'LastName' , header : 'Last Name' , width : '150px' , dataType : 'string' , pinned : true , movable : true , sortable : true , filterable : true } ,
54- { field : 'Country' , header : 'Country' , width : '140px' , dataType : 'string' , groupable : true , movable : true , sortable : true , filterable : true } ,
55- { field : 'Age' , header : 'Age' , width : '110px' , dataType : 'number' , movable : true , sortable : true , filterable : true } ,
56- { field : 'RegistererDate' , header : 'Registerer Date' , width : '180px' , dataType : 'date' , movable : true , sortable : true , filterable : true } ,
56+ { field : 'FirstName' , header : 'First Name' , width : '150px' , dataType : 'string' , pinned : true , movable : true , sortable : true , filterable : true , summaries : MySummary } ,
57+ { field : 'LastName' , header : 'Last Name' , width : '150px' , dataType : 'string' , pinned : true , movable : true , sortable : true , filterable : true } ,
58+ { field : 'Country' , header : 'Country' , width : '140px' , dataType : 'string' , groupable : true , movable : true , sortable : true , filterable : true , resizable : true } ,
59+ { field : 'Age' , header : 'Age' , width : '110px' , dataType : 'number' , movable : true , sortable : true , filterable : true , hasSummary : true , summaries : MySummary , resizable : true } ,
60+ { field : 'RegistererDate' , header : 'Registerer Date' , width : '180px' , dataType : 'date' , movable : true , sortable : true , filterable : true , resizable : true } ,
5761 { field : 'IsActive' , header : 'Is Active' , width : '140px' , dataType : 'boolean' , groupable : true , movable : true , sortable : true , filterable : true }
5862 // tslint:enable:max-line-length
5963 ] ;
@@ -121,13 +125,13 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
121125
122126 public getColumnsState ( ) : any {
123127 let state = window . localStorage . getItem ( this . stateKey ) ;
124- state = JSON . parse ( state ) [ ' columns' ] ;
128+ state = state ? JSON . parse ( state ) . columns : null ;
125129 return state ;
126130 }
127131
128132 public restoreFiltering ( ) {
129133 const state = window . localStorage . getItem ( this . stateKey ) ;
130- const filteringState : FilteringExpressionsTree = JSON . parse ( state ) . filtering ;
134+ const filteringState : FilteringExpressionsTree = state ? JSON . parse ( state ) . filtering : null ;
131135 if ( filteringState ) {
132136 const gridFilteringState : IGridState = { filtering : filteringState } ;
133137 this . state . setState ( gridFilteringState ) ;
@@ -136,7 +140,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
136140
137141 public restoreAdvancedFiltering ( ) {
138142 const state = window . localStorage . getItem ( this . stateKey ) ;
139- const advFilteringState : FilteringExpressionsTree = JSON . parse ( state ) . advancedFiltering ;
143+ const advFilteringState : FilteringExpressionsTree = state ? JSON . parse ( state ) . advancedFiltering : null ;
140144 if ( advFilteringState ) {
141145 const gridAdvancedFilteringState : IGridState = { advancedFiltering : advFilteringState } ;
142146 this . state . setState ( gridAdvancedFilteringState ) ;
@@ -145,34 +149,34 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
145149
146150 public restoreSorting ( ) {
147151 const state = window . localStorage . getItem ( this . stateKey ) ;
148- const sortingState : ISortingExpression [ ] = JSON . parse ( state ) . sorting ;
149- if ( state ) {
152+ const sortingState : ISortingExpression [ ] = state ? JSON . parse ( state ) . sorting : null ;
153+ if ( sortingState ) {
150154 const gridSortingState : IGridState = { sorting : sortingState } ;
151155 this . state . setState ( gridSortingState ) ;
152156 }
153157 }
154158
155159 public restoreGroupby ( ) {
156160 const state = window . localStorage . getItem ( this . stateKey ) ;
157- const groupByState : IGroupingExpression [ ] = JSON . parse ( state ) . groupby ;
158- if ( state ) {
161+ const groupByState : IGroupingExpression [ ] = state ? JSON . parse ( state ) . groupBy : null ;
162+ if ( groupByState ) {
159163 const gridGroupiByState : IGridState = { groupBy : groupByState } ;
160164 this . state . setState ( gridGroupiByState ) ;
161165 }
162166 }
163167
164168 public restoreRowSelection ( ) {
165169 const state = window . localStorage . getItem ( this . stateKey ) ;
166- const rowSelectionState = JSON . parse ( state ) . rowSelection ;
167- if ( state ) {
170+ const rowSelectionState = state ? JSON . parse ( state ) . rowSelection : null ;
171+ if ( rowSelectionState ) {
168172 const gridRowSelectionState : IGridState = { rowSelection : rowSelectionState } ;
169173 this . state . setState ( gridRowSelectionState ) ;
170174 }
171175 }
172176
173177 public restoreCellSelection ( ) {
174178 const state = window . localStorage . getItem ( this . stateKey ) ;
175- const cellSelectionState = JSON . parse ( state ) . cellSelection ;
179+ const cellSelectionState = state ? JSON . parse ( state ) . cellSelection : null ;
176180 if ( state ) {
177181 const gridCellSelectionState : IGridState = { cellSelection : cellSelectionState } ;
178182 this . state . setState ( gridCellSelectionState ) ;
@@ -181,7 +185,7 @@ export class GridSaveStateComponent implements OnInit, AfterViewInit {
181185
182186 public restorePaging ( ) {
183187 const state = window . localStorage . getItem ( this . stateKey ) ;
184- const pagingState : IPagingState = JSON . parse ( state ) . paging ;
188+ const pagingState : IPagingState = state ? JSON . parse ( state ) . paging : null ;
185189 if ( state ) {
186190 const gridPagingState : IGridState = { paging : pagingState } ;
187191 this . state . setState ( gridPagingState ) ;
0 commit comments