feat(igxGrid): Persist state of pinned rows via igxGridState directive.

Author: MKirova

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

@@ -23,6 +23,7 @@ export interface IGridState {
     cellSelection?: GridSelectionRange[];
     rowSelection?: any[];
     columnSelection?: string[];
+    rowPinning?: any[];
 }
 
 export interface IGridStateOptions {
@@ -35,6 +36,7 @@ export interface IGridStateOptions {
     cellSelection?: boolean;
     rowSelection?: boolean;
     columnSelection?: boolean;
+    rowPinning?: boolean;
 }
 
 export interface IColumnState {
@@ -66,6 +68,7 @@ const SORTING = 'sorting';
 const GROUPBY = 'groupBy';
 const PAGING = 'paging';
 const ROW_SELECTION = 'rowSelection';
+const ROW_PINNING = 'rowPinning';
 const CELL_SELECTION = 'cellSelection';
 const COLUMN_SELECTION = 'columnSelection';
 
@@ -83,7 +86,8 @@ export class IgxGridStateDirective {
         paging: true,
         cellSelection: true,
         rowSelection: true,
-        columnSelection: true
+        columnSelection: true,
+        rowPinning: true
     };
 
     private state: IGridState;
@@ -216,6 +220,10 @@ export class IgxGridStateDirective {
                 this.restoreRowSelection(state as any[]);
                 break;
               }
+              case ROW_PINNING: {
+                this.restoreRowPinning(state as any[]);
+                break;
+              }
               case CELL_SELECTION: {
                 this.restoreCellSelection(state as GridSelectionRange[]);
                 break;
@@ -279,6 +287,10 @@ export class IgxGridStateDirective {
                 Object.assign(state, this.getRowSelection());
                 break;
               }
+              case ROW_PINNING: {
+                Object.assign(state, this.getRowPinning());
+                break;
+              }
               case CELL_SELECTION: {
                 Object.assign(state, this.getCellSelection());
                 break;
@@ -360,6 +372,11 @@ export class IgxGridStateDirective {
         return { rowSelection: selection };
     }
 
+    private getRowPinning(): IGridState {
+        const pinned = this.grid.pinnedRows.map(x => x.rowID);
+        return { rowPinning: pinned };
+    }
+
     private getColumnSelection(): IGridState {
         const selection = this.grid.selectedColumns().map(c => c.field);
         return { columnSelection: selection };
@@ -444,6 +461,10 @@ export class IgxGridStateDirective {
         this.grid.selectRows(state);
     }
 
+    private restoreRowPinning(state: any[]) {
+        state.forEach(rowID => this.grid.pinRow(rowID));
+    }
+
     private restoreColumnSelection(state: string[]) {
         this.grid.selectColumns(state);
     }

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

@@ -5,11 +5,15 @@
     <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' [columnPinning]='true' #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [rowSelectable]="false">
+        <igx-grid [igxGridState]="options" [allowFiltering]='true' [primaryKey]='"ID"' [pinning]="pinningConfig" [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)">

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,23 @@ 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
+      };
+
     @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 +111,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);
+    }
+
 }