angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,117 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-import { AngularGridInstance, Column, GridOption, Filters } from '../../library';
-
-const URL_CUSTOMERS = 'assets/data/customers_100.json';
-
-@Component({
-  templateUrl: './example22.component.html',
-  standalone: false,
-})
-export class Example22Component implements OnInit {
-  angularGrid2!: AngularGridInstance;
-  columnDefinitions1!: Column[];
-  columnDefinitions2!: Column[];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1!: any[];
-  dataset2!: any[];
-
-  constructor(private http: HttpClient) {}
-
-  angularGrid2Ready(angularGrid: AngularGridInstance) {
-    this.angularGrid2 = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.defineGrid1();
-    this.defineGrid2();
-
-    // mock some data (different in each dataset)
-    this.dataset1 = this.mockData();
-
-    // load data with Http-Client
-    this.http.get(URL_CUSTOMERS).subscribe(((data: any[]) => (this.dataset2 = data)) as any);
-  }
-
-  // Grid2 definition
-  defineGrid1() {
-    this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
-      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
-      { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
-      { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 },
-    ];
-    this.gridOptions1 = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableSorting: true,
-    };
-  }
-
-  // Grid2 definition
-  defineGrid2() {
-    this.columnDefinitions2 = [
-      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true },
-      {
-        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 },
-    ];
-
-    this.gridOptions2 = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableFiltering: true,
-      enableSorting: true,
-    };
-  }
-
-  mockData() {
-    // mock a dataset
-    const mockDataset = [];
-    for (let i = 0; i < 1000; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor(Math.random() * 29);
-      const randomPercent = Math.round(Math.random() * 100);
-
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        start: `${randomMonth}/${randomDay}/${randomYear}`,
-        finish: `${randomMonth}/${randomDay}/${randomYear}`,
-        effortDriven: i % 5 === 0,
-      };
-    }
-
-    return mockDataset;
-  }
-
-  resizeGrid2() {
-    this.angularGrid2.resizerService.resizeGrid(10);
-  }
-}

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

