angular-slickgrid 4.2.0 → 4.2.3

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

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

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