feat(example): add programmatically Pagination change sample

ghiscoding · Oct 4, 2019 · a150807 · a150807
1 parent 971ab85
commit a150807
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 0 deletions.
diff --git a/src/app/examples/grid-graphql.component.html b/src/app/examples/grid-graphql.component.html
@@ -26,6 +26,15 @@ <h2>{{title}}</h2>
         <b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd HH:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
         | {{metrics.totalItemCount}} items
       </span>
+      <div class="row col-md-12">
+        <label>Programmatically go to first/last page:</label>
+        <button class="btn btn-default btn-xs" (click)="goToFirstPage()">
+          <i class="fa fa-caret-left fa-lg"></i>
+        </button>
+        <button class="btn btn-default btn-xs" (click)="goToLastPage()">
+          <i class="fa fa-caret-right fa-lg"></i>
+        </button>
+      </div>
     </div>
     <div class="col-sm-7">
       <div class="alert alert-info" data-test="alert-graphql-query">

diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts
@@ -239,6 +239,14 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
     });
   }
 
+  goToFirstPage() {
+    this.angularGrid.paginationService.goToFirstPage();
+  }
+
+  goToLastPage() {
+    this.angularGrid.paginationService.goToLastPage();
+  }
+
   /** Dispatched event of a Grid State Changed event */
   gridStateChanged(gridStateChanges: GridStateChange) {
     console.log('Client sample, Grid State changed:: ', gridStateChanges);

diff --git a/src/app/examples/grid-odata.component.html b/src/app/examples/grid-odata.component.html
@@ -38,6 +38,15 @@ <h2>{{title}}</h2>
       </label>
     </div>
   </div>
+  <div class="row col-md-12">
+    <label>Programmatically go to first/last page:</label>
+    <button class="btn btn-default btn-xs" (click)="goToFirstPage()">
+      <i class="fa fa-caret-left fa-lg"></i>
+    </button>
+    <button class="btn btn-default btn-xs" (click)="goToLastPage()">
+      <i class="fa fa-caret-right fa-lg"></i>
+    </button>
+  </div>
 
   <angular-slickgrid gridId="grid5" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
                      [dataset]="dataset" (onGridStateChanged)="gridStateChanged($event)"

diff --git a/src/app/examples/grid-odata.component.ts b/src/app/examples/grid-odata.component.ts
@@ -153,6 +153,14 @@ export class GridOdataComponent implements OnInit {
     return this.getCustomerDataApiMock(query);
   }
 
+  goToFirstPage() {
+    this.angularGrid.paginationService.goToFirstPage();
+  }
+
+  goToLastPage() {
+    this.angularGrid.paginationService.goToLastPage();
+  }
+
   /** This function is only here to mock a WebAPI call (since we are using a JSON file for the demo)
    *  in your case the getCustomer() should be a WebAPI function returning a Promise
    */