angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/grid-tree-data-parent-child.component.ts

@@ -0,0 +1,351 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+import {
+  AngularGridInstance,
+  Column,
+  FieldType,
+  Filters,
+  Formatters,
+  GridOption,
+  GridStateChange,
+  GridStateType,
+  TreeToggledItem,
+  TreeToggleStateChange,
+} from './../modules/angular-slickgrid';
+
+const NB_ITEMS = 500;
+
+@Component({
+  templateUrl: './grid-tree-data-parent-child.component.html',
+  styleUrls: ['grid-tree-data-parent-child.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class GridTreeDataParentChildComponent implements OnInit {
+  title = 'Example 28: Tree Data <small> <span class="mdi mdi-file-tree mdi-27px"></span> (from a flat dataset with <code>parentId</code> references - <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Tree-Data-Grid" target="_blank">Wiki</a>)</small>';
+  subTitle = `<ul>
+    <li>It is assumed that your dataset will have Parent/Child references AND also Tree Level (indent) property.</li>
+    <ul>
+      <li>If you do not have the Tree Level (indent), you could call "convertParentChildArrayToHierarchicalView()" then call "convertHierarchicalViewToParentChildArray()"</li>
+      <li>You could also pass the result of "convertParentChildArrayToHierarchicalView()" to "dataset-hierarchical.bind" as defined in the next Hierarchical Example</li>
+    </ul>
+    <li><b>Styling - Material Theme</b></li>
+    <ul>
+      <li>The Material Theme was created with SASS and compiled in CSS (<a href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/styles/slickgrid-theme-material.scss" target="_blank">slickgrid-theme-material.scss</a>), you can override any of its SASS variables</li>
+      <li>We use a small subset of <a href="https://materialdesignicons.com/" target="_blank">Material Design Icons</a></li>
+      <li>you might need to refresh the page to clear the browser cache and see the correct theme</li>
+    </ul>
+  </ul>`;
+
+  angularGrid!: AngularGridInstance;
+  dataViewObj: any;
+  gridObj: any;
+  gridOptions!: GridOption;
+  columnDefinitions!: Column[];
+  dataset!: any[];
+  datasetHierarchical: any[] = [];
+  loadingClass = '';
+  isLargeDataset = false;
+  hasNoExpandCollapseChanged = true;
+  treeToggleItems: TreeToggledItem[] = [];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
+
+    // mock a dataset
+    this.dataset = this.loadData(NB_ITEMS);
+  }
+
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title', name: 'Title', field: 'title', width: 220, cssClass: 'cell-title',
+        filterable: true, sortable: true, exportWithFormatter: false,
+        queryFieldSorter: 'id', type: FieldType.string,
+        formatter: Formatters.tree, exportCustomFormatter: Formatters.treeExport
+
+      },
+      { id: 'duration', name: 'Duration', field: 'duration', minWidth: 90, filterable: true },
+      {
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete',
+        minWidth: 120, maxWidth: 200, exportWithFormatter: false,
+        sortable: true, filterable: true, filter: { model: Filters.compoundSlider, operator: '>=' },
+        formatter: Formatters.percentCompleteBarWithText, type: FieldType.number,
+      },
+      {
+        id: 'start', name: 'Start', field: 'start', minWidth: 60,
+        type: FieldType.dateIso, filterable: true, sortable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish', minWidth: 60,
+        type: FieldType.dateIso, filterable: true, sortable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+      },
+      {
+        id: 'effortDriven', name: 'Effort Driven', width: 80, minWidth: 20, maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven',
+        exportWithFormatter: false,
+        formatter: Formatters.checkmark, cannotTriggerInsert: true,
+        filterable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          model: Filters.singleSelect
+        }
+      }
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableAutoSizeColumns: true,
+      enableAutoResize: true,
+      enableExcelExport: true,
+      excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
+      registerExternalResources: [new ExcelExportService()],
+      enableFiltering: true,
+      showCustomFooter: true, // display some metrics in the bottom custom footer
+      enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
+      treeDataOptions: {
+        columnId: 'title',
+        parentPropName: 'parentId',
+        // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
+        levelPropName: 'treeLevel',
+        indentMarginLeft: 15,
+        initiallyCollapsed: true,
+
+        // you can optionally sort by a different column and/or sort direction
+        // this is the recommend approach, unless you are 100% that your original array is already sorted (in most cases it's not)
+        initialSort: {
+          columnId: 'title',
+          direction: 'ASC'
+        },
+        // we can also add a custom Formatter just for the title text portion
+        titleFormatter: (_row, _cell, value, _def, dataContext) => {
+          let prefix = '';
+          if (dataContext.treeLevel > 0) {
+            prefix = `<span class="mdi mdi-subdirectory-arrow-right mdi-v-align-sub color-se-secondary"></span>`;
+          }
+          return `${prefix}<span class="bold">${value}</span> <span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
+        },
+      },
+      multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
+      presets: {
+        filters: [{ columnId: 'percentComplete', searchTerms: [25], operator: '>=' }],
+        // treeData: { toggledItems: [{ itemId: 1, isCollapsed: false }] },
+      },
+
+      // change header/cell row height for material design theme
+      headerRowHeight: 45,
+      rowHeight: 40,
+      // if you're dealing with lots of data, it is recommended to use the filter debounce
+      filterTypingDebounce: 250,
+
+      // use Material Design SVG icons
+      contextMenu: {
+        iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
+        iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
+        iconClearGroupingCommand: 'mdi mdi-close',
+        iconCopyCellValueCommand: 'mdi mdi-content-copy',
+        iconExportCsvCommand: 'mdi mdi-download',
+        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+        iconExportTextDelimitedCommand: 'mdi mdi-download',
+      },
+      gridMenu: {
+        iconCssClass: 'mdi mdi-menu',
+        iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
+        iconClearAllSortingCommand: 'mdi mdi-swap-vertical',
+        iconExportCsvCommand: 'mdi mdi-download',
+        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+        iconExportTextDelimitedCommand: 'mdi mdi-download',
+        iconRefreshDatasetCommand: 'mdi mdi-sync',
+        iconToggleFilterCommand: 'mdi mdi-flip-vertical',
+        iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
+      },
+      headerMenu: {
+        iconClearFilterCommand: 'mdi mdi mdi-filter-remove-outline',
+        iconClearSortCommand: 'mdi mdi-swap-vertical',
+        iconSortAscCommand: 'mdi mdi-sort-ascending',
+        iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending',
+        iconColumnHideCommand: 'mdi mdi-close',
+      }
+    };
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+    this.dataViewObj = angularGrid.dataView;
+  }
+
+  /**
+   * A simple method to add a new item inside the first group that we find (it's random and is only for demo purposes).
+   * After adding the item, it will sort by parent/child recursively
+   */
+  addNewRow() {
+    const newId = this.dataViewObj.getItemCount();
+    const parentPropName = 'parentId';
+    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
+    const newTreeLevel = 1;
+
+    // find first parent object and add the new item as a child
+    const childItemFound = this.dataViewObj.getItems().find((item: any) => item[treeLevelPropName] === newTreeLevel);
+    const parentItemFound = this.dataViewObj.getItemByIdx(childItemFound[parentPropName]);
+
+    if (childItemFound && parentItemFound) {
+      const newItem = {
+        id: newId,
+        parentId: parentItemFound.id,
+        title: `Task ${newId}`,
+        duration: '1 day',
+        percentComplete: 99,
+        start: new Date(),
+        finish: new Date(),
+        effortDriven: false
+      };
+
+      // use the Grid Service to insert the item,
+      // it will also internally take care of updating & resorting the hierarchical dataset
+      this.angularGrid.gridService.addItem(newItem);
+    }
+  }
+
+  collapseAll() {
+    this.angularGrid.treeDataService.toggleTreeDataCollapse(true);
+  }
+
+  collapseAllWithoutEvent() {
+    this.angularGrid.treeDataService.toggleTreeDataCollapse(true, false);
+  }
+
+  expandAll() {
+    this.angularGrid.treeDataService.toggleTreeDataCollapse(false);
+  }
+
+  dynamicallyChangeFilter() {
+    // const randomPercentage = Math.floor((Math.random() * 99));
+    this.angularGrid.filterService.updateFilters([{ columnId: 'percentComplete', operator: '<', searchTerms: [40] }]);
+  }
+
+  hideSpinner() {
+    setTimeout(() => this.loadingClass = '', 200); // delay the hide spinner a bit to avoid show/hide too quickly
+  }
+
+  showSpinner() {
+    if (this.isLargeDataset) {
+      this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px color-alt-success';
+    }
+  }
+
+  logHierarchicalStructure() {
+    console.log('exploded array', this.angularGrid.treeDataService.datasetHierarchical);
+  }
+
+  logFlatStructure() {
+    console.log('flat array', this.angularGrid.treeDataService.dataset);
+  }
+
+  loadData(rowCount: number) {
+    this.isLargeDataset = rowCount > 5000; // we'll show a spinner when it's large, else don't show show since it should be fast enough
+    let indent = 0;
+    const parents = [];
+    const data = [];
+    // prepare the data
+    for (let i = 0; i < rowCount; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const item: any = (data[i] = {});
+      let parentId;
+
+      /*
+        for demo & E2E testing purposes, let's make "Task 0" empty and then "Task 1" a parent that contains at least "Task 2" and "Task 3" which the latter will also contain "Task 4" (as shown below)
+        also for all other rows don't go over indent tree level depth of 2
+        Task 0
+        Task 1
+          Task 2
+          Task 3
+            Task 4
+        ...
+       */
+      if (i === 1 || i === 0) {
+        indent = 0;
+        parents.pop();
+      } if (i === 3) {
+        indent = 1;
+      } else if (i === 2 || i === 4 || (Math.random() > 0.8 && i > 0 && indent < 3 && i - 1 !== 0 && i - 1 !== 2)) { // also make sure Task 0, 2 remains empty
+        indent++;
+        parents.push(i - 1);
+      } else if ((Math.random() < 0.3 && indent > 0)) {
+        indent--;
+        parents.pop();
+      }
+      if (parents.length > 0) {
+        parentId = parents[parents.length - 1];
+      } else {
+        parentId = null;
+      }
+
+      item['id'] = i;
+      item['parentId'] = parentId;
+      item['title'] = `Task ${i}`;
+      item['duration'] = '5 days';
+      item['percentComplete'] = Math.round(Math.random() * 100);
+      item['start'] = new Date(randomYear, randomMonth, randomDay);
+      item['finish'] = new Date(randomYear, (randomMonth + 1), randomDay);
+      item['effortDriven'] = (i % 5 === 0);
+    }
+    this.dataset = data;
+    return data;
+  }
+
+  handleOnTreeFullToggleEnd(treeToggleExecution: TreeToggleStateChange) {
+    console.log('Tree Data changes', treeToggleExecution);
+    this.hideSpinner();
+  }
+
+  /** Whenever a parent is being toggled, we'll keep a reference of all of these changes so that we can reapply them whenever we want */
+  handleOnTreeItemToggled(treeToggleExecution: TreeToggleStateChange) {
+    this.hasNoExpandCollapseChanged = false;
+    this.treeToggleItems = treeToggleExecution.toggledItems as TreeToggledItem[];
+    console.log('Tree Data changes', treeToggleExecution);
+  }
+
+  handleOnGridStateChanged(gridStateChange: GridStateChange) {
+    this.hasNoExpandCollapseChanged = false;
+
+    if (gridStateChange?.change?.type === GridStateType.treeData) {
+      console.log('Tree Data gridStateChange', gridStateChange?.gridState?.treeData);
+      this.treeToggleItems = gridStateChange?.gridState?.treeData?.toggledItems as TreeToggledItem[];
+    }
+  }
+
+  logTreeDataToggledItems() {
+    console.log(this.angularGrid.treeDataService.getToggledItems());
+  }
+
+  dynamicallyToggledFirstParent() {
+    const parentPropName = 'parentId';
+    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
+    const newTreeLevel = 1;
+
+    // find first parent object and toggle it
+    const childItemFound = this.dataset.find((item) => item[treeLevelPropName] === newTreeLevel);
+    const parentItemFound = this.angularGrid.dataView.getItemByIdx(childItemFound[parentPropName]);
+
+    if (childItemFound && parentItemFound) {
+      this.angularGrid.treeDataService.dynamicallyToggleItemState([{ itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed }]);
+    }
+  }
+
+  reapplyToggledItems() {
+    this.angularGrid.treeDataService.applyToggledItemStateChanges(this.treeToggleItems);
+  }
+
+}

package/src/app/examples/home.component.html

@@ -0,0 +1,41 @@
+<div class="container">
+  <h2>{{title}}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <hr />
+
+  <h4>Description</h4>
+  <p>
+    One of the best javascript datagrid
+    <a href="https://github.com/mleibman/SlickGrid"
+       target="_blank">SlickGrid</a> which was originally developed by @mleibman is now available to Angular. I have
+    tried and used a few datagrids and SlickGrid beats most of them in terms of functionalities
+    and performance (it can easily deal with even a million row).
+  </p>
+  <h4>Wiki / Documentation</h4>
+  <p>
+    The Wiki is where all the documentation and instructions will go, so please consult the
+    <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki"
+       target="_blank">Angular-Slickgrid - Wiki</a>
+    before opening any issues.
+    <br />
+    The
+    <a href="https://github.com/ghiscoding/angular-slickgrid/wiki/HOWTO---Step-by-Step"
+       target="_blank">HOWTO - Wiki</a>
+    is the best starting point to get going with this library.
+  </p>
+
+  <hr />
+  Like my work? You can support me with caffeine :)
+
+  <br /><br />
+
+  <a href='https://ko-fi.com/N4N679OT'
+     target='_blank'>
+    <img height='36'
+         style='border:0px;height:36px;'
+         src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0'
+         border='0'
+         alt='Buy Me a Coffee at ko-fi.com' />
+  </a>
+</div>

package/src/app/examples/home.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './home.component.html'
+})
+export class HomeComponent {
+  title = 'Angular-Slickgrid - Demo Site';
+  subTitle = 'This site is to demo multiple usage of Angular-Slickgrid, choose an example from left side menu';
+}

package/src/app/examples/rowdetail-preload.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template:
+    `<h4>
+      <i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
+      Loading...
+    </h4>`
+})
+export class RowDetailPreloadComponent {}

package/src/app/examples/rowdetail-view.component.html

@@ -0,0 +1,36 @@
+<div class="container-fluid">
+  <h3>{{model?.title}}</h3>
+  <div class="row">
+    <div class="col-3"><label>Assignee:</label> <input class="form-control" [(ngModel)]="model.assignee" /></div>
+    <div class="col-3"><label>Reporter:</label> <span>{{model?.reporter}}</span></div>
+    <div class="col-2"><label>Duration:</label> <span>{{model?.duration |  number : '1.2-2'}}</span></div>
+    <div class="col-2"><label>% Complete:</label> <span>{{model?.percentComplete}}</span></div>
+  </div>
+
+  <div class="row">
+    <div class="col-3"><label>Start:</label> <span>{{model?.start | date: 'yyyy-MM-dd'}}</span></div>
+    <div class="col-3"><label>Finish:</label> <span>{{model?.finish | date: 'yyyy-MM-dd'}}</span></div>
+    <div class="col-2"><label>Effort Driven:</label> <i [class]="model?.effortDriven ? 'fa fa-check' : ''"></i></div>
+  </div>
+
+  <hr>
+
+  <div class="col-sm-8">
+    <h4>
+      Find out who is the Assignee
+      <small>
+        <button class="btn btn-primary btn-sm" (click)="alertAssignee(model?.assignee)" data-test="assignee-btn">
+          Click Me
+        </button>
+      </small>
+    </h4>
+  </div>
+  <div class="col-sm-4">
+    <button class="btn btn-primary btn-danger btn-sm" (click)="deleteRow(model)" data-test="delete-btn">
+      Delete Row
+    </button>
+    <button class="btn btn-outline-secondary btn-sm" (click)="callParentMethod(model)" data-test="parent-btn">
+      Call Parent Method
+    </button>
+  </div>
+</div>

package/src/app/examples/rowdetail-view.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { SlickDataView, SlickGrid } from '../modules/angular-slickgrid';
+import { GridRowDetailComponent } from './grid-rowdetail.component';
+
+@Component({
+  templateUrl: './rowdetail-view.component.html'
+})
+export class RowDetailViewComponent {
+  model!: {
+    duration: Date;
+    percentComplete: number;
+    reporter: string;
+    start: Date;
+    finish: Date;
+    effortDriven: boolean;
+    assignee: string;
+    title: string;
+  };
+
+  // you also have access to the following objects (it must match the exact property names shown below)
+  addon: any; // row detail addon instance
+  grid!: SlickGrid;
+  dataView!: SlickDataView;
+
+  // you can also optionally use the Parent Component reference
+  // NOTE that you MUST provide it through the "parent" property in your "rowDetail" grid options
+  parent!: GridRowDetailComponent;
+
+  constructor() { }
+
+  alertAssignee(name: string) {
+    if (typeof name === 'string') {
+      alert(`Assignee on this task is: ${name.toUpperCase()}`);
+    } else {
+      alert('No one is assigned to this task.');
+    }
+  }
+
+  deleteRow(model: any) {
+    if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
+      // you first need to collapse all rows (via the 3rd party addon instance)
+      this.addon.collapseAll();
+
+      // then you can delete the item from the dataView
+      this.dataView.deleteItem(model.rowId);
+
+      this.parent.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
+    }
+  }
+
+  callParentMethod(model: any) {
+    this.parent.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
+  }
+}

package/src/app/examples/swt-common-grid-pagination.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit, Input, } from '@angular/core';
+import { SwtCommonGridComponent } from './swt-common-grid.component';
+import { Logger } from './swt-logger.service';
+import { HttpClient } from '@angular/common/http';
+import { GridOption } from '../modules/angular-slickgrid';
+/**
+ * Custom pagination component: It allows editing the page number manually
+ *  << < Page [1] of 5 > >>
+ *
+ * @author Saber Chebka, saber.chebka@gmail.com
+ */
+@Component({
+  selector: 'swt-common-grid-pagination',
+  template: `
+    <div class="slick-pagination">
+    <div class="slick-pagination-nav">
+        <nav aria-label="Page navigation">
+            <ul class="pagination">
+                <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+                    <a class="page-link icon-seek-first fa fa-angle-double-left"
+                    aria-label="First" (click)="changeToFirstPage($event)"> </a>
+                </li>
+                <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+                    <a class="page-link icon-seek-prev fa fa-angle-left"
+                    aria-label="Previous" (click)="changeToPreviousPage($event)"> </a>
+                </li>
+            </ul>
+        </nav>
+
+        <div class="slick-page-number">
+            <span [translate]="'PAGE'"></span>
+            <input type="text" value="{{pageNumber}}" size="1"  (change)="changeToCurrentPage($event)">
+            <span [translate]="'OF'"></span><span> {{pageCount}}</span>
+        </div>
+
+        <nav aria-label="Page navigation">
+            <ul class="pagination">
+                <li class="page-item"
+                    [ngClass]="pageNumber === pageCount ? 'disabled' : ''"><a
+                    class="page-link icon-seek-next text-center fa fa-lg fa-angle-right"
+                    aria-label="Next" (click)="changeToNextPage($event)"> </a></li>
+                <li class="page-item"
+                    [ngClass]="pageNumber === pageCount ? 'disabled' : ''"><a
+                    class="page-link icon-seek-end fa fa-lg fa-angle-double-right"
+                    aria-label="Last" (click)="changeToLastPage($event)"> </a></li>
+            </ul>
+        </nav>
+        <nav>
+            <ul class="pagination">
+                <li class="">
+                    <span [hidden]="!processing" class="page-spin">
+                        <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    </div>
+</div>
+  `,
+  styles: [`.page-spin {
+              border: none;
+              height: 32px;
+              background-color: transparent;
+              cursor: default;
+              animation: fa-spin 1.2s infinite linear !important;
+            }
+            .page-spin:hover {
+                background-color: transparent;
+            }
+  `]
+})
+export class SwtCommonGridPaginationComponent implements OnInit {
+  private logger: Logger;
+
+  @Input() pageCount = 1;
+  @Input() pageNumber = 1;
+
+  totalItems = 0;
+  processing = false;
+
+  // Reference to the real pagination component
+  realPagination = true;
+  _gridPaginationOptions!: GridOption;
+  commonGrid!: SwtCommonGridComponent;
+
+  @Input()
+  set gridPaginationOptions(gridPaginationOptions: GridOption) {
+    this._gridPaginationOptions = gridPaginationOptions;
+
+    // The backendServiceApi is itself the SwtCommonGridComponent (This is a hack)
+    this.commonGrid = <SwtCommonGridComponent>this.gridPaginationOptions!.backendServiceApi!.service;
+  }
+  get gridPaginationOptions(): GridOption {
+    return this._gridPaginationOptions;
+  }
+
+
+
+  constructor(private httpClient: HttpClient) {
+    this.logger = new Logger('grid-pagination', httpClient);
+    this.logger.info('method [constructor] - START/END');
+  }
+
+
+  ngOnInit() {
+    this.logger.info('init: ');
+  }
+
+
+
+  changeToFirstPage(event: any) {
+    this.logger.info('method [changeToFirstPage] - START/END');
+    this.pageNumber = 1;
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  changeToLastPage(event: any) {
+    this.logger.info('method [changeToLastPage] - START/END');
+    this.pageNumber = this.pageCount;
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  changeToNextPage(event: any) {
+    this.logger.info('method [changeToNextPage] - START/END');
+    if (this.pageNumber < this.pageCount) {
+      this.pageNumber++;
+      this.onPageChanged(event, this.pageNumber);
+    }
+  }
+
+  changeToPreviousPage(event: any) {
+    this.logger.info('method [changeToNextPage] - START/END');
+    if (this.pageNumber > 1) {
+      this.pageNumber--;
+      this.onPageChanged(event, this.pageNumber);
+    }
+  }
+
+
+  changeToCurrentPage(event: any) {
+    this.logger.info('method [changeToCurrentPage] - START/END');
+    this.pageNumber = event.currentTarget.value;
+    if (this.pageNumber < 1) {
+      this.pageNumber = 1;
+    } else if (this.pageNumber > this.pageCount) {
+      this.pageNumber = this.pageCount;
+    }
+
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  onPageChanged(event?: Event, pageNumber?: number) {
+    this.logger.info('method [onPageChanged] - START/END', this.commonGrid);
+    this.commonGrid.processOnPaginationChanged(event, { newPage: pageNumber as number, pageSize: -1 });
+  }
+}