angular-slickgrid 4.1.2 → 4.2.0

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

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

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

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

@@ -0,0 +1,11 @@
+/** 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

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

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

@@ -0,0 +1,9 @@
+$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;
+}