angular-slickgrid 4.2.0 → 4.2.3

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

@@ -1,35 +0,0 @@
-<div 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-rowdetail.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="col-sm-6">
-    <button class="btn btn-outline-secondary btn-sm" (click)="closeAllRowDetail()" data-test="close-all-btn">
-      Close All Row Details
-    </button>
-    &nbsp;&nbsp;
-    <label for="">Detail View Rows Shown: </label>
-    <input type="number" [(ngModel)]="detailViewRowCount">
-    <button class="btn btn-outline-secondary btn-xs" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
-      Set
-    </button>
-  </div>
-  <div class="alert alert-{{flashAlertType}} col-sm-6" *ngIf="message" data-test="flash-msg">{{message}}</div>
-
-  <hr />
-
-  <angular-slickgrid gridId="grid21"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onAngularGridCreated)="angularGridReady($event.detail)">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-rowdetail.component.ts

@@ -1,205 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import {
-  AngularGridInstance,
-  Column,
-  ExtensionList,
-  FieldType,
-  Filters,
-  Formatters,
-  GridOption,
-  SlickRowDetailView
-} from './../modules/angular-slickgrid';
-import { RowDetailViewComponent } from './rowdetail-view.component';
-import { RowDetailPreloadComponent } from './rowdetail-preload.component';
-
-const NB_ITEMS = 500;
-
-@Component({
-  templateUrl: './grid-rowdetail.component.html'
-})
-export class GridRowDetailComponent implements OnInit {
-  title = 'Example 21: Row Detail View';
-  subTitle = `
-    Add functionality to show extra information with a Row Detail View, (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Detail" target="_blank">Wiki docs</a>)
-    <ul>
-      <li>Click on the row "+" icon or anywhere on the row to open it (the latter can be changed via property "useRowClick: false")</li>
-      <li>Pass a View/Model as a Template to the Row Detail</li>
-      <li>You can use "expandableOverride()" callback to override logic to display expand icon on every row (for example only show it every 2nd row)</li>
-    </ul>
-  `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  detailViewRowCount = 9;
-  message = '';
-  flashAlertType = 'info';
-
-  constructor() { }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  get rowDetailInstance(): SlickRowDetailView {
-    // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways
-
-    // option 1
-    return (this.angularGrid.extensions.rowDetailView.instance || {});
-
-    // OR option 2
-    // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {};
-  }
-
-  ngOnInit(): void {
-    this.defineGrid();
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid() {
-    // prepare a multiple-select array to filter with
-    const multiSelectFilterArray = [];
-    for (let i = 0; i < NB_ITEMS; i++) {
-      multiSelectFilterArray.push({ value: i, label: i });
-    }
-
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
-      { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' } },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
-      {
-        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
-        minWidth: 100,
-        formatter: Formatters.checkmark, type: FieldType.boolean,
-        filterable: true, sortable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableFiltering: true,
-      enableRowDetailView: true,
-      rowSelectionOptions: {
-        selectActiveRow: true
-      },
-      datasetIdPropertyName: 'rowId', // optionally use a different "id"
-      rowDetailView: {
-        // optionally change the column index position of the icon (defaults to 0)
-        // columnIndexPosition: 1,
-
-        // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
-        process: (item) => this.simulateServerAsyncCall(item),
-        // process: (item) => this.http.get(`api/item/${item.id}`),
-
-        // load only once and reuse the same item detail without calling process method
-        loadOnce: true,
-
-        // limit expanded row to only 1 at a time
-        singleRowExpand: false,
-
-        // false by default, clicking anywhere on the row will open the detail view
-        // when set to false, only the "+" icon would open the row detail
-        // if you use editor or cell navigation you would want this flag set to false (default)
-        useRowClick: true,
-
-        // how many grid rows do we want to use for the row detail panel (this is only set once and will be used for all row detail)
-        // also note that the detail view adds an extra 1 row for padding purposes
-        // so if you choose 4 panelRows, the display will in fact use 5 rows
-        panelRows: this.detailViewRowCount,
-
-        // you can override the logic for showing (or not) the expand icon
-        // for example, display the expand icon only on every 2nd row
-        // expandableOverride: (row: number, dataContext: any) => (dataContext.rowId % 2 === 1),
-
-        // Preload View Component
-        preloadComponent: RowDetailPreloadComponent,
-
-        // View Component to load when row detail data is ready
-        viewComponent: RowDetailViewComponent,
-
-        // Optionally pass your Parent Component reference to your Child Component (row detail component)
-        parent: this
-      }
-    };
-
-    this.getData();
-  }
-
-  getData() {
-    // mock a dataset
-    this.dataset = [];
-    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);
-
-      this.dataset[i] = {
-        rowId: i,
-        title: 'Task ' + i,
-        duration: (i % 33 === 0) ? null : Math.random() * 100 + '',
-        percentComplete: randomPercent,
-        percentComplete2: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
-        effortDriven: (i % 5 === 0)
-      };
-    }
-  }
-
-  changeDetailViewRowCount() {
-    if (this.angularGrid && this.angularGrid.extensionService) {
-      const options = this.rowDetailInstance.getOptions();
-      if (options && options.panelRows) {
-        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
-        this.rowDetailInstance.setOptions(options);
-      }
-    }
-  }
-
-  closeAllRowDetail() {
-    if (this.angularGrid && this.angularGrid.extensionService) {
-      this.rowDetailInstance.collapseAll();
-    }
-  }
-
-  showFlashMessage(message: string, alertType = 'info') {
-    this.message = message;
-    this.flashAlertType = alertType;
-  }
-
-  /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
-  simulateServerAsyncCall(item: any) {
-    // random set of names to use for more item detail
-    const randomNames = ['John Doe', 'Jane Doe', 'Chuck Norris', 'Bumblebee', 'Jackie Chan', 'Elvis Presley', 'Bob Marley', 'Mohammed Ali', 'Bruce Lee', 'Rocky Balboa'];
-
-    // fill the template on async delay
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const itemDetail = item;
-
-        // let's add some extra properties to our item for a better async simulation
-        itemDetail.assignee = randomNames[this.randomNumber(0, 10)];
-        itemDetail.reporter = randomNames[this.randomNumber(0, 10)];
-
-        // resolve the data after delay specified
-        resolve(itemDetail);
-      }, 1000);
-    });
-  }
-
-  private randomNumber(min: number, max: number) {
-    return Math.floor(Math.random() * (max - min + 1) + min);
-  }
-}

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

