angular-slickgrid 9.0.0 → 9.0.2

package/src/demos/examples/example05.component.ts

@@ -1,474 +0,0 @@
-import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { AngularGridInstance, Column, Filters, GridOption, GridStateChange, Metrics, OperatorType, Pagination } from '../../library';
-
-const defaultPageSize = 20;
-const sampleDataRoot = 'assets/data';
-const CARET_HTML_ESCAPED = '%5E';
-const PERCENT_HTML_ESCAPED = '%25';
-
-@Component({
-  templateUrl: './example05.component.html',
-  standalone: false,
-})
-export class Example5Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset = [];
-  metrics!: Metrics;
-  paginationOptions!: Pagination;
-
-  isCountEnabled = true;
-  isSelectEnabled = false;
-  isExpandEnabled = false;
-  odataVersion = 2;
-  odataQuery = '';
-  processing = true;
-  errorStatus = '';
-  isPageErrorTest = false;
-  status = { text: 'processing...', class: 'alert alert-danger' };
-
-  constructor(
-    private readonly cd: ChangeDetectorRef,
-    private http: HttpClient
-  ) {}
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'name',
-        name: 'Name',
-        field: 'name',
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.compoundInput,
-          compoundOperatorList: [
-            { operator: '', desc: 'Contains' },
-            { operator: '<>', desc: 'Not Contains' },
-            { operator: '=', desc: 'Equals' },
-            { operator: '!=', desc: 'Not equal to' },
-            { operator: 'a*', desc: 'Starts With' },
-            { operator: 'Custom', desc: 'SQL Like' },
-          ],
-        },
-      },
-      {
-        id: 'gender',
-        name: 'Gender',
-        field: 'gender',
-        filterable: true,
-        sortable: true,
-        filter: {
-          model: Filters.singleSelect,
-          collection: [
-            { value: '', label: '' },
-            { value: 'male', label: 'male' },
-            { value: 'female', label: 'female' },
-          ],
-        },
-      },
-      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true },
-      { id: 'category_name', name: 'Category', field: 'category/name', filterable: true, sortable: true },
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      checkboxSelector: {
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true,
-      },
-      compoundOperatorAltTexts: {
-        // where '=' is any of the `OperatorString` type shown above
-        text: { Custom: { operatorAlt: '%%', descAlt: 'SQL Like' } },
-      },
-      enableCellNavigation: true,
-      enableFiltering: true,
-      enableCheckboxSelector: true,
-      enableRowSelection: true,
-      enablePagination: true, // you could optionally disable the Pagination
-      pagination: {
-        pageSizes: [10, 20, 50, 100, 500, 50000],
-        pageSize: defaultPageSize,
-        totalItems: 0,
-      },
-      presets: {
-        // you can also type operator as string, e.g.: operator: 'EQ'
-        filters: [{ columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal }],
-        sorters: [
-          // direction can be written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
-          { columnId: 'name', direction: 'asc' },
-        ],
-        pagination: { pageNumber: 2, pageSize: defaultPageSize },
-      },
-      backendServiceApi: {
-        service: new GridOdataService(),
-        options: {
-          enableCount: this.isCountEnabled, // add the count in the OData query, which will return a property named "__count" (v2) or "@odata.count" (v4)
-          enableSelect: this.isSelectEnabled,
-          enableExpand: this.isExpandEnabled,
-          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
-            if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
-              let matchesSearch = searchValues[0].replace(/\*/g, '.*');
-              matchesSearch = matchesSearch.slice(0, 1) + CARET_HTML_ESCAPED + matchesSearch.slice(1);
-              matchesSearch = matchesSearch.slice(0, -1) + "$'";
-
-              return `matchesPattern(${fieldName}, ${matchesSearch})`;
-            }
-            return;
-          },
-          version: this.odataVersion, // defaults to 2, the query string is slightly different between OData 2 and 4
-        },
-        onError: (error: Error) => {
-          this.errorStatus = error.message;
-          this.displaySpinner(false, true);
-        },
-        preProcess: () => {
-          this.errorStatus = '';
-          this.displaySpinner(true);
-        },
-        process: (query) => this.getCustomerApiCall(query),
-        postProcess: (response) => {
-          this.metrics = response.metrics;
-          this.displaySpinner(false);
-          this.getCustomerCallback(response);
-          this.cd.detectChanges();
-        },
-      } as OdataServiceApi,
-    };
-  }
-
-  displaySpinner(isProcessing: boolean, isError?: boolean) {
-    this.processing = isProcessing;
-    if (isError) {
-      this.status = { text: 'ERROR!!!', class: 'alert alert-danger' };
-    } else {
-      this.status = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' };
-    }
-    this.cd.detectChanges();
-  }
-
-  getCustomerCallback(data: any) {
-    // totalItems property needs to be filled for pagination to work correctly
-    // however we need to force Angular to do a dirty check, doing a clone object will do just that
-    let totalItemCount: number = data['totalRecordCount']; // you can use "totalRecordCount" or any name or "odata.count" when "enableCount" is set
-    if (this.isCountEnabled) {
-      totalItemCount = this.odataVersion === 4 ? data['@odata.count'] : data['d']['__count'];
-    }
-    if (this.metrics) {
-      this.metrics.totalItemCount = totalItemCount;
-    }
-
-    // once pagination totalItems is filled, we can update the dataset
-    this.paginationOptions = { ...this.gridOptions.pagination, totalItems: totalItemCount } as Pagination;
-    this.dataset = this.odataVersion === 4 ? data.value : data.d.results;
-    this.odataQuery = data['query'];
-  }
-
-  getCustomerApiCall(query: string) {
-    // in your case, you will call your WebAPI function (wich needs to return a Promise)
-    // for the demo purpose, we will call a mock WebAPI function
-    return this.getCustomerDataApiMock(query);
-  }
-
-  goToFirstPage() {
-    this.angularGrid.paginationService!.goToFirstPage();
-  }
-
-  goToLastPage() {
-    this.angularGrid.paginationService!.goToLastPage();
-  }
-
-  setFiltersDynamically() {
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      // { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
-      { columnId: 'name', searchTerms: ['A'], operator: 'a*' },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([{ columnId: 'name', direction: 'DESC' }]);
-  }
-
-  /** 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
-   */
-  getCustomerDataApiMock(query: string): Promise<any> {
-    // the mock is returning a Promise, just like a WebAPI typically does
-    return new Promise((resolve) => {
-      const queryParams = query.toLowerCase().split('&');
-      let top: number;
-      let skip = 0;
-      let orderBy = '';
-      let countTotalItems = 100;
-      const columnFilters = {};
-
-      if (this.isPageErrorTest) {
-        this.isPageErrorTest = false;
-        throw new Error('Server timed out trying to retrieve data for the last page');
-      }
-
-      for (const param of queryParams) {
-        if (param.includes('$top=')) {
-          top = +param.substring('$top='.length);
-          if (top === 50000) {
-            throw new Error('Server timed out retrieving 50,000 rows');
-          }
-        }
-        if (param.includes('$skip=')) {
-          skip = +param.substring('$skip='.length);
-        }
-        if (param.includes('$orderby=')) {
-          orderBy = param.substring('$orderby='.length);
-        }
-        if (param.includes('$filter=')) {
-          const filterBy = param.substring('$filter='.length).replace('%20', ' ');
-          if (filterBy.includes('matchespattern')) {
-            const regex = new RegExp(`matchespattern\\(([a-zA-Z]+),\\s'${CARET_HTML_ESCAPED}(.*?)'\\)`, 'i');
-            const filterMatch = filterBy.match(regex) || [];
-            const fieldName = filterMatch[1].trim();
-            (columnFilters as any)[fieldName] = { type: 'matchespattern', term: '^' + filterMatch[2].trim() };
-          }
-          if (filterBy.includes('contains')) {
-            const filterMatch = filterBy.match(/contains\(([a-zA-Z/]+),\s?'(.*?)'/);
-            const fieldName = filterMatch![1].trim();
-            (columnFilters as any)[fieldName] = { type: 'substring', term: filterMatch![2].trim() };
-          }
-          if (filterBy.includes('substringof')) {
-            const filterMatch = filterBy.match(/substringof\('(.*?)',\s([a-zA-Z/]+)/);
-            const fieldName = filterMatch![2].trim();
-            (columnFilters as any)[fieldName] = { type: 'substring', term: filterMatch![1].trim() };
-          }
-          for (const operator of ['eq', 'ne', 'le', 'lt', 'gt', 'ge']) {
-            if (filterBy.includes(operator)) {
-              const re = new RegExp(`([a-zA-Z ]*) ${operator} '(.*?)'`);
-              const filterMatch = re.exec(filterBy);
-              if (Array.isArray(filterMatch)) {
-                const fieldName = filterMatch[1].trim();
-                (columnFilters as any)[fieldName] = { type: operator, term: filterMatch[2].trim() };
-              }
-            }
-          }
-          if (filterBy.includes('startswith') && filterBy.includes('endswith')) {
-            const filterStartMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const filterEndMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/) || [];
-            const fieldName = filterStartMatch[1].trim();
-            (columnFilters as any)[fieldName] = { type: 'starts+ends', term: [filterStartMatch[2].trim(), filterEndMatch[2].trim()] };
-          } else if (filterBy.includes('startswith')) {
-            const filterMatch = filterBy.match(/startswith\(([a-zA-Z ]*),\s?'(.*?)'/);
-            const fieldName = filterMatch![1].trim();
-            (columnFilters as any)[fieldName] = { type: 'starts', term: filterMatch![2].trim() };
-          } else if (filterBy.includes('endswith')) {
-            const filterMatch = filterBy.match(/endswith\(([a-zA-Z ]*),\s?'(.*?)'/);
-            const fieldName = filterMatch![1].trim();
-            (columnFilters as any)[fieldName] = { type: 'ends', term: filterMatch![2].trim() };
-          }
-
-          // simulate a backend error when trying to sort on the "Company" field
-          if (filterBy.includes('company')) {
-            throw new Error('Server could not filter using the field "Company"');
-          }
-        }
-      }
-
-      // simulate a backend error when trying to sort on the "Company" field
-      if (orderBy.includes('company')) {
-        throw new Error('Server could not sort using the field "Company"');
-      }
-
-      this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response) => {
-        let data = response as any[];
-
-        // Sort the data
-        if (orderBy?.length > 0) {
-          const orderByClauses = orderBy.split(',');
-          for (const orderByClause of orderByClauses) {
-            const orderByParts = orderByClause.split(' ');
-            const orderByField = orderByParts[0];
-
-            let selector = (obj: any): string => obj;
-            for (const orderByFieldPart of orderByField.split('/')) {
-              const prevSelector = selector;
-              selector = (obj: any) => {
-                return prevSelector(obj)[orderByFieldPart as any];
-              };
-            }
-
-            const sort = orderByParts[1] ?? 'asc';
-            switch (sort.toLocaleLowerCase()) {
-              case 'asc':
-                data = data.sort((a, b) => selector(a).localeCompare(selector(b)));
-                break;
-              case 'desc':
-                data = data.sort((a, b) => selector(b).localeCompare(selector(a)));
-                break;
-            }
-          }
-        }
-
-        // Read the result field from the JSON response.
-        let firstRow = skip;
-        let filteredData = data;
-        if (columnFilters) {
-          for (const columnId in columnFilters) {
-            if (columnId in columnFilters) {
-              filteredData = filteredData.filter((column) => {
-                const filterType = (columnFilters as any)[columnId].type;
-                const searchTerm = (columnFilters as any)[columnId].term;
-                let colId = columnId;
-                if (columnId?.indexOf(' ') !== -1) {
-                  const splitIds = columnId.split(' ');
-                  colId = splitIds[splitIds.length - 1];
-                }
-
-                let filterTerm;
-                let col = column;
-                for (const part of colId.split('/')) {
-                  filterTerm = (col as any)[part];
-                  col = filterTerm;
-                }
-
-                if (filterTerm) {
-                  const [term1, term2] = Array.isArray(searchTerm) ? searchTerm : [searchTerm];
-
-                  switch (filterType) {
-                    case 'eq':
-                      return filterTerm.toLowerCase() === term1;
-                    case 'ne':
-                      return filterTerm.toLowerCase() !== term1;
-                    case 'le':
-                      return filterTerm.toLowerCase() <= term1;
-                    case 'lt':
-                      return filterTerm.toLowerCase() < term1;
-                    case 'gt':
-                      return filterTerm.toLowerCase() > term1;
-                    case 'ge':
-                      return filterTerm.toLowerCase() >= term1;
-                    case 'ends':
-                      return filterTerm.toLowerCase().endsWith(term1);
-                    case 'starts':
-                      return filterTerm.toLowerCase().startsWith(term1);
-                    case 'starts+ends':
-                      return filterTerm.toLowerCase().startsWith(term1) && filterTerm.toLowerCase().endsWith(term2);
-                    case 'substring':
-                      return filterTerm.toLowerCase().includes(term1);
-                    case 'matchespattern':
-                      return new RegExp((term1 as string).replaceAll(PERCENT_HTML_ESCAPED, '.*'), 'i').test(filterTerm);
-                  }
-                }
-              });
-            }
-          }
-          countTotalItems = filteredData.length;
-        }
-
-        // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query
-        if (firstRow > filteredData.length) {
-          query = query.replace(`$skip=${firstRow}`, '');
-          firstRow = 0;
-        }
-        const updatedData = filteredData.slice(firstRow, firstRow + top!);
-
-        setTimeout(() => {
-          const backendResult: any = { query };
-          if (!this.isCountEnabled) {
-            backendResult['totalRecordCount'] = countTotalItems;
-          }
-
-          if (this.odataVersion === 4) {
-            backendResult['value'] = updatedData;
-            if (this.isCountEnabled) {
-              backendResult['@odata.count'] = countTotalItems;
-            }
-          } else {
-            backendResult['d'] = { results: updatedData };
-            if (this.isCountEnabled) {
-              backendResult['d']['__count'] = countTotalItems;
-            }
-          }
-
-          // console.log('Backend Result', backendResult);
-          resolve(backendResult);
-        }, 100);
-      });
-    });
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridStateChanges: GridStateChange) {
-    // console.log('Client sample, Grid State changed:: ', gridStateChanges);
-    console.log('Client sample, Grid State changed:: ', gridStateChanges.change);
-  }
-
-  throwPageChangeError() {
-    this.isPageErrorTest = true;
-    this.angularGrid?.paginationService?.goToLastPage();
-  }
-
-  // YOU CAN CHOOSE TO PREVENT EVENT FROM BUBBLING IN THE FOLLOWING 3x EVENTS
-  // note however that internally the cancelling the search is more of a rollback
-  handleOnBeforeSort(_e: Event) {
-    // e.preventDefault();
-    // return false;
-    return true;
-  }
-
-  handleOnBeforeSearchChange(_e: Event) {
-    // e.preventDefault();
-    // return false;
-    return true;
-  }
-
-  handleOnBeforePaginationChange(_e: Event) {
-    // e.preventDefault();
-    // return false;
-    return true;
-  }
-
-  // THE FOLLOWING METHODS ARE ONLY FOR DEMO PURPOSES DO NOT USE THIS CODE
-  // ---
-
-  changeCountEnableFlag() {
-    this.isCountEnabled = !this.isCountEnabled;
-    this.resetOptions({ enableCount: this.isCountEnabled });
-    return true;
-  }
-
-  changeEnableSelectFlag() {
-    this.isSelectEnabled = !this.isSelectEnabled;
-    this.resetOptions({ enableSelect: this.isSelectEnabled });
-    return true;
-  }
-
-  changeEnableExpandFlag() {
-    this.isExpandEnabled = !this.isExpandEnabled;
-    this.resetOptions({ enableExpand: this.isExpandEnabled });
-    return true;
-  }
-
-  setOdataVersion(version: number) {
-    this.odataVersion = version;
-    this.resetOptions({ version: this.odataVersion });
-    return true;
-  }
-
-  private resetOptions(options: Partial<OdataOption>) {
-    this.displaySpinner(true);
-    const odataService = this.gridOptions.backendServiceApi!.service as GridOdataService;
-    odataService.updateOptions(options);
-    odataService.clearFilters();
-    this.angularGrid?.filterService.clearFilters();
-  }
-}

