angular-slickgrid 4.2.0 → 4.2.3

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

@@ -1,26 +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-formatter.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle"
-       [innerHTML]="subTitle"></div>
-
-  <button class="btn btn-outline-secondary btn-sm"
-          (click)="togglePauseResizer()">
-    Pause auto-resize: <b>{{resizerPaused}}</b>
-  </button>
-
-  <angular-slickgrid gridId="grid2"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onAngularGridCreated)="angularGridReady($event.detail)">
-  </angular-slickgrid>
-</div>

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

@@ -1,162 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { AngularGridInstance, Column, FieldType, Formatter, Formatters, GridOption, } from './../modules/angular-slickgrid';
-
-interface DataItem {
-  id: number;
-  title: string;
-  duration: string;
-  percentComplete: number;
-  percentComplete2: number;
-  start: Date;
-  finish: Date;
-  effortDriven: boolean;
-  phone: string;
-  completed: number;
-}
-
-// create my custom Formatter with the Formatter type
-const myCustomCheckmarkFormatter: Formatter<DataItem> = (_row, _cell, value) => {
-  // you can return a string of a object (of type FormatterResultObject), the 2 types are shown below
-  return value ? `<i class="fa fa-fire red" aria-hidden="true"></i>` : { text: '<i class="fa fa-snowflake-o" aria-hidden="true"></i>', addClasses: 'lightblue', toolTip: 'Freezing' };
-};
-
-const customEnableButtonFormatter: Formatter<DataItem> = (_row: number, _cell: number, value: any) => {
-  return `<span style="margin-left: 5px">
-      <button class="btn btn-xs btn-default">
-        <i class="fa ${value ? 'fa-check-circle' : 'fa-circle-thin'} fa-lg" style="color: ${value ? 'black' : 'lavender'}"></i>
-      </button>
-    </span>`;
-};
-
-@Component({
-  templateUrl: './grid-formatter.component.html'
-})
-export class GridFormatterComponent implements OnInit {
-  title = 'Example 2: Grid with Formatters';
-  subTitle = `
-    Grid with Custom and/or included Slickgrid Formatters (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Formatters" target="_blank">Wiki docs</a>).
-    <ul>
-      <li>The 2 last columns are using Custom Formatters</li>
-      <ul><li>The "Completed" column uses a the "onCellClick" event and a formatter to simulate a toggle action</li></ul>
-      <li>
-        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
-        Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExportOptions" or the column definition)
-      </li>
-      <li>This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to</li>
-    </ul>
-  `;
-
-  columnDefinitions: Column<DataItem>[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  angularGrid!: AngularGridInstance;
-  resizerPaused = false;
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
-      { id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
-      { id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimal: 1, maxDecimal: 2 }, sortable: true, type: FieldType.number, minWidth: 90, exportWithFormatter: true },
-      { id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
-      { id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
-      { id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
-      { id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
-      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 },
-      {
-        id: 'completed', name: 'Completed', field: 'completed', type: FieldType.number, sortable: true, minWidth: 100,
-        formatter: customEnableButtonFormatter,
-        onCellClick: (e, args) => {
-          this.toggleCompletedProperty(args && args.dataContext);
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableAutoResize: true,
-      enableCellNavigation: true,
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-      customFooterOptions: {
-        // optionally display some text on the left footer container
-        leftFooterText: 'custom footer text',
-        hideTotalItemCount: true,
-        hideLastUpdateTimestamp: true
-      },
-
-      // you customize all formatter at once certain options through "formatterOptions" in the Grid Options
-      // or independently through the column definition "params", the option names are the same
-      /*
-      formatterOptions: {
-        dateSeparator: '.',
-        decimalSeparator: ',',
-        displayNegativeNumberWithParentheses: true,
-        minDecimal: 0,
-        maxDecimal: 2,
-        thousandSeparator: '_'
-      },
-      */
-
-      // when using the ExcelCopyBuffer, you can see what the selection range is
-      enableExcelCopyBuffer: true,
-      // excelCopyBufferOptions: {
-      //   onCopyCells: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCells', args.ranges),
-      //   onPasteCells: (e, args: { ranges: SelectedRange[] }) => console.log('onPasteCells', args.ranges),
-      //   onCopyCancelled: (e, args: { ranges: SelectedRange[] }) => console.log('onCopyCancelled', args.ranges),
-      // }
-    };
-
-    // mock a dataset
-    this.dataset = [];
-    for (let i = 0; i < 500; 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] = {
-        id: i,
-        title: 'Task ' + i,
-        phone: this.generatePhoneNumber(),
-        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)
-      };
-    }
-  }
-
-  generatePhoneNumber(): string {
-    let phone = '';
-    for (let i = 0; i < 10; i++) {
-      phone += Math.round(Math.random() * 9) + '';
-    }
-    return phone;
-  }
-
-  togglePauseResizer() {
-    this.resizerPaused = !this.resizerPaused;
-    this.angularGrid.resizerService.pauseResizer(this.resizerPaused);
-  }
-
-  toggleCompletedProperty(item: any) {
-    // toggle property
-    if (typeof item === 'object') {
-      item.completed = !item.completed;
-
-      // simulate a backend http call and refresh the grid row after delay
-      setTimeout(() => {
-        this.angularGrid.gridService.updateItemById(item.id, item, { highlightRow: false });
-      }, 250);
-    }
-  }
-}

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

@@ -1,65 +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-frozen.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="row gx-2 mb-2 align-items-end">
-    <div class="col-2">
-      <label for="pinned-rows">Pinned Rows: </label>
-      <input id="pinned-rows" class="form-control" type="number" [(ngModel)]="frozenRowCount">
-    </div>
-    <div class="col-auto gr-2">
-      <button class="btn btn-outline-secondary btn-sm" (click)="changeFrozenRowCount()">
-        Set
-      </button>
-    </div>
-    <div class="col-1"></div>
-    <div class="col-2">
-      <label for="pinned-columns">Pinned Columns: </label>
-      <input id="pinned-columns" class="form-control" type="number" [(ngModel)]="frozenColumnCount">
-    </div>
-    <div class="col-auto">
-      <button class="btn btn-outline-secondary btn-sm" (click)="changeFrozenColumnCount()">
-        Set
-      </button>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-12">
-      <button class="btn btn-outline-secondary btn-sm" (click)="setFrozenColumns(-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)="setFrozenColumns(2)" data-test="set-3frozen-columns">
-        <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
-      </button>
-
-      <span style="margin-left: 15px">
-        <button class="btn btn-outline-secondary btn-sm" (click)="toggleFrozenBottomRows()">
-          <i class="fa fa-random fa-lg"></i> Toggle Pinned Rows
-        </button>
-        <span style="font-weight: bold;">: {{ isFrozenBottom ? 'Bottom' : 'Top' }}</span>
-      </span>
-    </div>
-  </div>
-  <div class="row mt-2 mb-2">
-    <hr>
-  </div>
-  <angular-slickgrid gridId="grid20"
-                     gridWidth="875"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
-                     (onAngularGridCreated)="angularGridReady($event.detail)">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-frozen.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-frozen.component.ts

@@ -1,303 +0,0 @@
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, ColumnEditorDualInput, Editors, FieldType, formatNumber, Formatters, Filters, GridOption, SlickNamespace } from './../modules/angular-slickgrid';
-
-declare const Slick: SlickNamespace;
-
-@Component({
-  templateUrl: './grid-frozen.component.html',
-  styleUrls: ['./grid-frozen.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class GridFrozenComponent implements OnInit, OnDestroy {
-  title = 'Example 20: Pinned (frozen) Columns/Rows';
-  subTitle = `
-  This example demonstrates the use of Pinned (aka frozen) Columns and/or Rows (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Pinned-(aka-Frozen)-Columns-Rows" target="_blank">Wiki docs</a>)
-  <ul>
-      <li>Option to pin any number of columns (left only) or rows</li>
-      <li>Option to pin the rows at the bottom instead of the top (default)</li>
-      <li>You can also dynamically any of these options, through SlickGrid "setOptions()"</li>
-      <li>Possibility to change the styling of the line border between pinned columns/rows</li>
-    </ul>
-  `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  frozenColumnCount = 2;
-  frozenRowCount = 3;
-  isFrozenBottom = false;
-  gridObj: any;
-  slickEventHandler: any;
-
-  constructor() {
-    this.slickEventHandler = new Slick.EventHandler();
-  }
-
-  ngOnInit(): void {
-    this.prepareDataGrid();
-  }
-
-  ngOnDestroy() {
-    // unsubscribe all SlickGrid events
-    this.slickEventHandler.unsubscribeAll();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-
-    // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
-    // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
-    // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
-    this.slickEventHandler.subscribe(this.gridObj.onMouseEnter, (event: Event) => this.highlightRow(event, true));
-    this.slickEventHandler.subscribe(this.gridObj.onMouseLeave, (event: Event) => this.highlightRow(event, false));
-  }
-
-  highlightRow(event: Event, isMouseEnter: boolean) {
-    const cell = this.gridObj.getCellFromEvent(event);
-    const rows = isMouseEnter ? [cell?.row ?? 0] : [];
-    this.gridObj.setSelectedRows(rows); // highlight current row
-    event.preventDefault();
-  }
-
-  prepareDataGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'sel', name: '#', field: 'id',
-        minWidth: 40, width: 40, maxWidth: 40,
-        cannotTriggerInsert: true,
-        resizable: false,
-        unselectable: true,
-      },
-      {
-        id: 'title', name: 'Title', field: 'title',
-        minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
-      },
-      {
-        id: 'percentComplete', name: '% Complete', field: 'percentComplete',
-        resizable: false,
-        minWidth: 130, width: 140,
-        formatter: Formatters.percentCompleteBar,
-        type: FieldType.number,
-        filterable: true,
-        filter: { model: Filters.slider, operator: '>=' },
-        sortable: true
-      },
-      {
-        id: 'start', name: 'Start', field: 'start',
-        minWidth: 100, width: 120,
-        filterable: true, sortable: true,
-        formatter: Formatters.dateIso
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        minWidth: 100, width: 120,
-        filterable: true, sortable: true,
-        formatter: Formatters.dateIso
-      },
-      {
-        id: 'cost', name: 'Cost | Duration', field: 'cost',
-        formatter: this.costDurationFormatter.bind(this),
-        minWidth: 150, width: 170,
-        sortable: true,
-        // filterable: true,
-        filter: {
-          model: Filters.compoundSlider,
-        },
-        editor: {
-          model: Editors.dualInput,
-          // the DualInputEditor is of Type ColumnEditorDualInput and MUST include (leftInput/rightInput) in its params object
-          // in each of these 2 properties, you can pass any regular properties of a column editor
-          // and they will be executed following the options defined in each
-          params: {
-            leftInput: {
-              field: 'cost',
-              type: 'float',
-              decimal: 2,
-              minValue: 0,
-              maxValue: 50000,
-              placeholder: '< 50K',
-              errorMessage: 'Cost must be positive and below $50K.',
-            },
-            rightInput: {
-              field: 'duration',
-              type: 'float', // you could have 2 different input type as well
-              minValue: 0,
-              maxValue: 100,
-              title: 'make sure Duration is withing its range of 0 to 100',
-              errorMessage: 'Duration must be between 0 and 100.',
-
-              // Validator Option #1
-              // You could also optionally define a custom validator in 1 or both inputs
-              /*
-              validator: (value, args) => {
-                let isValid = true;
-                let errorMsg = '';
-                if (value < 0 || value > 120) {
-                  isValid = false;
-                  errorMsg = 'Duration MUST be between 0 and 120.';
-                }
-                return { valid: isValid, msg: errorMsg };
-              }
-              */
-            },
-          } as ColumnEditorDualInput,
-
-          // Validator Option #2 (shared Validator) - this is the last alternative, option #1 (independent Validators) is still the recommended way
-          // You can also optionally use a common Validator (if you do then you cannot use the leftInput/rightInput validators at same time)
-          // to compare both values at the same time.
-          /*
-          validator: (values, args) => {
-            let isValid = true;
-            let errorMsg = '';
-            if (values.cost < 0 || values.cost > 50000) {
-              isValid = false;
-              errorMsg = 'Cost MUST be between 0 and 50k.';
-            }
-            if (values.duration < 0 || values.duration > 120) {
-              isValid = false;
-              errorMsg = 'Duration MUST be between 0 and 120.';
-            }
-            if (values.cost < values.duration) {
-              isValid = false;
-              errorMsg = 'Cost can never be lower than its Duration.';
-            }
-            return { valid: isValid, msg: errorMsg };
-          }
-          */
-        }
-      },
-      {
-        id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',
-        minWidth: 100, width: 120,
-        formatter: Formatters.checkmark,
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
-        },
-        sortable: true
-      },
-      {
-        id: 'title1', name: 'Title 1', field: 'title1',
-        minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
-      },
-      {
-        id: 'title2', name: 'Title 2', field: 'title2',
-        minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
-      },
-      {
-        id: 'title3', name: 'Title 3', field: 'title3',
-        minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
-      },
-      {
-        id: 'title4', name: 'Title 4', field: 'title4',
-        minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableExcelCopyBuffer: true,
-      enableCellNavigation: true,
-      editable: true,
-      autoEdit: true,
-      asyncEditorLoading: true,
-      frozenColumn: this.frozenColumnCount,
-      frozenRow: this.frozenRowCount,
-      // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
-
-      gridMenu: { hideClearFrozenColumnsCommand: false },
-      headerMenu: { hideFreezeColumnsCommand: false }
-    };
-
-    // mock a dataset
-    this.dataset = this.getData();
-  }
-
-  getData() {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        cost: (i % 33 === 0) ? null : Math.random() * 10000,
-        duration: i % 8 ? (Math.round(Math.random() * 100) + '') : null,
-        percentComplete: Math.round(Math.random() * 100),
-        start: new Date(2009, 0, 1),
-        finish: new Date(2009, 4, 5),
-        effortDriven: (i % 5 === 0),
-        title1: `Some Text ${Math.round(Math.random() * 25)}`,
-        title2: `Some Text ${Math.round(Math.random() * 25)}`,
-        title3: `Some Text ${Math.round(Math.random() * 25)}`,
-        title4: `Some Text ${Math.round(Math.random() * 25)}`,
-      };
-    }
-    return mockDataset;
-  }
-
-  /** change dynamically, through slickgrid "setOptions()" the number of pinned columns */
-  changeFrozenColumnCount() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenColumn: this.frozenColumnCount
-      });
-    }
-  }
-
-  /** change dynamically, through slickgrid "setOptions()" the number of pinned rows */
-  changeFrozenRowCount() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenRow: this.frozenRowCount
-      });
-    }
-  }
-
-  costDurationFormatter(_row: number, _cell: number, _value: any, _columnDef: Column, dataContext: any) {
-    const costText = this.isNullUndefinedOrEmpty(dataContext.cost) ? 'n/a' : formatNumber(dataContext.cost, 0, 2, false, '$', '', '.', ',');
-    let durationText = 'n/a';
-    if (!this.isNullUndefinedOrEmpty(dataContext.duration) && dataContext.duration >= 0) {
-      durationText = `${dataContext.duration} ${dataContext.duration > 1 ? 'days' : 'day'}`;
-    }
-    return `<b>${costText}</b> | ${durationText}`;
-  }
-
-  isNullUndefinedOrEmpty(data: any) {
-    return (data === '' || data === null || data === undefined);
-  }
-
-  onValidationError(e: Event, args: any) {
-    alert(args.validationResults.msg);
-  }
-
-  setFrozenColumns(frozenCols: number) {
-    this.gridObj.setOptions({ frozenColumn: frozenCols });
-    this.gridOptions = this.gridObj.getOptions();
-  }
-
-  /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
-  toggleFrozenBottomRows() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenBottom: !this.isFrozenBottom
-      });
-      this.isFrozenBottom = !this.isFrozenBottom; // toggle the variable
-    }
-  }
-}

package/src/app/examples/grid-graphql-nopage.component.html

@@ -1,33 +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-graphql-nopage.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle row">
-    <div class="col-12" [innerHTML]="subTitle">
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-xs-6 col-sm-3">
-      <div [class]="status.class" role="alert" data-test="status">
-        <strong>Status: </strong> {{status.text}}
-        <span [hidden]="!processing">
-          <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
-        </span>
-      </div>
-    </div>
-  </div>
-
-  <angular-slickgrid gridId="grid27"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-graphql-nopage.component.scss

@@ -1,9 +0,0 @@
-$slick-preheader-font-size: 18px;
-$slick-preheader-border-right: 1px solid lightgrey;
-
-/* make sure to add the @import the SlickGrid Bootstrap Theme AFTER the variables changes */
-@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-bootstrap.scss';
-
-.alert {
-  padding: 8px;
-}