State Persistence

• Installation
• How to save/load state on server?

Use persistence plugin to save and restore q-grid state.

Installation

Add angular component inside of q-grid component, after that persistance action should appear in the top toolbar.

@Component({
   selector: 'my-component',
   template: `
      <q-grid>
         <q-grid-persistence></q-grid-persistence>
      </q-grid>
   `
})
export class MyComponent {
}

How to save/load state on server?

Use persistence model to override default behavior.

@Component({
   template: `
      <q-grid [model]="gridModel">
         <q-grid-persistence></q-grid-persistence>
      </q-grid>
   `
})
export class MyComponent implements AfterViewInit {
   gridModel = this.qgrid.model();

   constructor(
      private qgrid: Grid,
      private dataService: MyDataService
   ) {
   }

   ngAfterViewInit() {
     this.gridModel.persistence({
       storage: this.buildStorage()
     });
   }

   buildStorage() {
      return {
         getItem: id =>
            new Promise<any>(resolve => {
               this.dataService
                  .getState(id)
                  .subscribe(resolve);
            }),
         setItem: (id, state) =>
            new Promise(resolve => {
               this.dataService
                  .setState(id, state)
                  .subscribe(resolve);
            })
      };
   }