Merge pull request #6968 from IgniteUI/mkirova/row-pinning-state-persist

Adding row pinning persistence via igxGridState directive.

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -72,7 +72,7 @@ describe('IgxGridState - input properties #grid', () => {
 
     it('getState should return corect JSON string', () => {
         // tslint:disable-next-line:max-line-length
-        const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[]}';
+        const initialGridState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":true,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":true,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true}],"filtering":{"filteringOperands":[],"operator":0},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"paging":{"index":0,"recordsPerPage":15,"metadata":{"countPages":1,"countRecords":10,"error":0}},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[]}';
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();
 
@@ -392,6 +392,30 @@ describe('IgxGridState - input properties #grid', () => {
         expect(gridState).toBe(rowSelectionState);
     });
 
+    it('setState should correctly restore grid row pinning state from object', () => {
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+        const grid  = fix.componentInstance.grid;
+        grid.primaryKey = 'ProductID';
+        fix.detectChanges();
+        const state = fix.componentInstance.state;
+        const rowPinState = '{"rowPinning":[1,3]}';
+        const initialState = '{"rowPinning":[]}';
+        const rowPinStateObject = JSON.parse(rowPinState);
+
+        let gridState = state.getState(true, 'rowPinning');
+        expect(gridState).toBe(initialState);
+
+        state.setState(rowPinStateObject);
+        fix.detectChanges();
+
+        expect(grid.pinnedRows.length).toBe(2);
+        expect(grid.pinnedRows[0].rowID).toBe(1);
+        expect(grid.pinnedRows[1].rowID).toBe(3);
+        gridState = state.getState(true, 'rowPinning');
+        expect(gridState).toBe(rowPinState);
+    });
+
     it('setState should correctly restore grid cell selection state from string', () => {
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();

projects/igniteui-angular/src/lib/grids/state.directive.ts

@@ -12,6 +12,7 @@ import { GridSelectionRange } from './selection/selection.service';
 import { IGroupByExpandState } from '../data-operations/groupby-expand-state.interface';
 import { IGroupingState } from '../data-operations/groupby-state.interface';
 import { IgxGridComponent } from './grid/grid.component';
+import { IPinningConfig } from './common/grid.interface';
 
 export interface IGridState {
     columns?: IColumnState[];
@@ -23,6 +24,8 @@ export interface IGridState {
     cellSelection?: GridSelectionRange[];
     rowSelection?: any[];
     columnSelection?: string[];
+    rowPinning?: any[];
+    pinningConfig?: IPinningConfig;
 }
 
 export interface IGridStateOptions {
@@ -35,6 +38,8 @@ export interface IGridStateOptions {
     cellSelection?: boolean;
     rowSelection?: boolean;
     columnSelection?: boolean;
+    rowPinning?: boolean;
+    pinningConfig?: boolean;
 }
 
 export interface IColumnState {
@@ -66,6 +71,8 @@ const SORTING = 'sorting';
 const GROUPBY = 'groupBy';
 const PAGING = 'paging';
 const ROW_SELECTION = 'rowSelection';
+const ROW_PINNING = 'rowPinning';
+const PINNING_CONFIG = 'pinningConfig';
 const CELL_SELECTION = 'cellSelection';
 const COLUMN_SELECTION = 'columnSelection';
 
@@ -83,7 +90,8 @@ export class IgxGridStateDirective {
         paging: true,
         cellSelection: true,
         rowSelection: true,
-        columnSelection: true
+        columnSelection: true,
+        rowPinning: true
     };
 
     private state: IGridState;
@@ -216,6 +224,14 @@ export class IgxGridStateDirective {
                 this.restoreRowSelection(state as any[]);
                 break;
               }
+              case ROW_PINNING: {
+                this.restoreRowPinning(state as any[]);
+                break;
+              }
+              case PINNING_CONFIG: {
+                this.restorePinningConfig(state as IPinningConfig);
+                break;
+              }
               case CELL_SELECTION: {
                 this.restoreCellSelection(state as GridSelectionRange[]);
                 break;
@@ -279,6 +295,14 @@ export class IgxGridStateDirective {
                 Object.assign(state, this.getRowSelection());
                 break;
               }
+              case ROW_PINNING: {
+                Object.assign(state, this.getRowPinning());
+                break;
+              }
+              case PINNING_CONFIG: {
+                Object.assign(state, this.getPinningConfig());
+                break;
+              }
               case CELL_SELECTION: {
                 Object.assign(state, this.getCellSelection());
                 break;
@@ -360,6 +384,15 @@ export class IgxGridStateDirective {
         return { rowSelection: selection };
     }
 
+    private getRowPinning(): IGridState {
+        const pinned = this.grid.pinnedRows.map(x => x.rowID);
+        return { rowPinning: pinned };
+    }
+
+    private getPinningConfig(): IGridState {
+        return { pinningConfig: this.grid.pinning };
+    }
+
     private getColumnSelection(): IGridState {
         const selection = this.grid.selectedColumns().map(c => c.field);
         return { columnSelection: selection };
@@ -444,6 +477,14 @@ export class IgxGridStateDirective {
         this.grid.selectRows(state);
     }
 
+    private restoreRowPinning(state: any[]) {
+        state.forEach(rowID => this.grid.pinRow(rowID));
+    }
+
+    private restorePinningConfig(state: IPinningConfig) {
+       this.grid.pinning = state;
+    }
+
     private restoreColumnSelection(state: string[]) {
         this.grid.selectColumns(state);
     }

src/app/grid-row-pinning/grid-row-pinning.sample.html

@@ -5,27 +5,34 @@
     <button (click)="grid1.addRow({'ID': 'TEST', 'CompanyName': 'Test'})">Add Row</button>
     <div class="sample-content">
         <div class="sample-column">
+            <div class="sample-buttons">
+                <button igxButton="raised" (click)="saveGridState()">Save state</button>
+                <button igxButton="raised" (click)="restoreGridState()">Restore state</button>
+            </div>
             <div class="sample-switches">
                 <igx-switch (change)='onRowChange()' style="padding-left: 10px"> Bottom Row Pinning toggle</igx-switch>
                 <igx-switch (change)='onChange()' style="padding-left: 10px"> Right Column Pinning toggle</igx-switch>
             </div>
-        <igx-grid [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [showToolbar]='true' [columnHiding]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
-            <igx-column width='70px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
-                        {{cell.row.pinned ? 'lock' : 'lock_open'}}
-                    </igx-icon>
-                </ng-template>
-            </igx-column>
-            <igx-column width='100px' [filterable]='false'>
-                <ng-template igxCell let-cell="cell" let-val>
-                    <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
-                </ng-template>
-            </igx-column>
-            <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field" [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable'
-                [hidden]='c.hidden' [editable]='true'>
-            </igx-column>
-        </igx-grid>
+            <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig"
+                [columnHiding]='true' [showToolbar]='true' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'"
+                [height]="'500px'" [rowSelectable]="false">
+                <igx-column width='70px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <igx-icon class="pin-icon" (mousedown)="togglePining(cell.row, $event)">
+                            {{cell.row.pinned ? 'lock' : 'lock_open'}}
+                        </igx-icon>
+                    </ng-template>
+                </igx-column>
+                <igx-column width='100px' [filterable]='false'>
+                    <ng-template igxCell let-cell="cell" let-val>
+                        <button (click)="grid1.deleteRow(cell.row.rowID)">Delete</button>
+                    </ng-template>
+                </igx-column>
+                <igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
+                    [width]="c.width" [pinned]='c.pinned' [groupable]='c.groupable' [hidden]='c.hidden'
+                    [editable]='true'>
+                </igx-column>
+            </igx-grid>
         </div>
     </div>
-</div>
+</div>

src/app/grid-row-pinning/grid-row-pinning.sample.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction } from 'igniteui-angular';
+import { IgxGridComponent, ColumnPinningPosition, RowPinningPosition, IgxGridRowComponent, IgxTransactionService, IgxGridTransaction, IgxGridStateDirective } from 'igniteui-angular';
 import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/grid.interface';
 
 @Component({
@@ -12,9 +12,24 @@ import { IPinningConfig } from 'projects/igniteui-angular/src/lib/grids/common/g
 export class GridRowPinningSampleComponent implements OnInit {
     public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.Start };
 
+    public options = {
+        cellSelection: true,
+        rowSelection: true,
+        filtering: true,
+        advancedFiltering: true,
+        paging: true,
+        sorting: true,
+        groupBy: true,
+        columns: false,
+        rowPinning: true,
+        pinningConfig: true
+      };
+
     @ViewChild('grid1', { static: true })
     grid1: IgxGridComponent;
 
+    @ViewChild(IgxGridStateDirective, { static: true }) public state: IgxGridStateDirective;
+
     onRowChange() {
         if (this.pinningConfig.rows === RowPinningPosition.Bottom) {
             this.pinningConfig = { columns: this.pinningConfig.columns, rows: RowPinningPosition.Top };
@@ -97,4 +112,14 @@ export class GridRowPinningSampleComponent implements OnInit {
         }
     }
 
+    public saveGridState() {
+        const state = this.state.getState() as string;
+        window.localStorage.setItem("grid1-state", state);
+    }
+  
+    public restoreGridState() {
+        const state = window.localStorage.getItem("grid1-state");
+        this.state.setState(state);
+    }
+
 }