@@ -1,49 +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-rowmove.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="row mb-2">
-    <div class="col-sm-12">
-      <button class="btn btn-outline-secondary btn-sm" data-test="hide-duration-btn"
-              (click)="hideDurationColumnDynamically()">
-        <i class="fa fa-eye-slash"></i>
-        Dynamically Hide "Duration"
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="disable-filters-btn" (click)="disableFilters()">
-        <i class="fa fa-times"></i>
-        Disable Filters
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="disable-sorting-btn" (click)="disableSorting()">
-        <i class="fa fa-times"></i>
-        Disable Sorting
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="toggle-filtering-btn" (click)="toggleFilter()">
-        <i class="fa fa-random"></i>
-        Toggle Filtering
-      </button>
-      <button class="btn btn-outline-secondary btn-sm" data-test="toggle-sorting-btn" (click)="toggleSorting()">
-        <i class="fa fa-random"></i>
-        Toggle Sorting
-      </button>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-sm-12">
-      <angular-slickgrid gridId="grid17"
-                         [columnDefinitions]="columnDefinitions"
-                         [gridOptions]="gridOptions"
-                         [dataset]="dataset"
-                         (onAngularGridCreated)="angularGridReady($event.detail)">
-      </angular-slickgrid>
-    </div>
-  </div>
-</div>

package/src/app/examples/grid-rowmove.component.ts

