angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/grid-custom-tooltip.component.ts

@@ -0,0 +1,483 @@
+import { Component, OnInit, ViewEncapsulation, } from '@angular/core';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import {
+  AngularGridInstance,
+  Column,
+  EditCommand,
+  Editors,
+  FieldType,
+  Filters,
+  Formatter,
+  Formatters,
+  GridOption,
+  MenuCommandItemCallbackArgs,
+  OperatorType,
+  SlickGrid,
+} from '../modules/angular-slickgrid';
+
+const NB_ITEMS = 500;
+
+@Component({
+  templateUrl: './grid-custom-tooltip.component.html',
+  styleUrls: ['./grid-custom-tooltip.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class GridCustomTooltipComponent implements OnInit {
+  title = 'Example 32: Regular & Custom Tooltips';
+  subTitle = `
+  This demo shows how to create Regular & Custom Tooltips (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Custom-Tooltip-(plugin)" target="_blank">Wiki docs</a>)
+  <br/>
+  <ul class="small">
+    <li>optionally parse regular [title] attributes and transform them into tooltips</li>
+    <li>create your own Custom Tooltip via a Custom Formatter</li>
+    <li>create an Async Custom Tooltip (Promise/Observable) to allowing fetching data from an API</li>
+    <li>optionally add Custom Tooltip on Column Header & Column Header-Row (filters)</li>
+  </ul>
+  `;
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  editCommandQueue: EditCommand[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  serverApiDelay = 500;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.initializeGrid();
+
+    // mock a dataset
+    this.dataset = this.loadData(NB_ITEMS);
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  initializeGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
+        editor: {
+          model: Editors.longText,
+          required: true,
+          alwaysSaveOnEnterKey: true,
+          minLength: 5,
+          maxLength: 255,
+        },
+        filterable: true,
+        customTooltip: {
+          position: 'right-align', // defaults to "auto"
+          // you can use the Custom Tooltip in 2 ways (synchronous or asynchronous)
+          // example 1 (sync):
+          // formatter: this.tooltipTaskFormatter,
+
+          // example 2 (async):
+          // when using async, the `formatter` will contain the loading spinner
+          // you will need to provide an `asyncPost` function returning a Promise and also `asyncPostFormatter` formatter to display the result once the Promise resolves
+          formatter: () => `<div><span class="fa fa-spinner fa-pulse fa-fw"></span> loading...</div>`,
+          asyncProcess: () => new Promise(resolve => {
+            setTimeout(() => resolve({ ratio: Math.random() * 10 / 10, lifespan: Math.random() * 100 }), this.serverApiDelay);
+          }),
+          asyncPostFormatter: this.tooltipTaskAsyncFormatter as Formatter,
+
+          // optional conditional usability callback
+          // usabilityOverride: (args) => !!(args.dataContext?.id % 2) // show it only every second row
+        },
+      },
+      {
+        id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
+        editor: {
+          model: Editors.float,
+          // required: true,
+          decimal: 2,
+          valueStep: 1,
+          maxValue: 10000,
+          alwaysSaveOnEnterKey: true,
+        },
+        formatter: (row, cell, value) => value > 1 ? `${value} days` : `${value} day`,
+        type: FieldType.number,
+      },
+      {
+        id: 'desc', name: `<span title='custom title tooltip text'>Description</span>`, field: 'description', width: 100, filterable: true,
+        editor: {
+          model: Editors.longText,
+          required: true,
+          alwaysSaveOnEnterKey: true,
+          minLength: 5,
+          maxLength: 255,
+        },
+        formatter: (row: number, cell: number, value: any, column: Column, dataContext) => `<span title="regular tooltip (from title attribute)\r${dataContext.title} cell value:\r${value || ''}">${value || ''}</span>`,
+        // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options)
+        customTooltip: {
+          useRegularTooltip: true, // note regular tooltip will try to find a "title" attribute in the cell formatter (it won't work without a cell formatter)
+        },
+      },
+      {
+        id: 'desc2', name: `<span title='custom title tooltip text'>Description 2</span>`, field: 'description', width: 100, filterable: true,
+        editor: {
+          model: Editors.longText,
+          required: true,
+          alwaysSaveOnEnterKey: true,
+          minLength: 5,
+          maxLength: 255,
+        },
+        formatter: (row: number, cell: number, value: any, column: Column, dataContext) => `<span title="regular tooltip (from title attribute)\r${dataContext.title} cell value:\r\r${value || ''}">${value || ''}</span>`,
+        // define tooltip options here OR for the entire grid via the grid options (cell tooltip options will have precedence over grid options)
+        customTooltip: {
+          useRegularTooltip: true, // note regular tooltip will try to find a "title" attribute in the cell formatter (it won't work without a cell formatter)
+          useRegularTooltipFromFormatterOnly: true,
+          // renderRegularTooltipAsHtml: true, // defaults to false, regular "title" tooltip won't be rendered as html unless specified via this flag (also "\r\n" will be replaced by <br>)
+          // maxWidth: 75,
+          // maxHeight: 30,
+        },
+      },
+      {
+        id: 'cost', name: '<span title="custom cost title tooltip text">Cost</span>', field: 'cost',
+        width: 90,
+        sortable: true,
+        filterable: true,
+        // filter: { model: Filters.compoundInput },
+        // formatter: Formatters.dollar,
+        formatter: Formatters.multiple,
+        // params: { formatters: [Formatters.dollar, (row, cell, value) => `<span title="regular tooltip, cost: ${value}">${value || ''}</span>`] },
+        params: { formatters: [Formatters.dollar, (_row: number, _cell: number, value: any) => `<span title="regular tooltip (from title attribute) -\rcell value:\n\n${value || ''}">${value || ''}</span>`] },
+        customTooltip: {
+          useRegularTooltip: true,
+          useRegularTooltipFromFormatterOnly: true,
+        },
+        type: FieldType.number,
+      },
+      {
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
+        editor: {
+          model: Editors.slider,
+          minValue: 0,
+          maxValue: 100,
+          // params: { hideSliderNumber: true },
+        },
+        formatter: Formatters.percentCompleteBar,
+        sortable: true, filterable: true,
+        filter: { model: Filters.slider, operator: '>=' },
+        customTooltip: { useRegularTooltip: true, },
+      },
+      {
+        id: 'start', name: 'Start', field: 'start', sortable: true,
+        // formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
+        filterable: true, filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+        editor: { model: Editors.date },
+        // we can delay a tooltip via the async process
+        customTooltip: {
+          // 1- loading formatter
+          formatter: () => ``, // return empty so it won't show any pre-tooltip
+
+          // 2- delay the opening by a simple Promise and `setTimeout`
+          asyncProcess: () => new Promise(resolve => {
+            setTimeout(() => resolve({}), this.serverApiDelay); // delayed by half a second
+          }),
+          asyncPostFormatter: this.tooltipFormatter.bind(this) as Formatter,
+        },
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish', sortable: true,
+        editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
+        // formatter: Formatters.dateIso,
+        type: FieldType.date, outputType: FieldType.dateIso,
+        formatter: Formatters.dateIso,
+        filterable: true, filter: { model: Filters.dateRange },
+        // you could disable the custom/regular tooltip via either of the following 2 options
+        disableTooltip: true,
+        // customTooltip: {
+        //   usabilityOverride: (args) => false,
+        // },
+      },
+      {
+        id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
+        width: 80, minWidth: 20, maxWidth: 100,
+        cssClass: 'cell-effort-driven',
+        sortable: true,
+        filterable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
+          model: Filters.singleSelect
+        },
+        exportWithFormatter: false,
+        formatter: Formatters.checkmarkMaterial,
+      },
+      {
+        id: 'prerequisites', name: 'Prerequisites', field: 'prerequisites', filterable: true,
+        formatter: (_row, _cell, value) => {
+          if (value && Array.isArray(value)) {
+            const values = value.map((val) => `Task ${val}`).join(', ');
+            return `<span title="${values}">${values}</span>`;
+          }
+          return '';
+        },
+        customTooltip: {
+          useRegularTooltip: true,
+          maxWidth: 500,
+        },
+        exportWithFormatter: true,
+        sanitizeDataExport: true,
+        minWidth: 100,
+        sortable: true,
+        type: FieldType.string,
+        editor: {
+          // OR 1- use "fetch client", they are both supported
+          // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
+
+          // OR 2- use a Promise
+          collectionAsync: new Promise<any>((resolve) => {
+            setTimeout(() => {
+              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })));
+            }, 500);
+          }),
+          customStructure: {
+            label: 'label',
+            value: 'value',
+            labelPrefix: 'prefix',
+          },
+          collectionOptions: {
+            separatorBetweenTextLabels: ' '
+          },
+          model: Editors.multipleSelect,
+        },
+        filter: {
+          // collectionAsync: fetch(URL_SAMPLE_COLLECTION_DATA),
+          collectionAsync: new Promise((resolve) => {
+            setTimeout(() => {
+              resolve(Array.from(Array(this.dataset.length).keys()).map(k => ({ value: k, label: `Task ${k}` })));
+            });
+          }),
+          customStructure: {
+            label: 'label',
+            value: 'value',
+            labelPrefix: 'prefix',
+          },
+          collectionOptions: {
+            separatorBetweenTextLabels: ' '
+          },
+          model: Filters.multipleSelect,
+          operator: OperatorType.inContains,
+        },
+      },
+      {
+        id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
+        formatter: () => `<div class="button-style margin-auto" style="width: 35px;"><span class="fa fa-chevron-down text-primary"></span></div>`,
+        excludeFromExport: true,
+        cellMenu: {
+          hideCloseButton: false,
+          commandTitle: 'Commands',
+          commandItems: [
+            // array of command item objects, you can also use the "positionOrder" that will be used to sort the items in the list
+            {
+              command: 'command2', title: 'Command 2', positionOrder: 62,
+              // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments
+              action: (_e, args) => {
+                console.log(args.dataContext, args.column);
+                // action callback.. do something
+              },
+              // only enable command when the task is not completed
+              itemUsabilityOverride: (args) => {
+                return !args.dataContext.completed;
+              }
+            },
+            { command: 'command1', title: 'Command 1', cssClass: 'orange', positionOrder: 61 },
+            {
+              command: 'delete-row', title: 'Delete Row', positionOrder: 64,
+              iconCssClass: 'mdi mdi-close', cssClass: 'red', textCssClass: 'bold',
+              // only show command to 'Delete Row' when the task is not completed
+              itemVisibilityOverride: (args) => {
+                return !args.dataContext.completed;
+              }
+            },
+            // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object)
+            // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified
+            { divider: true, command: '', positionOrder: 63 },
+            // 'divider',
+            {
+              command: 'help',
+              title: 'Help',
+              iconCssClass: 'mdi mdi-help-circle-outline',
+              positionOrder: 66,
+            },
+            { command: 'something', title: 'Disabled Command', disabled: true, positionOrder: 67, }
+          ],
+        }
+      },
+    ];
+
+    this.gridOptions = {
+      autoEdit: true, // true single click (false for double-click)
+      autoCommitEdit: true,
+      editable: true,
+      autoResize: {
+        container: '#demo-container',
+      },
+      enableAutoSizeColumns: true,
+      enableAutoResize: true,
+      enableCellNavigation: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true
+      },
+      // Custom Tooltip options can be defined in a Column or Grid Options or a mixed of both (first options found wins)
+      registerExternalResources: [new SlickCustomTooltip(), new ExcelExportService()],
+      customTooltip: {
+        formatter: this.tooltipFormatter.bind(this) as Formatter,
+        headerFormatter: this.headerFormatter,
+        headerRowFormatter: this.headerRowFormatter,
+        usabilityOverride: (args) => (args.cell !== 0 && args?.column?.id !== 'action'), // don't show on first/last columns
+        // hideArrow: true, // defaults to False
+      },
+      presets: {
+        filters: [{ columnId: 'prerequisites', searchTerms: [1, 3, 5, 7, 9, 12, 15, 18, 21, 25, 28, 29, 30, 32, 34] }],
+      },
+      rowHeight: 33,
+      enableFiltering: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: false
+      },
+      showCustomFooter: true,
+      enableCheckboxSelector: true,
+      enableRowSelection: true,
+      checkboxSelector: {
+        hideInFilterHeaderRow: false,
+        hideInColumnTitleRow: true,
+      },
+      editCommandHandler: (_item: any, _column: Column, editCommand: EditCommand) => {
+        this.editCommandQueue.push(editCommand);
+        editCommand.execute();
+      },
+      // when using the cellMenu, you can change some of the default options and all use some of the callback methods
+      enableCellMenu: true,
+      cellMenu: {
+        // all the Cell Menu callback methods (except the action callback)
+        // are available under the grid options as shown below
+        onCommand: (e, args) => this.executeCommand(e, args),
+        onOptionSelected: (_e, args) => {
+          // change "Completed" property with new option selected from the Cell Menu
+          const dataContext = args && args.dataContext;
+          if (dataContext && dataContext.hasOwnProperty('completed')) {
+            dataContext.completed = args.item.option;
+            this.angularGrid.gridService.updateItem(dataContext);
+          }
+        },
+      },
+    };
+  }
+
+  loadData(itemCount: number): any[] {
+    // mock a dataset
+    // mock data
+    const tmpArray = [];
+    for (let i = 0; i < itemCount; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 10);
+      const randomFinishYear = (new Date().getFullYear() - 3) + Math.floor(Math.random() * 10); // use only years not lower than 3 years ago
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor((Math.random() * 29));
+      const randomFinish = new Date(randomFinishYear, (randomMonth + 1), randomDay);
+
+      tmpArray[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100),
+        description: `This is a sample task description.\nIt can be multiline\r\rAnother line...`,
+        percentComplete: Math.floor(Math.random() * (100 - 5 + 1) + 5),
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: randomFinish < new Date() ? '' : randomFinish, // make sure the random date is earlier than today
+        cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
+        effortDriven: (i % 5 === 0),
+        prerequisites: (i % 2 === 0) && i !== 0 && i < 50 ? [i, i - 1] : [],
+      };
+    }
+
+    return tmpArray;
+  }
+
+  executeCommand(_e: Event, args: MenuCommandItemCallbackArgs) {
+    // const columnDef = args.column;
+    const command = args.command;
+    const dataContext = args.dataContext;
+
+    switch (command) {
+      case 'command1':
+        alert('Command 1');
+        break;
+      case 'command2':
+        alert('Command 2');
+        break;
+      case 'help':
+        alert('Please help!');
+        break;
+      case 'delete-row':
+        if (confirm(`Do you really want to delete row (${(args.row || 0) + 1}) with "${dataContext.title}"`)) {
+          this.angularGrid?.gridService.deleteItemById(dataContext.id);
+        }
+        break;
+    }
+  }
+
+  headerFormatter(row: number, cell: number, value: any, column: Column) {
+    const tooltipTitle = 'Custom Tooltip - Header';
+    return `<div class="header-tooltip-title">${tooltipTitle}</div>
+    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.name}</div></div>`;
+  }
+
+  headerRowFormatter(row: number, cell: number, value: any, column: Column) {
+    const tooltipTitle = 'Custom Tooltip - Header Row (filter)';
+    return `<div class="headerrow-tooltip-title">${tooltipTitle}</div>
+    <div class="tooltip-2cols-row"><div>Column:</div> <div>${column.field}</div></div>`;
+  }
+
+  tooltipFormatter(row: number, cell: number, value: any, column: Column, dataContext: any, grid: SlickGrid) {
+    const tooltipTitle = 'Custom Tooltip';
+    const effortDrivenHtml = Formatters.checkmarkMaterial(row, cell, dataContext.effortDriven, column, dataContext, grid);
+
+    return `<div class="header-tooltip-title">${tooltipTitle}</div>
+    <div class="tooltip-2cols-row"><div>Id:</div> <div>${dataContext.id}</div></div>
+    <div class="tooltip-2cols-row"><div>Title:</div> <div>${dataContext.title}</div></div>
+    <div class="tooltip-2cols-row"><div>Effort Driven:</div> <div>${effortDrivenHtml}</div></div>
+    <div class="tooltip-2cols-row"><div>Completion:</div> <div>${this.loadCompletionIcons(dataContext.percentComplete)}</div></div>
+    `;
+  }
+
+  tooltipTaskAsyncFormatter(row: number, cell: number, value: any, column: Column, dataContext: any, grid: SlickGrid) {
+    const tooltipTitle = `Task ${dataContext.id} - (async tooltip)`;
+
+    // use a 2nd Formatter to get the percent completion
+    // any properties provided from the `asyncPost` will end up in the `__params` property (unless a different prop name is provided via `asyncParamsPropName`)
+    const completionBar = Formatters.percentCompleteBarWithText(row, cell, dataContext.percentComplete, column, dataContext, grid);
+    const out = `<div class="color-sf-primary-dark header-tooltip-title">${tooltipTitle}</div>
+      <div class="tooltip-2cols-row"><div>Completion:</div> <div>${completionBar}</div></div>
+      <div class="tooltip-2cols-row"><div>Lifespan:</div> <div>${dataContext.__params.lifespan.toFixed(2)}</div></div>
+      <div class="tooltip-2cols-row"><div>Ratio:</div> <div>${dataContext.__params.ratio.toFixed(2)}</div></div>
+    `;
+    return out;
+  }
+
+  loadCompletionIcons(percentComplete: number) {
+    let output = '';
+    let iconCount = 0;
+    if (percentComplete > 5 && percentComplete < 25) {
+      iconCount = 1;
+    } else if (percentComplete >= 25 && percentComplete < 50) {
+      iconCount = 2;
+    } else if (percentComplete >= 50 && percentComplete < 75) {
+      iconCount = 3;
+    } else if (percentComplete >= 75 && percentComplete < 100) {
+      iconCount = 4;
+    } else if (percentComplete === 100) {
+      iconCount = 5;
+    }
+    for (let i = 0; i < iconCount; i++) {
+      const iconColor = iconCount === 5 ? 'text-success' : iconCount >= 3 ? 'text-warning' : 'text-secondary';
+      output += `<span class="fa fa-check-circle-o ${iconColor}"></span>`;
+    }
+    return output;
+  }
+}

