angular-slickgrid 4.2.0 → 4.2.1

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

@@ -1,51 +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-clientside.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></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>
-  <div class="btn-group" role="group">
-    <button class="btn btn-sm btn-outline-secondary" data-test="scroll-top-btn" (click)="scrollGridTop()">
-      <i class="fa fa-arrow-up"></i>
-    </button>
-    <button class="btn btn-sm btn-outline-secondary" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
-      <i class="fa fa-arrow-down"></i>
-    </button>
-  </div>
-  <button class="btn btn-outline-secondary btn-sm" data-test="clear-filters"
-          (click)="angularGrid.filterService.clearFilters()">
-    Clear Filters
-  </button>
-  <button class="btn btn-outline-secondary btn-sm" data-test="clear-sorting"
-          (click)="angularGrid.sortService.clearSorting()">
-    Clear Sorting
-  </button>
-  <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
-    Set Filters Dynamically
-  </button>
-  <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-    Set Sorting Dynamically
-  </button>
-
-  <angular-slickgrid gridId="grid4"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="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/app/examples/grid-clientside.component.ts

@@ -1,293 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  AngularGridInstance,
-  Column,
-  FieldType,
-  Filters,
-  FlatpickrOption,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  Metrics,
-  MultipleSelectOption,
-  OperatorType,
-} from './../modules/angular-slickgrid';
-import { CustomInputFilter } from './custom-inputFilter';
-
-function randomBetween(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-const NB_ITEMS = 1500;
-const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_500_numbers.json';
-
-@Component({
-  templateUrl: './grid-clientside.component.html'
-})
-export class GridClientSideComponent implements OnInit {
-  title = 'Example 4: Client Side Sort/Filter';
-  subTitle = `
-    Sort/Filter on client side only using SlickGrid DataView (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Sorting" target="_blank">Wiki docs</a>)
-    <br/>
-    <ul class="small">
-      <li>Support multi-sort (by default), hold "Shift" key and click on the next column to sort.</li>
-      <li>All column types support the following operators: (>, >=, <, <=, <>, !=, =, ==, *)</li>
-      <ul>
-        <li>Example: >100 ... >=2001-01-01 ... >02/28/17</li>
-        <li><b>Note:</b> For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not the Formatter)</li>
-      </ul>
-      <li>Date Filters</li>
-      <ul>
-        <li>
-          FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily.
-          For example, in the "UTC Date" field below, you can type "&gt;02/28/2017", also when dealing with UTC you have to take the time difference in consideration.
-        </li>
-      </ul>
-      <li>On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John Doe")</li>
-      <li>Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Custom-Filter" target="_blank">Wiki - Custom Filter</a>
-      <li>MultipleSelect & SingeSelect Filters can use a regular "collection" or "collectionAsync" to load it asynchronously</li>
-    </ul>
-  `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  metrics!: Metrics;
-
-  constructor(private http: HttpClient, private translate: TranslateService) { }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 55,
-        type: FieldType.string, filterable: true, filter: { model: Filters.compoundInputText }
-      },
-      {
-        id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
-        type: FieldType.string,
-        filter: {
-          model: new 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: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
-        minWidth: 55,
-        filterable: true,
-        filter: {
-          collectionAsync: this.http.get<{ option: string; value: string; }[]>(URL_SAMPLE_COLLECTION_DATA),
-          // collectionFilterBy & collectionSortBy accept a single or multiple options
-          // we can exclude certains values 365 & 360 from the dropdown filter
-          collectionFilterBy: [{
-            property: 'value',
-            operator: OperatorType.notEqual,
-            value: 360
-          }, {
-            property: 'value',
-            operator: OperatorType.notEqual,
-            value: 365
-          }],
-          collectionSortBy: {
-            property: 'value',
-            sortDesc: true,
-            fieldType: FieldType.number
-          },
-          customStructure: {
-            value: 'value',
-            label: 'label',
-            optionLabel: 'value', // if selected text is too long, we can use option labels instead
-            labelSuffix: 'text',
-          },
-          collectionOptions: {
-            separatorBetweenTextLabels: ' ',
-            filterResultAfterEachPass: 'chain' // options are "merge" or "chain" (defaults to "chain")
-          },
-          model: Filters.multipleSelect,
-
-          // we could add certain option(s) to the "multiple-select" plugin
-          filterOptions: {
-            maxHeight: 250,
-            width: 175,
-
-            // if we want to display shorter text as the selected text (on the select filter itself, parent element)
-            // we can use "useSelectOptionLabel" or "useSelectOptionLabelToHtml" the latter will parse html
-            useSelectOptionLabelToHtml: true
-          } as MultipleSelectOption
-        }
-      },
-      {
-        id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, sortable: true,
-        filterable: true, filter: { model: Filters.compoundInputNumber }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: false,
-        type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
-      },
-      {
-        id: 'usDateShort', name: 'US Date Short', field: 'usDateShort', sortable: true, minWidth: 70, width: 70,
-        type: FieldType.dateUsShort, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate }
-      },
-      {
-        id: 'utcDate', name: 'UTC Date', field: 'utcDate', formatter: Formatters.dateTimeIsoAmPm, sortable: true, minWidth: 115,
-        type: FieldType.dateUtc, exportWithFormatter: true, outputType: FieldType.dateTimeIsoAmPm, filterable: true,
-        filter: {
-          model: Filters.compoundDate,
-          // override any of the Flatpickr options through "filterOptions"
-          // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          filterOptions: { minDate: 'today' } as FlatpickrOption
-        }
-      },
-      {
-        id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven.isEffort', minWidth: 85, maxWidth: 85,
-        type: FieldType.boolean,
-        sortable: true,
-        exportCustomFormatter: Formatters.complexObject,
-
-        // to pass multiple formatters, use the params property
-        // also these formatters are executed in sequence, so if you want the checkmark to work correctly, it has to be the last formatter defined
-        formatter: Formatters.multiple,
-        params: { formatters: [Formatters.complexObject, Formatters.checkmark] },
-
-        // when the "field" string includes the dot "." notation, the library will consider this to be a complex object and Filter accordingly
-        filterable: true,
-        filter: {
-          // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
-          // enableRenderHtml: true,
-          // collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="fa fa-check"></i> ` }, { value: false, label: 'False' }],
-
-          collection: [{ isEffort: '', label: '' }, { isEffort: true, label: 'True' }, { isEffort: false, label: 'False' }],
-          customStructure: {
-            value: 'isEffort',
-            label: 'label'
-          },
-          model: Filters.singleSelect,
-
-          // we could add certain option(s) to the "multiple-select" plugin
-          filterOptions: { autoDropWidth: true } as MultipleSelectOption,
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableExcelExport: true,
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      // enableFilterTrimWhiteSpace: true,
-      i18n: this.translate,
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-
-      // use columnDef searchTerms OR use presets as shown below
-      presets: {
-        filters: [
-          { columnId: 'duration', searchTerms: [10, 98] },
-          // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
-          { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
-          // { columnId: 'effort-driven', searchTerms: [true] },
-        ],
-        sorters: [
-          { columnId: 'duration', direction: 'DESC' },
-          { columnId: 'complete', direction: 'ASC' }
-        ],
-      },
-      registerExternalResources: [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 = Math.round(Math.random() * 100);
-      const randomYear = randomBetween(2000, 2035);
-      const randomYearShort = randomBetween(10, 35);
-      const randomMonth = randomBetween(1, 12);
-      const randomMonthStr = (randomMonth < 10) ? `0${randomMonth}` : randomMonth;
-      const randomDay = randomBetween(10, 28);
-      const randomPercent = randomBetween(0, 100);
-      const randomHour = randomBetween(10, 23);
-      const randomTime = randomBetween(10, 59);
-      const randomMilliseconds = `${randomBetween(1, 9)}${randomBetween(10, 99)}`;
-      const randomIsEffort = (i % 3 === 0);
-
-      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
-        usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset
-        utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}.${randomMilliseconds}Z`,
-        effortDriven: {
-          isEffort: randomIsEffort,
-          label: randomIsEffort ? 'Effort' : 'NoEffort',
-        }
-      });
-    }
-    return tempDataset;
-  }
-
-  /** 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());
-  }
-
-  setFiltersDynamically() {
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      { columnId: 'duration', searchTerms: [2, 25, 48, 50] },
-      { columnId: 'complete', searchTerms: [95], operator: '<' },
-      { columnId: 'effort-driven', searchTerms: [true] },
-      { columnId: 'start', operator: '>=', searchTerms: ['2001-02-28'] },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'duration', direction: 'ASC' },
-      { columnId: 'start', direction: 'DESC' },
-    ]);
-  }
-
-  refreshMetrics(e: Event, args: any) {
-    if (args && args.current >= 0) {
-      setTimeout(() => {
-        this.metrics = {
-          startTime: new Date(),
-          endTime: new Date(),
-          itemCount: args && args.current || 0,
-          totalItemCount: this.dataset.length || 0
-        };
-      });
-    }
-  }
-
-  scrollGridBottom() {
-    this.angularGrid.slickGrid.navigateBottom();
-  }
-
-  scrollGridTop() {
-    this.angularGrid.slickGrid.navigateTop();
-  }
-}

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

@@ -1,39 +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-colspan.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
-  <angular-slickgrid gridId="grid1"
-                     [columnDefinitions]="columnDefinitions1"
-                     [gridOptions]="gridOptions1"
-                     [dataset]="dataset1">
-  </angular-slickgrid>
-
-  <hr />
-
-  <h3>Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h3>
-  <div class="col-sm 12">
-    <button class="btn btn-outline-secondary btn-sm" (click)="setFrozenColumns2(-1)"
-            data-test="remove-frozen-column-button">
-      <i class="fa fa-times fa-lg"></i> Remove Frozen Columns
-    </button>
-    <button class="btn btn-outline-secondary btn-sm" (click)="setFrozenColumns2(2)" data-test="set-3frozen-columns">
-      <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
-    </button>
-  </div>
-  <angular-slickgrid gridId="grid2"
-                     [columnDefinitions]="columnDefinitions2"
-                     [gridOptions]="gridOptions2"
-                     [dataset]="dataset2"
-                     (onAngularGridCreated)="angularGridReady2($event.detail)">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-colspan.component.scss

@@ -1,11 +0,0 @@
-/** You can change the pinned/frozen border styling through this css override */
-
-.slick-row .slick-cell.frozen:last-child,
-.slick-headerrow-column.frozen:last-child,
-.slick-footerrow-column.frozen:last-child {
-  border-right: 1px solid #969696 !important;
-}
-
-.slick-pane-bottom {
-  border-top: 1px solid #969696 !important;
-}

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

@@ -1,155 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-
-import { AngularGridInstance, Column, FieldType, GridOption, ItemMetadata } from './../modules/angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-colspan.component.html',
-  styleUrls: ['./grid-colspan.component.scss'],
-})
-export class GridColspanComponent implements OnInit {
-  title = 'Example 15: Column Span & Header Grouping';
-  subTitle = `
-  This example demonstrates how to easily span a row over multiple columns & how to group header titles.
-  <ul>
-    <li>
-      Row Colspan - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Row-Colspan" target="_blank">Wiki docs</a>) /
-      Header Grouping - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Title-Grouping" target="_blank">Wiki docs</a>)
-    </li>
-    <li>Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by colspan it will still sort it</li>
-    <li>
-      Header Grouping spanning accross multiple columns is working but has some UI issues on window resize.
-      If anyone can fix it, probably some CSS issues, please let us know.
-    </li>
-  </ul>
-  `;
-
-  angularGrid2!: AngularGridInstance;
-  gridObj2: any;
-  columnDefinitions1!: Column[];
-  columnDefinitions2!: Column[];
-  gridOptions1!: GridOption;
-  gridOptions2!: GridOption;
-  dataset1: any[] = [];
-  dataset2: any[] = [];
-
-  ngOnInit(): void {
-    this.prepareGrid1();
-    this.prepareGrid2();
-  }
-
-  angularGridReady2(angularGrid: AngularGridInstance) {
-    this.angularGrid2 = angularGrid;
-    this.gridObj2 = angularGrid.slickGrid;
-  }
-
-  prepareGrid1() {
-    this.columnDefinitions1 = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
-      { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' },
-      { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' },
-      { id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period' },
-      { id: '%', name: '% Complete', field: 'percentComplete', selectable: false, columnGroup: 'Analysis' },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }
-    ];
-
-    this.gridOptions1 = {
-      gridHeight: 275,
-      gridWidth: 800,
-      enableAutoResize: false,
-      enableCellNavigation: true,
-      enableSorting: true,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 28,
-      explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan,
-      enableExcelExport: true,
-      excelExportOptions: {
-        exportWithFormatter: false
-      },
-      registerExternalResources: [new ExcelExportService()],
-    };
-
-    this.dataset1 = this.getData(500);
-  }
-
-  prepareGrid2() {
-    this.columnDefinitions2 = [
-      { id: 'sel', name: '#', field: 'num', behavior: 'select', cssClass: 'cell-selection', width: 40, resizable: false, selectable: false },
-      { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
-      { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' },
-      { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' },
-      { id: 'finish', name: 'Finish', field: 'finish', columnGroup: 'Period' },
-      { id: '%', name: '% Complete', field: 'percentComplete', selectable: false, columnGroup: 'Analysis' },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', type: FieldType.boolean, columnGroup: 'Analysis' }
-    ];
-
-    this.gridOptions2 = {
-      gridHeight: 275,
-      gridWidth: 800,
-      enableCellNavigation: true,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 25,
-      explicitInitialization: true,
-      frozenColumn: 2,
-      gridMenu: { hideClearFrozenColumnsCommand: false },
-      headerMenu: { hideFreezeColumnsCommand: false },
-      enableExcelExport: true,
-      excelExportOptions: {
-        exportWithFormatter: false
-      },
-      registerExternalResources: [new ExcelExportService()],
-    };
-
-    this.dataset2 = this.getData(500);
-  }
-
-  getData(count: number) {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < count; i++) {
-      mockDataset[i] = {
-        id: i,
-        num: i,
-        title: 'Task ' + i,
-        duration: '5 days',
-        percentComplete: Math.round(Math.random() * 100),
-        start: '01/01/2009',
-        finish: '01/05/2009',
-        effortDriven: (i % 5 === 0)
-      };
-    }
-    return mockDataset;
-  }
-
-  setFrozenColumns2(frozenCols: number) {
-    this.gridObj2.setOptions({ frozenColumn: frozenCols });
-    this.gridOptions2 = this.gridObj2.getOptions();
-  }
-
-  /**
-   * A callback to render different row column span
-   * Your callback will always have the "item" argument which you can use to decide on the colspan
-   * Your return must always be in the form of:: return { columns: {}}
-   */
-  renderDifferentColspan(item: any): ItemMetadata {
-    if (item.id % 2 === 1) {
-      return {
-        columns: {
-          duration: {
-            colspan: 3 // "duration" will span over 3 columns
-          }
-        }
-      };
-    }
-    return {
-      columns: {
-        0: {
-          colspan: '*' // starting at column index 0, we will span accross all column (*)
-        }
-      }
-    };
-  }
-}

package/src/app/examples/grid-composite-editor.component.html

@@ -1,79 +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-composite-editor.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="mb-2">
-    <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">
-      <button type="button" class="btn btn-outline-secondary" data-test="toggle-readonly-btn"
-              (click)="toggleGridEditReadonly()">
-        <i class="fa fa-table"></i> Toggle Edit/Readonly Grid
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="undo-last-edit-btn"
-              (click)="undoLastEdit()">
-        <i class="fa fa-undo"></i> Undo Last Edit
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="undo-open-editor-btn"
-              (click)="undoLastEdit(true)">
-        <i class="fa fa-undo"></i> Undo Last Edit &amp; Open Editor
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="undo-all-edits-btn"
-              (click)="undoAllEdits()">
-        <i class="fa fa-history"></i> Undo All Edits
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="save-all-btn"
-              (click)="saveAll()">
-        <i class="fa fa-save"></i> Save All
-      </button>
-    </div>
-  </div>
-
-  <div class="mb-3">
-    <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
-      <button type="button" class="btn btn-outline-secondary" data-test="open-modal-create-btn"
-              (click)="openCompositeModal('create')" [disabled]="isCompositeDisabled">
-        <i class="fa fa-plus"></i> Item Create
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="open-modal-clone-btn"
-              (click)="openCompositeModal('clone')" [disabled]="isCompositeDisabled">
-        <i class="fa fa-clone"></i> Item Clone
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="open-modal-edit-btn"
-              (click)="openCompositeModal('edit')" [disabled]="isCompositeDisabled">
-        <i class="fa fa-pencil"></i> Item Edit
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="open-modal-mass-update-btn"
-              (click)="openCompositeModal('mass-update')" [disabled]="isCompositeDisabled">
-        <i class="fa fa-pencil-square-o"></i> Mass Update
-      </button>
-      <button type="button" class="btn btn-outline-secondary" data-test="open-modal-mass-selection-btn"
-              (click)="openCompositeModal('mass-selection')" [disabled]="isMassSelectionDisabled">
-        <i class="fa fa-check-square-o"></i> Update Selected
-      </button>
-    </div>
-  </div>
-
-
-  <angular-slickgrid gridId="grid30"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onAngularGridCreated)="angularGridReady($event.detail)"
-                     (onBeforeEditCell)="handleOnBeforeEditCell($event.detail.eventData, $event.detail.args)"
-                     (onCellChange)="handleOnCellChange($event.detail.eventData, $event.detail.args)"
-                     (onClick)="handleOnCellClicked($event.detail.eventData, $event.detail.args)"
-                     (onCompositeEditorChange)="handleOnCompositeEditorChange($event.detail.eventData, $event.detail.args)"
-                     (onItemDeleted)="handleItemDeleted($event.detail.eventData, $event.detail.args)"
-                     (onGridStateChanged)="handleOnGridStateChanged($event.detail)"
-                     (onPaginationChanged)="handlePaginationChanged()"
-                     (onValidationError)="handleValidationError($event.detail.eventData, $event.detail.args)">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-composite-editor.component.scss

@@ -1,19 +0,0 @@
-$slick-button-border-color: #ababab !default;
-
-.editable-field {
-  background-color: rgba(227, 240, 251, 0.569) !important;
-}
-.unsaved-editable-field {
-  background-color: #fbfdd1 !important;
-}
-.button-style {
-  cursor: pointer;
-  background-color: white;
-  border: 1px solid #{$slick-button-border-color};
-  border-radius: 2px;
-  justify-content: center;
-  text-align: center;
-  &:hover {
-    border-color: darken($slick-button-border-color, 10%);
-  }
-}