Skip to content

Commit 6c0c74a

Browse files
ddinchevaddincheva
authored
Merge branch 'vNext' into ddincheva/summary-vNext
2 parents f8c0ccd + 2c85dac commit 6c0c74a

File tree

6 files changed

+260
-302
lines changed

6 files changed

+260
-302
lines changed

‎live-editing/configs/GridConfigGenerator.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
IgxExpansionPanelModule,
1818
IgxFocusModule,
1919
IgxGridModule,
20+
IgxGridStateDirective,
2021
IgxIconModule,
2122
IgxInputGroupModule,
2223
IgxProgressBarModule,
@@ -191,7 +192,6 @@ import {
191192
import { GridSelectionSampleComponent } from "../../src/app/grid/grid-sample-selection/grid-selection.component";
192193
import { AboutComponent } from "../../src/app/grid/grid-save-state/about.component";
193194
import { GridSaveStateComponent } from "../../src/app/grid/grid-save-state/grid-state.component";
194-
import { IgxGridStateDirective } from "../../src/app/grid/grid-save-state/state.directive";
195195
import { GridSearchSampleComponent } from "../../src/app/grid/grid-search-sample/grid-search-sample.component";
196196
import { SortingSampleComponent } from "../../src/app/grid/grid-sorting-sample/grid-sorting-sample.component";
197197
import { SortingStylingComponent } from "../../src/app/grid/grid-sorting-styling/grid-sorting-styling.component";
@@ -911,14 +911,13 @@ export class GridConfigGenerator implements IConfigGenerator {
911911
component: GridSaveStateComponent,
912912
additionalFiles: [
913913
"/src/app/grid/grid-save-state/localData.ts",
914-
"/src/app/grid/grid-save-state/state.directive.ts",
915914
"/src/app/grid/grid-save-state/about.component.ts",
916915
"/src/app/grid/grid-save-state/about.component.html"
917916
],
918917
appModuleConfig: new AppModuleConfig({
919918
imports: [GridSaveStateComponent, IgxGridModule, IgxTooltipModule,
920-
IgxToastModule, IgxSwitchModule, AboutComponent, Router, RouterModule, IgxGridStateDirective],
921-
ngDeclarations: [GridSaveStateComponent, AboutComponent, IgxGridStateDirective],
919+
IgxToastModule, IgxSwitchModule, AboutComponent, Router, RouterModule],
920+
ngDeclarations: [GridSaveStateComponent, AboutComponent],
922921
ngImports: [IgxGridModule, IgxTooltipModule,
923922
// tslint:disable-next-line:max-line-length
924923
"RouterModule.forRoot([\{component: AboutComponent, path: 'grid-about'},\{component: GridSaveStateComponent, path: 'grid-state'},\{ path: '', redirectTo: '/grid-state', pathMatch: 'full' }])",

‎src/app/grid/grid-save-state/grid-state.component.html

+80-19
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,110 @@
22
<div class="controls-holder">
33
<div class="control-item">
44
<ul>
5-
<li>Navigate away to visit the <a [routerLink]="['../grid-about']"><strong>ABOUT</strong></a> page and then return to see the igxGrid restored its state.</li>
6-
<li>Use the switch buttons to clear currently stored state and stop saving state for the corresponding feature.</li>
7-
<li>Use the <strong>delete</strong> and <strong>reload</strong> buttons to clear the localStorage content and reload the page with clear state.</li>
5+
<li>Leave the page by navigating to the <a [routerLink]="['../grid-about']"><strong>ABOUT</strong></a> page or hitting the Save button, the current grid state will be stored in the localStorage object.</li>
6+
<li>Use the switch buttons to stop saving state for the corresponding feature.</li>
87
</ul>
98
</div>
109
<div class="switches">
10+
<!-- <div class="control-item">
11+
<igx-switch [(ngModel)]="options.rowSelection" (change)="onChange($event, 'rowSelection')">Row Selection</igx-switch>
12+
</div> -->
1113
<div class="control-item">
12-
<igx-switch [(ngModel)]="state.selection" (change)="onChange($event, 'selection')">Row Selection</igx-switch>
14+
<igx-switch [(ngModel)]="options.cellSelection" (change)="onChange($event, 'cellSelection')">Cell Selection</igx-switch>
1315
</div>
1416
<div class="control-item">
15-
<igx-switch [(ngModel)]="state.filtering" (change)="onChange($event, 'filtering')">Filtering</igx-switch>
17+
<igx-switch [(ngModel)]="options.filtering" (change)="onChange($event, 'filtering')">Filtering</igx-switch>
1618
</div>
1719
<div class="control-item">
18-
<igx-switch [(ngModel)]="state.advancedFiltering" (change)="onChange($event, 'advancedFiltering')">Advanced Filtering</igx-switch>
20+
<igx-switch [(ngModel)]="options.advancedFiltering" (change)="onChange($event, 'advancedFiltering')">Advanced Filtering</igx-switch>
1921
</div>
2022
<div class="control-item">
21-
<igx-switch [(ngModel)]="state.paging" (change)="onChange($event, 'paging')">Paging</igx-switch>
23+
<igx-switch [(ngModel)]="options.paging" (change)="onChange($event, 'paging')">Paging</igx-switch>
2224
</div>
2325
<div class="control-item">
24-
<igx-switch [(ngModel)]="state.sorting" (change)="onChange($event, 'sorting')">Sorting</igx-switch>
26+
<igx-switch [(ngModel)]="options.sorting" (change)="onChange($event, 'sorting')">Sorting</igx-switch>
2527
</div>
2628
<div class="control-item">
27-
<igx-switch [(ngModel)]="state.columns" (change)="onChange($event, 'columns')">Columns</igx-switch>
29+
<igx-switch [(ngModel)]="options.groupBy" (change)="onChange($event, 'groupBy')">Grouping</igx-switch>
2830
</div>
2931
<div class="control-item">
30-
<span class="clear-button" (click)="clearStorage(toast)" #target="tooltipTarget" [igxTooltipTarget]="clear"><igx-icon>delete</igx-icon></span>
32+
<igx-switch [(ngModel)]="options.columns" (change)="onChange($event, 'columns')">Columns</igx-switch>
33+
</div>
34+
<div class="control-item">
35+
<igx-switch [(ngModel)]="serialize">Serialize</igx-switch>
36+
</div>
37+
</div>
38+
<div class="switches" style="min-width: inherit">
39+
<div class="control-item">
40+
<button igxButton="raised" (click)="saveGridState()">Save</button>
41+
</div>
42+
<div class="control-item">
43+
<button igxButton="raised" (click)="restoreGridState()">Restore All</button>
44+
</div>
45+
<div class="control-item">
46+
<button igxButton="raised" (click)="restoreColumns()">Columns</button>
47+
</div>
48+
<div class="control-item">
49+
<button igxButton="raised" (click)="restoreFiltering()">Filtering</button>
50+
</div>
51+
<div class="control-item">
52+
<button igxButton="raised" (click)="restoreAdvancedFiltering()">Adv Filtering</button>
53+
</div>
54+
<div class="control-item">
55+
<button igxButton="raised" (click)="restoreSorting()">Sorting</button>
56+
</div>
57+
<div class="control-item">
58+
<button igxButton="raised" (click)="restoreGroupby()">GroupBy</button>
59+
</div>
60+
<!-- <div class="control-item">
61+
<button igxButton="raised" (click)="restoreRowSelection()">Row Selection</button>
62+
</div> -->
63+
<div class="control-item">
64+
<button igxButton="raised" (click)="restoreCellSelection()">Cell Selection</button>
65+
</div>
66+
<div class="control-item">
67+
<button igxButton="raised" (click)="restorePaging()">Paging</button>
68+
</div>
69+
<div class="control-item">
70+
<button igxButton="raised" (click)="resetGridState()">Reset</button>
71+
</div>
72+
<div class="control-item">
73+
<span class="clear-button" (click)="clearStorage()" #target="tooltipTarget" [igxTooltipTarget]="clear"><igx-icon>delete</igx-icon></span>
3174
</div>
3275
<div class="control-item">
3376
<span class="clear-button" (click)="reloadPage()" #target="tooltipTarget" [igxTooltipTarget]="reload"><igx-icon>refresh</igx-icon></span>
3477
</div>
3578
</div>
3679
</div>
3780

38-
<igx-grid [id]="gridId" #grid1 igxState [data]="localData" [primaryKey]="'EmployeeID'" width="950px" height="550px"
39-
[rowEditable]="true" [allowFiltering]="true" [allowAdvancedFiltering]="true" [rowSelectable]="true"
40-
[paging]="true" [showToolbar]="true" [columnPinning]="true" [columnHiding]="true"
41-
[filterMode]="'excelStyleFilter'" [displayDensity]="'cosy'">
42-
<igx-column *ngFor="let c of columns" [sortable]="true" [movable]="true" [filterable]="true"
43-
[field]="c.field" [header]="c.header" [dataType]="c.dataType" [pinned]="c.pinned" [hidden]="c.hidden"></igx-column>
44-
</igx-grid>
81+
<igx-grid [id]="gridId" #grid1 [igxGridState]="options"
82+
width="1150px" height="550px" [autoGenerate]="false"
83+
[data]="localData"
84+
[primaryKey]="'EmployeeID'"
85+
[rowEditable]="false"
86+
[allowFiltering]="true" [allowAdvancedFiltering]="true" [filterMode]="'excelStyleFilter'"
87+
[paging]="true"
88+
[showToolbar]="true"
89+
[columnPinning]="true"
90+
[columnHiding]="true"
91+
[displayDensity]="'cosy'"
92+
[cellSelection]="'multiple'"
93+
[rowSelection]="'none'">
94+
<igx-column *ngFor="let c of columns"
95+
[sortable]="c.sortable"
96+
[movable]="c.movable"
97+
[editable]="true"
98+
[hasSummary]="c.hasSummary"
99+
[filterable]="c.filterable"
100+
[groupable]="c.groupable"
101+
[field]="c.field"
102+
[header]="c.header"
103+
[dataType]="c.dataType"
104+
[pinned]="c.pinned"
105+
[hidden]="c.hidden">
106+
</igx-column>
107+
</igx-grid>
45108

46109
<div #clear="tooltip" igxTooltip>Clear the state from localStorage.</div>
47110
<div #reload="tooltip" igxTooltip>Reload the page.</div>
48-
49-
<igx-toast #toast message="Grid state data has been cleared from localStorage."></igx-toast>
50111
</div>

‎src/app/grid/grid-save-state/grid-state.component.scss

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
justify-content: space-between;
44
align-items: center;
55
flex-wrap: wrap;
6+
width: 100%;
67
}
78

89
.switches {
@@ -16,6 +17,7 @@
1617
}
1718

1819
.control-item {
20+
display: block;
1921
padding: 8px 0px;
2022
> span {
2123
cursor: pointer;
@@ -24,5 +26,5 @@
2426

2527
.grid__wrapper {
2628
margin: 0 16px;
27-
width: 950px;
29+
width: 1150px;
2830
}

0 commit comments

Comments
 (0)