@@ -1,234 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { AngularGridInstance, Column, ExtensionName, Filters, Formatters, GridOption, SlickRowMoveManager } from './../modules/angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-rowmove.component.html'
-})
-export class GridRowMoveComponent implements OnInit {
-  title = 'Example 17: Row Move & Checkbox Selector';
-  subTitle = `This example demonstrates using the <b>Slick.Plugins.RowMoveManager</b> plugin to easily move a row in the grid.<br/>
-    <ul>
-      <li>Click to select, Ctrl+Click to toggle selection, Shift+Click to select a range.</li>
-      <li>Drag one or more rows by the handle (icon) to reorder</li>
-      <li>If you plan to use Row Selection + Row Move, then use "singleRowMove: true" and "disableRowSelection: true"</li>
-      <li>You can change "columnIndexPosition" to move the icon position of any extension (RowMove, RowDetail or RowSelector icon)</li>
-      <ul>
-        <li>You will also want to enable the DataView "syncGridSelection: true" to keep row selection even after a row move</li>
-      </ul>
-      <li>If you plan to use only Row Move, then you could keep default values (or omit them completely) of "singleRowMove: false" and "disableRowSelection: false"</li>
-      <ul>
-        <li>SingleRowMove has the name suggest will only move 1 row at a time, by default it will move any row(s) that are selected unless you disable the flag</li>
-      </ul>
-    </ul>
-  `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  get rowMoveInstance() {
-    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.rowMoveManager) ?? {};
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', filterable: true, },
-      { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true },
-      { id: '%', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true },
-      {
-        id: 'start', name: 'Start', field: 'start', filterable: true, sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        filterable: true, sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven', name: 'Completed', field: 'effortDriven',
-        formatter: Formatters.checkmark,
-        filterable: true, sortable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
-        },
-      }
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableCellNavigation: true,
-      enableFiltering: true,
-      enableCheckboxSelector: true,
-      checkboxSelector: {
-        columnIndexPosition: 1,
-
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true
-      },
-      enableRowSelection: true,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: false
-      },
-      dataView: {
-        syncGridSelection: true, // enable this flag so that the row selection follows the row even if we move it to another position
-      },
-      enableRowMoveManager: true,
-      rowMoveManager: {
-        // when using Row Move + Row Selection, you want to move only a single row and we will enable the following flags so it doesn't cancel row selection
-        singleRowMove: true,
-        disableRowSelection: true,
-        cancelEditOnDrag: true,
-        hideRowMoveShadow: false,
-        width: 30,
-        onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
-        onMoveRows: this.onMoveRows.bind(this),
-
-        // you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
-        // note that you might have to play with the position when using multiple extension
-        // since it really depends on which extension get created first to know what their real position are
-        columnIndexPosition: 0,
-
-        // you can also override the usability of the rows, for example make every 2nd row the only moveable rows,
-        // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
-      },
-      showCustomFooter: true,
-      presets: {
-        // you can presets row selection here as well, you can choose 1 of the following 2 ways of setting the selection
-        // by their index position in the grid (UI) or by the object IDs, the default is "dataContextIds" and if provided it will use it and disregard "gridRowIndexes"
-        // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page
-        rowSelection: {
-          // gridRowIndexes: [2],       // the row position of what you see on the screen (UI)
-          dataContextIds: [1, 2, 6, 7]  // (recommended) select by your data object IDs
-        }
-      },
-    };
-
-    this.getData();
-  }
-
-  getData() {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 25) + ' days',
-        percentComplete: Math.round(Math.random() * 100),
-        start: '01/01/2009',
-        finish: '01/05/2009',
-        effortDriven: (i % 5 === 0)
-      };
-    }
-    this.dataset = mockDataset;
-  }
-
-  onBeforeMoveRow(e: Event, data: { rows: number[]; insertBefore: number; }) {
-    for (const rowIdx of data.rows) {
-      // no point in moving before or after itself
-      if (rowIdx === data.insertBefore || (rowIdx === data.insertBefore - 1 && ((data.insertBefore - 1) !== this.angularGrid.dataView.getItemCount()))) {
-        e.stopPropagation();
-        return false;
-      }
-    }
-    return true;
-  }
-
-  onMoveRows(_e: Event, args: any) {
-    // rows and insertBefore references,
-    // note that these references are assuming that the dataset isn't filtered at all
-    // which is not always the case so we will recalcualte them and we won't use these reference afterward
-    const rows = args.rows as number[];
-    const insertBefore = args.insertBefore;
-    const extractedRows = [];
-
-    // when moving rows, we need to cancel any sorting that might happen
-    // we can do this by providing an undefined sort comparer
-    // which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
-    this.angularGrid.dataView.sort(undefined as any, true);
-
-    // the dataset might be filtered/sorted,
-    // so we need to get the same dataset as the one that the SlickGrid DataView uses
-    const tmpDataset = this.angularGrid.dataView.getItems();
-    const filteredItems = this.angularGrid.dataView.getFilteredItems();
-
-    const itemOnRight = this.angularGrid.dataView.getItem(insertBefore);
-    const insertBeforeFilteredIdx = itemOnRight ? this.angularGrid.dataView.getIdxById(itemOnRight.id) : this.angularGrid.dataView.getItemCount();
-
-    const filteredRowItems: any[] = [];
-    rows.forEach(row => filteredRowItems.push(filteredItems[row]));
-    const filteredRows = filteredRowItems.map(item => this.angularGrid.dataView.getIdxById(item.id));
-
-    const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
-    const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
-
-    // convert into a final new dataset that has the new order
-    // we need to resort with
-    rows.sort((a: number, b: number) => a - b);
-    for (const filteredRow of filteredRows) {
-      if (filteredRow !== undefined) {
-        extractedRows.push(tmpDataset[filteredRow]);
-      }
-    }
-    filteredRows.reverse();
-    for (const row of filteredRows) {
-      if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
-        if (row < insertBeforeFilteredIdx) {
-          left.splice(row, 1);
-        } else {
-          right.splice(row - insertBeforeFilteredIdx, 1);
-        }
-      }
-    }
-
-    // final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
-    const finalDataset = left.concat(extractedRows.concat(right));
-    this.dataset = finalDataset; // update dataset and re-render the grid
-  }
-
-  hideDurationColumnDynamically() {
-    // -- you can hide by one Id or multiple Ids:
-    // hideColumnById(id, options), hideColumnByIds([ids], options)
-    // you can also provide options, defaults are: { autoResizeColumns: true, triggerEvent: true, hideFromColumnPicker: false, hideFromGridMenu: false }
-
-    this.angularGrid.gridService.hideColumnById('duration');
-
-    // or with multiple Ids and extra options
-    // this.angularGrid.gridService.hideColumnByIds(['duration', 'finish'], { hideFromColumnPicker: true, hideFromGridMenu: false });
-  }
-
-  // Disable/Enable Filtering/Sorting functionalities
-  // --------------------------------------------------
-
-  disableFilters() {
-    this.angularGrid.filterService.disableFilterFunctionality(true);
-  }
-
-  disableSorting() {
-    this.angularGrid.sortService.disableSortFunctionality(true);
-  }
-
-  // or Toggle Filtering/Sorting functionalities
-  // ---------------------------------------------
-
-  toggleFilter() {
-    this.angularGrid.filterService.toggleFilterFunctionality();
-  }
-
-  toggleSorting() {
-    this.angularGrid.sortService.toggleSortFunctionality();
-  }
-}

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