package/src/app/examples/grid-draggrouping.component.html

@@ -0,0 +1,93 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-draggrouping.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <form class="form-inline">
+    <div class="row">
+      <div class="col-sm-12">
+        <button class="btn btn-outline-secondary btn-xs" data-test="add-500-rows-btn" (click)="loadData(500)">
+          500 rows
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="add-50k-rows-btn" (click)="loadData(50000)">
+          50k rows
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="clear-grouping-btn"
+                (click)="clearGroupsAndSelects()">
+          <i class="fa fa-times"></i> Clear grouping
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="collapse-all-btn" (click)="collapseAllGroups()">
+          <i class="fa fa-compress"></i> Collapse all groups
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="expand-all-btn" (click)="expandAllGroups()">
+          <i class="fa fa-expand"></i> Expand all groups
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" (click)="toggleDraggableGroupingRow()">
+          Toggle Draggable Grouping Row
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" (click)="exportToExcel()">
+          <i class="fa fa-file-excel-o text-success"></i> Export to Excel
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12">
+        <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-sort-value-btn"
+                (click)="groupByDurationOrderByCount(false)">
+          Group by duration &amp; sort groups by value
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-sort-count-btn"
+                (click)="groupByDurationOrderByCount(true)">
+          Group by duration &amp; sort groups by count
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-effort-btn"
+                (click)="groupByDurationEffortDriven()">
+          Group by Duration &amp; then Effort-Driven
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="set-dynamic-filter"
+                (click)="setFiltersDynamically()">
+          Set Filters Dynamically
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="set-dynamic-sorting"
+                (click)="setSortingDynamically()">
+          Set Sorting Dynamically
+        </button>
+      </div>
+    </div>
+    <div class="row mt-2">
+      <div class="col-sm-12">
+        <div class="form-row">
+          <div class="row form-group">
+            <label for="field1" class="col-sm-3 mb-2">Group by field(s)</label>
+            <div class="form-group col-md-3"
+                 *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn">
+              <select class="form-select" name="groupField{{i}}" [(ngModel)]="selectedGroupingFields[i]"
+                      (ngModelChange)="groupByFieldName($event, i)">
+                <option value=""></option>
+                <option [ngValue]="field.id" *ngFor="let field of columnDefinitions">{{field.name}}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  <div class="row mt-1 mb-1">
+    <hr />
+  </div>
+
+  <angular-slickgrid gridId="grid19"
+                     [dataset]="dataset"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     (onAngularGridCreated)="angularGridReady($event.detail)">
+  </angular-slickgrid>
+</div>