package/src/demos/examples/example06.component.html

@@ -1,163 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 6: Grid connected to Backend Server with GraphQL
-    <span class="float-end">
-      <a
-        style="font-size: 18px"
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-graphql.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Sorting/Paging connected to a Backend GraphQL Service (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/backend-services/graphql"
-      target="_blank"
-      >Wiki docs</a
-    >).
-    <br />
-    <ul class="small">
-      <li><span class="red">(*) NO DATA SHOWING</span> - just change Filters &amp; Pages and look at the "GraphQL Query" changing :)</li>
-      <li>This example also demos the Grid State feature, open the console log to see the changes</li>
-      <li>String column also support operator (>, >=, <, <=, <>, !=, =, ==, *)</li>
-      <ul>
-        <li>The (*) can be used as startsWith (ex.: "abc*" => startsWith "abc") / endsWith (ex.: "*xyz" => endsWith "xyz")</li>
-        <li>The other operators can be used on column type number for example: ">=100" (bigger or equal than 100)</li>
-      </ul>
-      <li>
-        You can also preload a grid with certain "presets" like Filters / Sorters / Pagination
-        <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grid-state-and-preset" target="_blank"
-          >Wiki - Grid Preset</a
-        >
-      </li>
-      <li>
-        Also note that the column Name has a filter with a custom %% operator that behaves like an SQL LIKE operator supporting % wildcards.
-      </li>
-      <li>
-        Depending on your configuration, your GraphQL Server might already support regex querying (e.g. Hasura
-        <a href="https://hasura.io/docs/latest/queries/postgres/filters/text-search-operators/#_regex" target="_blank">_regex</a>) or you
-        could add your own implementation (e.g. see this SO <a href="https://stackoverflow.com/a/37981802/1212166">Question</a>).
-      </li>
-    </ul>
-  </div>
-
-  <div class="row">
-    <div class="col-sm-5">
-      <div [class]="status.class" role="alert" data-test="status">
-        <strong>Status: </strong> {{ status.text }}
-        <span [hidden]="!processing">
-          <i class="mdi mdi-sync mdi-spin-1s"></i>
-        </span>
-      </div>
-
-      <div class="row">
-        <div class="col-md-12">
-          <button
-            class="btn btn-outline-secondary btn-sm btn-icon"
-            data-test="clear-filters-sorting"
-            (click)="clearAllFiltersAndSorts()"
-            title="Clear all Filters & Sorts"
-          >
-            <i class="mdi mdi-filter-remove-outline"></i>
-            Clear all Filter & Sorts
-          </button>
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
-            Set Filters Dynamically
-          </button>
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-            Set Sorting Dynamically
-          </button>
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="reset-presets" (click)="resetToOriginalPresets()">
-            Reset Original Presets
-          </button>
-          <label for="serverdelay" class="ml-4">Server Delay: </label>
-          <input
-            id="serverdelay"
-            type="number"
-            data-test="server-delay"
-            style="width: 55px"
-            [(ngModel)]="serverWaitDelay"
-            title="input a fake timer delay to simulate slow server response"
-          />
-        </div>
-      </div>
-      <div class="row mt-1">
-        <div class="col-md-12">
-          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="language-button" (click)="switchLanguage()">
-            <i class="mdi mdi-translate"></i>
-            Switch Language
-          </button>
-          <strong>Locale:</strong>
-          <span style="font-style: italic" data-test="selected-locale">
-            {{ selectedLanguage + '.json' }}
-          </span>
-        </div>
-
-        <span style="margin-left: 10px">
-          <label class="radio-inline control-label" for="radioOffset">
-            <input
-              type="radio"
-              name="inlineRadioOptions"
-              data-test="offset"
-              id="radioOffset"
-              checked
-              [value]="false"
-              (change)="setIsWithCursor(false)"
-            />
-            Offset
-          </label>
-          <label class="radio-inline control-label" for="radioCursor">
-            <input
-              type="radio"
-              name="inlineRadioOptions"
-              data-test="cursor"
-              id="radioCursor"
-              [value]="true"
-              (change)="setIsWithCursor(true)"
-            />
-            Cursor
-          </label>
-        </span>
-      </div>
-      <br />
-      <div *ngIf="metrics" style="margin: 10px 0px">
-        <b>Metrics:</b> {{ metrics.endTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.executionTime }}ms |
-        {{ metrics.totalItemCount }} items
-      </div>
-      <div class="row mb-2">
-        <div class="col-md-12">
-          <label>Programmatically go to first/last page:</label>
-          <div class="btn-group" role="group">
-            <button class="btn btn-outline-secondary btn-xs btn-icon px-2" data-test="goto-first-page" (click)="goToFirstPage()">
-              <i class="mdi mdi-page-first"></i>
-            </button>
-            <button class="btn btn-outline-secondary btn-xs btn-icon px-2" data-test="goto-last-page" (click)="goToLastPage()">
-              <i class="mdi mdi-page-last"></i>
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-sm-7">
-      <div class="alert alert-info" data-test="alert-graphql-query">
-        <strong>GraphQL Query:</strong>
-        <div [innerHTML]="graphqlQuery" data-test="graphql-query-result"></div>
-      </div>
-    </div>
-  </div>
-
-  <hr />
-  <angular-slickgrid
-    gridId="grid6"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onGridStateChanged)="gridStateChanged($event.detail)"
-    (onBeforeGridDestroy)="saveCurrentGridState()"
-  >
-  </angular-slickgrid>
-</div>