@@ -1,76 +0,0 @@
-<div 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-rowselection.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="row">
-    <div class="col-sm-4" style="max-width: 170px;">
-      Pagination
-      <button class="btn btn-outline-secondary btn-xs" data-test="goto-first-page"
-              (click)="goToGrid1FirstPage()">
-        <i class="fa fa-caret-left fa-lg"></i>
-      </button>
-      <button class="btn btn-outline-secondary btn-xs" data-test="goto-last-page" (click)="goToGrid1LastPage()">
-        <i class="fa fa-caret-right fa-lg"></i>
-      </button>
-    </div>
-    <div class="col-sm-8">
-      <div class="alert alert-success">
-        <strong>(single select) Selected Row:</strong>
-        <span [innerHTML]="selectedTitle" data-test="grid1-selections"></span>
-      </div>
-    </div>
-  </div>
-
-  <div class="overflow-hidden">
-    <angular-slickgrid gridId="grid1"
-                       [columnDefinitions]="columnDefinitions1"
-                       [gridOptions]="gridOptions1"
-                       [dataset]="dataset1"
-                       (onAngularGridCreated)="angularGridReady1($event.detail)"
-                       (onGridStateChanged)="grid1StateChanged($event.detail)"
-                       (onSelectedRowsChanged)="handleSelectedRowsChanged1($event.detail.eventData, $event.detail.args)">
-    </angular-slickgrid>
-  </div>
-
-  <hr class="col-md-6 offset-md-1">
-
-  <div class="row">
-    <div class="col-sm-4 col-md-3" style="max-width: 185px;">
-      Pagination: <input type="checkbox" (change)="togglePaginationGrid2()" [checked]="isGrid2WithPagination"
-             data-test="toggle-pagination-grid2" />
-      <span style="margin-left: 5px" *ngIf="isGrid2WithPagination">
-        <button class="btn btn-outline-secondary btn-xs" data-test="goto-first-page" (click)="goToGrid2FirstPage()">
-          <i class="fa fa-caret-left fa-lg"></i>
-        </button>
-        <button class="btn btn-outline-secondary btn-xs" data-test="goto-last-page" (click)="goToGrid2LastPage()">
-          <i class="fa fa-caret-right fa-lg"></i>
-        </button>
-      </span>
-    </div>
-    <div class="col-sm-7">
-      <div class="alert alert-success">
-        <strong>(multi-select) Selected Row(s):</strong>
-        <span [innerHTML]="selectedTitles" data-test="grid2-selections"></span>
-      </div>
-    </div>
-  </div>
-
-  <div class="overflow-hidden">
-    <angular-slickgrid gridId="grid2"
-                       [columnDefinitions]="columnDefinitions2"
-                       [gridOptions]="gridOptions2"
-                       [dataset]="dataset2"
-                       (onAngularGridCreated)="angularGridReady2($event.detail)"
-                       (onGridStateChanged)="grid2StateChanged($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>