angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,111 @@
+<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

@@ -0,0 +1,323 @@
+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

@@ -0,0 +1,120 @@
+<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>