@@ -1,111 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 23: Filtering from Range of Search Values
-    <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-range.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    This demo shows how to use Filters with Range of Search Values (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/filters/range-filters"
-      target="_blank"
-      >Wiki docs</a
-    >)
-    <br />
-    <ul class="small">
-      <li>All input filters support the following operators: (>, >=, <, <=, <>, !=, =, ==, *) and now also the (..) for an input range</li>
-      <li>
-        All filters (which support ranges) can be defined via the 2 dots (..) which represents a range, this also works for dates and slider
-        in the "presets"
-      </li>
-      <ul>
-        <li>For a numeric range defined in an input filter (must be of type text), you can use 2 dots (..) to represent a range</li>
-        <li>example: typing "10..90" will filter values between 10 and 90 (but excluding the number 10 and 90)</li>
-      </ul>
-      <ul>
-        <li>note that the examples shown below for the operator, are case sensitive</li>
-        <li>
-          by default the range is inclusive which would be the same as defining the filter options to "operator: 'RangeInclusive'" or
-          "operator: OperatoryType.rangeInclusive"
-        </li>
-        <li>
-          you can also set the inverse (exclusive) by defining the filter options to "operator: 'RangeExclusive'" or "operator:
-          OperatoryType.rangeExclusive"
-        </li>
-      </ul>
-      <li>
-        Date Range with Vanilla Calendar Date Picker, they will also use the locale, choose a start date then drag or click on the end date
-      </li>
-    </ul>
-  </div>
-
-  <br />
-
-  <span *ngIf="metrics" style="margin-right: 10px">
-    <b>Metrics:</b> {{ metrics.startTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.itemCount }} of
-    {{ metrics.totalItemCount }} items
-  </span>
-
-  <form class="row row-cols-lg-auto g-1 align-items-center">
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-filters" (click)="clearFilters()">Clear Filters</button>
-    </div>
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-sorting" (click)="angularGrid.sortService.clearSorting()">
-        Clear Sorting
-      </button>
-    </div>
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
-        Set Filters Dynamically
-      </button>
-    </div>
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-        Set Sorting Dynamically
-      </button>
-    </div>
-    <div class="col">
-      <label for="selectedFilter" style="margin-left: 10px">Predefined Filters</label>
-    </div>
-    <div class="col">
-      <select
-        name="selectedFilter"
-        class="form-select"
-        [(ngModel)]="selectedPredefinedFilter"
-        data-test="select-dynamic-filter"
-        (ngModelChange)="usePredefinedFilter($event)"
-      >
-        <option [ngValue]="filter.value" *ngFor="let filter of filterList">{{ filter.label }}</option>
-      </select>
-    </div>
-  </form>
-
-  <div class="row mt-2">
-    <div class="col">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="language" (click)="switchLanguage()">
-        <i class="mdi mdi-translate"></i>
-        Switch Language
-      </button>
-      <b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{ selectedLanguage + '.json' }}</span>
-    </div>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid23"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onGridStateChanged)="gridStateChanged($event.detail)"
-    (onBeforeGridDestroy)="saveCurrentGridState()"
-    (onRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,323 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { CustomInputFilter } from './custom-inputFilter';
-import {
-  AngularGridInstance,
-  Column,
-  Filters,
-  Formatter,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  Metrics,
-  type MultipleSelectOption,
-  OperatorType,
-  SliderRangeOption,
-  unsubscribeAllObservables,
-} from '../../library';
-import { addDay, format } from '@formkit/tempo';
-import { Subscription } from 'rxjs';
-
-const NB_ITEMS = 1500;
-
-function randomBetween(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-// create a custom translate Formatter (typically you would move that a separate file, for separation of concerns)
-const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const gridOptions = grid.getOptions() as GridOption;
-  const translate = gridOptions.i18n as TranslateService;
-
-  return translate.instant('TASK_X', { x: value });
-};
-
-@Component({
-  templateUrl: './example23.component.html',
-  standalone: false,
-})
-export class Example23Component implements OnInit, OnDestroy {
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-  metrics!: Metrics;
-  filterList = [
-    { value: '', label: '' },
-    { value: 'currentYearTasks', label: 'Current Year Completed Tasks' },
-    { value: 'nextYearTasks', label: 'Next Year Active Tasks' },
-  ];
-  selectedPredefinedFilter!: { value: string; label: string };
-
-  constructor(private translate: TranslateService) {
-    // always start with English for Cypress E2E tests to be consistent
-    const defaultLang = 'en';
-    this.translate.use(defaultLang);
-    this.selectedLanguage = defaultLang;
-  }
-
-  ngOnDestroy() {
-    // also unsubscribe all Angular Subscriptions
-    unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'id',
-        nameKey: 'TITLE',
-        minWidth: 100,
-        formatter: taskTranslateFormatter,
-        sortable: true,
-        filterable: true,
-        params: { useFormatterOuputToFilter: true },
-      },
-      {
-        id: 'description',
-        name: 'Description',
-        field: 'description',
-        filterable: true,
-        sortable: true,
-        minWidth: 80,
-        filter: {
-          model: CustomInputFilter, // create a new instance to make each Filter independent from each other
-          enableTrimWhiteSpace: true, // or use global "enableFilterTrimWhiteSpace" to trim on all Filters
-        },
-      },
-      {
-        id: 'percentComplete',
-        name: '% Complete',
-        field: 'percentComplete',
-        nameKey: 'PERCENT_COMPLETE',
-        minWidth: 120,
-        sortable: true,
-        customTooltip: { position: 'center' },
-        formatter: Formatters.progressBar,
-        type: 'number',
-        filterable: true,
-        filter: {
-          model: Filters.sliderRange,
-          maxValue: 100, // or you can use the options as well
-          operator: OperatorType.rangeInclusive, // defaults to inclusive
-          options: {
-            hideSliderNumbers: false, // you can hide/show the slider numbers on both side
-            min: 0,
-            step: 5,
-          } as SliderRangeOption,
-        },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        nameKey: 'START',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        minWidth: 75,
-        width: 100,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        nameKey: 'FINISH',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        minWidth: 75,
-        width: 120,
-        exportWithFormatter: true,
-        type: 'date',
-        filterable: true,
-        filter: {
-          model: Filters.dateRange,
-        },
-      },
-      {
-        id: 'duration',
-        field: 'duration',
-        nameKey: 'DURATION',
-        maxWidth: 90,
-        type: 'number',
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.input,
-          operator: OperatorType.rangeExclusive, // defaults to inclusive
-        },
-      },
-      {
-        id: 'completed',
-        name: 'Completed',
-        field: 'completed',
-        nameKey: 'COMPLETED',
-        minWidth: 85,
-        maxWidth: 90,
-        formatter: Formatters.checkmarkMaterial,
-        exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options
-        filterable: true,
-        filter: {
-          collection: [
-            { value: '', label: '' },
-            { value: true, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          model: Filters.singleSelect,
-          options: { autoAdjustDropHeight: true } as MultipleSelectOption,
-        },
-      },
-    ];
-
-    const today = new Date();
-    const presetLowestDay = format(addDay(new Date(), -2), 'YYYY-MM-DD');
-    const presetHighestDay = format(addDay(new Date(), today.getDate() < 14 ? 28 : 25), 'YYYY-MM-DD');
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      // enableFilterTrimWhiteSpace: true,
-      enableTranslate: true,
-      i18n: this.translate,
-
-      // use columnDef searchTerms OR use presets as shown below
-      presets: {
-        filters: [
-          //  you can use the 2 dots separator on all Filters which support ranges
-          { columnId: 'duration', searchTerms: ['4..88'] },
-          // { columnId: 'percentComplete', searchTerms: ['5..80'] }, // without operator will default to 'RangeExclusive'
-          // { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [`${presetLowestDay}..${presetHighestDay}`] },
-
-          // or you could also use 2 searchTerms values, instead of using the 2 dots (only works with SliderRange & DateRange Filters)
-          // BUT make sure to provide the operator, else the filter service won't know that this is really a range
-          { columnId: 'percentComplete', operator: 'RangeInclusive', searchTerms: [5, 80] }, // same result with searchTerms: ['5..80']
-          { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [presetLowestDay, presetHighestDay] },
-        ],
-        sorters: [
-          { columnId: 'percentComplete', direction: 'DESC' },
-          { columnId: 'duration', direction: 'ASC' },
-        ],
-      },
-      externalResources: [new SlickCustomTooltip(), new ExcelExportService()],
-    };
-
-    // mock a dataset
-    this.dataset = this.mockData(NB_ITEMS);
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  mockData(itemCount: number, startingIndex = 0): any[] {
-    // mock a dataset
-    const tempDataset = [];
-    for (let i = startingIndex; i < startingIndex + itemCount; i++) {
-      const randomDuration = randomBetween(0, 365);
-      const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1);
-      const randomMonth = randomBetween(0, 12);
-      const randomDay = randomBetween(10, 28);
-      const randomPercent = randomBetween(0, 100);
-
-      tempDataset.push({
-        id: i,
-        title: 'Task ' + i,
-        description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field
-        duration: randomDuration,
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format
-        finish: new Date(randomYear, randomMonth, randomDay),
-        completed: randomPercent === 100 ? true : false,
-      });
-    }
-
-    return tempDataset;
-  }
-
-  clearFilters() {
-    this.selectedPredefinedFilter = { value: '', label: '' };
-    this.angularGrid.filterService.clearFilters();
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridState: GridStateChange) {
-    console.log('Client sample, Grid State changed:: ', gridState);
-  }
-
-  /** Save current Filters, Sorters in LocaleStorage or DB */
-  saveCurrentGridState() {
-    console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
-  }
-
-  refreshMetrics(_e: Event, args: any) {
-    if (args && args.current >= 0) {
-      setTimeout(() => {
-        this.metrics = {
-          startTime: new Date(),
-          itemCount: (args && args.current) || 0,
-          totalItemCount: this.dataset.length || 0,
-        };
-      });
-    }
-  }
-
-  setFiltersDynamically() {
-    const presetLowestDay = format(addDay(new Date(), -5), 'YYYY-MM-DD');
-    const presetHighestDay = format(addDay(new Date(), 25), 'YYYY-MM-DD');
-
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      { columnId: 'duration', searchTerms: ['14..78'], operator: 'RangeInclusive' },
-      { columnId: 'percentComplete', operator: 'RangeExclusive', searchTerms: [15, 85] },
-      { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [presetLowestDay, presetHighestDay] },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'finish', direction: 'DESC' },
-      { columnId: 'percentComplete', direction: 'ASC' },
-    ]);
-  }
-
-  usePredefinedFilter(filterValue: string) {
-    let filters: any[] = [];
-    const currentYear = new Date().getFullYear();
-
-    switch (filterValue) {
-      case 'currentYearTasks':
-        filters = [
-          { columnId: 'finish', operator: OperatorType.rangeInclusive, searchTerms: [`${currentYear}-01-01`, `${currentYear}-12-31`] },
-          { columnId: 'completed', operator: OperatorType.equal, searchTerms: [true] },
-        ];
-        break;
-      case 'nextYearTasks':
-        filters = [{ columnId: 'start', operator: '>=', searchTerms: [`${currentYear + 1}-01-01`] }];
-        break;
-    }
-    this.angularGrid.filterService.updateFilters(filters);
-  }
-
-  switchLanguage() {
-    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

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

@@ -1,120 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 24: Cell Menu & Context Menu Plugins
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span>Toggle Dark Mode</span>
-    </button>
-    <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-contextmenu.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    Add Cell Menu and Context Menu
-    <ul>
-      <li>This example demonstrates 2 SlickGrid plugins</li>
-      <ol>
-        <li>
-          Using the <b>Slick.Plugins.CellMenu</b> plugin, often used for an Action Menu(s), 1 or more per grid (<a
-            href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/cell-menu"
-            target="_blank"
-            >Wiki docs</a
-          >).
-        </li>
-        <li>
-          Using the <b>Slick.Plugins.ContextMenu</b> plugin, shown after a mouse right+click, only 1 per grid. (<a
-            href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/context-menu"
-            target="_blank"
-            >Wiki docs</a
-          >).
-        </li>
-      </ol>
-      <li>It will also "autoAdjustDrop" (bottom/top) and "autoAlignSide" (left/right) by default but could be turned off</li>
-      <li>
-        Both plugins have 2 sections, 1st section can have an array of Options (to change value of a field) and 2nd section an array of
-        Commands (execute a command)
-      </li>
-      <li>There are 2 ways to execute a Command/Option</li>
-      <ol>
-        <li>via onCommand/onOptionSelected (use a switch/case to parse command/option and do something with it)</li>
-        <li>via action callback (that can be defined on each command/option)</li>
-      </ol>
-      <li>
-        Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list
-      </li>
-      <ol>
-        <li>These callbacks are: "menuUsabilityOverride", "itemVisibilityOverride", "itemUsabilityOverride"</li>
-        <li>... e.g. in the demo, the "Action" Cell Menu is only available when Priority is set to "High" via "menuUsabilityOverride"</li>
-        <li>... e.g. in the demo, the Context Menu is only available on the first 20 Tasks via "menuUsabilityOverride"</li>
-      </ol>
-    </ul>
-  </div>
-
-  <div class="row mb-1">
-    <div class="col-12">
-      <span class="context-menu">
-        <strong>Context Menu:</strong>
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          (click)="showContextCommandsAndOptions(false)"
-          data-test="context-menu-priority-only-button"
-        >
-          Show Priority Options Only
-        </button>
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          (click)="showContextCommandsAndOptions(true)"
-          data-test="context-menu-commands-and-priority-button"
-        >
-          Show Commands & Priority Options
-        </button>
-      </span>
-
-      <span class="cell-menu">
-        <strong>Cell Menu:</strong>
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          (click)="showCellMenuCommandsAndOptions(false)"
-          data-test="cell-menu-commands-and-options-false-button"
-        >
-          Show Action Commands Only
-        </button>
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          (click)="showCellMenuCommandsAndOptions(true)"
-          data-test="cell-menu-commands-and-options-true-button"
-        >
-          Show Actions Commands & Completed Options
-        </button>
-      </span>
-    </div>
-  </div>
-  <div class="row locale">
-    <div class="col-12">
-      <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="switchLanguage()" data-test="language-button">
-        <i class="mdi mdi-translate"></i>
-        Switch Language
-      </button>
-      <b>Locale:</b>
-      <span style="font-style: italic" data-test="selected-locale">
-        {{ selectedLanguage + '.json' }}
-      </span>
-    </div>
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid
-      gridId="grid24"
-      [columns]="columnDefinitions"
-      [options]="gridOptions"
-      [dataset]="dataset"
-      (onAngularGridCreated)="angularGridReady($event.detail)"
-    >
-    </angular-slickgrid>
-  </div>
-</div>