angular-slickgrid 8.14.0 → 9.0.0

package/src/demos/examples/example13.component.ts

@@ -0,0 +1,370 @@
+import { Component, OnInit } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { TextExportService } from '@slickgrid-universal/text-export';
+
+import {
+  AngularGridInstance,
+  Aggregators,
+  Column,
+  DelimiterType,
+  Filters,
+  Formatters,
+  GridOption,
+  Grouping,
+  GroupTotalFormatters,
+  SortDirectionNumber,
+  SortComparers,
+} from '../../library';
+
+@Component({
+  templateUrl: './example13.component.html',
+  standalone: false,
+})
+export class Example13Component implements OnInit {
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  gridObj: any;
+  dataviewObj: any;
+  processing = false;
+  excelExportService = new ExcelExportService();
+  textExportService = new TextExportService();
+
+  ngOnInit(): void {
+    this.initializeGrid();
+  }
+
+  initializeGrid() {
+    // add a simple button with event listener on 1st column for testing purposes
+    // a simple button with click event
+    const nameElementColumn1 = document.createElement('div');
+    const btn = document.createElement('button');
+    const btnLabel = document.createElement('span');
+    btnLabel.className = 'mdi mdi-help-circle no-padding';
+    btn.dataset.test = 'col1-hello-btn';
+    btn.className = 'btn btn-outline-secondary btn-xs btn-icon ms-1';
+    btn.textContent = 'Click me';
+    btn.title = 'simple column header test with a button click listener';
+    btn.addEventListener('click', () => alert('Hello World'));
+    btn.appendChild(btnLabel);
+    nameElementColumn1.appendChild(document.createTextNode('Id '));
+    nameElementColumn1.appendChild(btn);
+
+    this.columnDefinitions = [
+      {
+        id: 'sel',
+        name: nameElementColumn1,
+        field: 'num',
+        type: 'number',
+        columnPickerLabel: 'Custom Label', // add a custom label for the ColumnPicker/GridMenu when default header value extractor doesn't work for you ()
+        width: 140,
+        maxWidth: 150,
+        excludeFromExport: true,
+        resizable: true,
+        filterable: true,
+        selectable: false,
+        focusable: false,
+      },
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        width: 50,
+        minWidth: 50,
+        cssClass: 'cell-title',
+        filterable: true,
+        sortable: true,
+      },
+      {
+        id: 'duration',
+        name: 'Duration',
+        field: 'duration',
+        minWidth: 50,
+        width: 60,
+        filterable: true,
+        filter: { model: Filters.slider, operator: '>=' },
+        sortable: true,
+        type: 'number',
+        groupTotalsFormatter: GroupTotalFormatters.sumTotals,
+        params: { groupFormatterPrefix: 'Total: ' },
+      },
+      {
+        id: '%',
+        name: '% Complete',
+        field: 'percentComplete',
+        minWidth: 70,
+        width: 90,
+        formatter: Formatters.percentCompleteBar,
+        filterable: true,
+        filter: { model: Filters.compoundSlider },
+        sortable: true,
+        type: 'number',
+        groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
+        params: { groupFormatterPrefix: '<i>Avg</i>: ' },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        minWidth: 60,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+        sortable: true,
+        type: 'dateIso',
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        minWidth: 60,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+        sortable: true,
+        type: 'dateIso',
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+      },
+      {
+        id: 'cost',
+        name: 'Cost',
+        field: 'cost',
+        minWidth: 70,
+        width: 80,
+        sortable: true,
+        filterable: true,
+        filter: { model: Filters.compoundInputNumber },
+        type: 'number',
+        formatter: Formatters.currency,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsCurrency,
+        params: {
+          displayNegativeNumberWithParentheses: true,
+          currencyPrefix: '€',
+          groupFormatterCurrencyPrefix: '€',
+          minDecimal: 2,
+          maxDecimal: 4,
+          groupFormatterPrefix: '<b>Total</b>: ',
+        },
+        excelExportOptions: {
+          style: {
+            font: { outline: true, italic: true },
+            format: '€0.00##;[Red](€0.00##)',
+          },
+          width: 18,
+        },
+        groupTotalsExcelExportOptions: {
+          style: {
+            alignment: { horizontal: 'center' },
+            font: { bold: true, color: 'FF005289', underline: 'single', fontName: 'Consolas', size: 10 },
+            fill: { type: 'pattern', patternType: 'solid', fgColor: 'FFE6F2F6' },
+            border: {
+              top: { color: 'FFa500ff', style: 'thick' },
+              left: { color: 'FFa500ff', style: 'medium' },
+              right: { color: 'FFa500ff', style: 'dotted' },
+              bottom: { color: 'FFa500ff', style: 'double' },
+            },
+            format: '"Total: "€0.00##;[Red]"Total: "(€0.00##)',
+          },
+        },
+      },
+      {
+        id: 'effort-driven',
+        name: 'Effort Driven',
+        minWidth: 20,
+        width: 80,
+        maxWidth: 80,
+        cssClass: 'cell-effort-driven',
+        field: 'effortDriven',
+        formatter: Formatters.checkmarkMaterial,
+        sortable: true,
+        filterable: true,
+        filter: {
+          collection: [
+            { value: '', label: '' },
+            { value: true, label: 'True' },
+            { value: false, label: 'False' },
+          ],
+          model: Filters.singleSelect,
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableExcelExport: true,
+      enableFiltering: true,
+      // you could debounce/throttle the input text filter if you have lots of data
+      // filterTypingDebounce: 250,
+      enableGrouping: true,
+      enableTextExport: true,
+      gridMenu: {
+        hideExportTextDelimitedCommand: false,
+      },
+      excelExportOptions: { sanitizeDataExport: true },
+      textExportOptions: { sanitizeDataExport: true },
+      externalResources: [this.excelExportService, this.textExportService],
+      showCustomFooter: true, // display some metrics in the bottom custom footer
+      customFooterOptions: {
+        // optionally display some text on the left footer container
+        hideMetrics: false,
+        hideTotalItemCount: false,
+        hideLastUpdateTimestamp: false,
+      },
+    };
+
+    this.loadData(500);
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+    this.dataviewObj = angularGrid.dataView;
+  }
+
+  loadData(rowCount: number) {
+    // mock a dataset
+    const tmpData = [];
+    for (let i = 0; i < rowCount; 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);
+      const randomCost = i % 33 === 0 ? null : Math.round(Math.random() * 10000) / 100;
+
+      tmpData[i] = {
+        id: 'id_' + i,
+        num: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, randomMonth + 1, randomDay),
+        cost: i % 3 ? randomCost : randomCost !== null ? -randomCost : null,
+        effortDriven: i % 5 === 0,
+      };
+    }
+    this.dataset = tmpData;
+  }
+
+  clearGrouping() {
+    this.dataviewObj.setGrouping([]);
+  }
+
+  collapseAllGroups() {
+    this.dataviewObj.collapseAllGroups();
+  }
+
+  expandAllGroups() {
+    this.dataviewObj.expandAllGroups();
+  }
+
+  exportToExcel() {
+    this.excelExportService.exportToExcel({
+      filename: 'Export',
+      format: 'xlsx',
+    });
+  }
+
+  exportToFile(type = 'csv') {
+    this.textExportService.exportToFile({
+      delimiter: type === 'csv' ? DelimiterType.comma : DelimiterType.tab,
+      filename: 'myExport',
+      format: type === 'csv' ? 'csv' : 'txt',
+    });
+  }
+
+  groupByDuration() {
+    // you need to manually add the sort icon(s) in UI
+    this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
+    this.dataviewObj.setGrouping({
+      getter: 'duration',
+      formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
+      aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')],
+      comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc),
+      aggregateCollapsed: false,
+      lazyTotalsCalculation: true,
+    } as Grouping);
+    this.gridObj.invalidate(); // invalidate all rows and re-render
+  }
+
+  groupByDurationOrderByCount(aggregateCollapsed: boolean) {
+    this.angularGrid.filterService.setSortColumnIcons([]);
+    this.dataviewObj.setGrouping({
+      getter: 'duration',
+      formatter: (g) => `Duration: ${g.value} <span style="color:green">(${g.count} items)</span>`,
+      comparer: (a, b) => {
+        return a.count - b.count;
+      },
+      aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')],
+      aggregateCollapsed,
+      lazyTotalsCalculation: true,
+    } as Grouping);
+    this.gridObj.invalidate(); // invalidate all rows and re-render
+  }
+
+  groupByDurationEffortDriven() {
+    // you need to manually add the sort icon(s) in UI
+    const sortColumns = [
+      { columnId: 'duration', sortAsc: true },
+      { columnId: 'effortDriven', sortAsc: true },
+    ];
+    this.angularGrid.filterService.setSortColumnIcons(sortColumns);
+    this.dataviewObj.setGrouping([
+      {
+        getter: 'duration',
+        formatter: (g) => `Duration: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
+        aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')],
+        aggregateCollapsed: true,
+        lazyTotalsCalculation: true,
+      },
+      {
+        getter: 'effortDriven',
+        formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} <span style="color:green">(${g.count} items)</span>`,
+        aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')],
+        collapsed: true,
+        lazyTotalsCalculation: true,
+      },
+    ] as Grouping[]);
+    this.gridObj.invalidate(); // invalidate all rows and re-render
+  }
+
+  groupByDurationEffortDrivenPercent() {
+    // you need to manually add the sort icon(s) in UI
+    const sortColumns = [
+      { columnId: 'duration', sortAsc: true },
+      { columnId: 'effortDriven', sortAsc: true },
+      { columnId: 'percentComplete', sortAsc: true },
+    ];
+    this.angularGrid.filterService.setSortColumnIcons(sortColumns);
+    this.dataviewObj.setGrouping([
+      {
+        getter: 'duration',
+        formatter: (g) => `Duration: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
+        aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')],
+        aggregateCollapsed: true,
+        lazyTotalsCalculation: true,
+      },
+      {
+        getter: 'effortDriven',
+        formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'}  <span style="color:green">(${g.count} items)</span>`,
+        aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')],
+        lazyTotalsCalculation: true,
+      },
+      {
+        getter: 'percentComplete',
+        formatter: (g) => `% Complete: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
+        aggregators: [new Aggregators.Avg('percentComplete')],
+        aggregateCollapsed: true,
+        collapsed: true,
+        lazyTotalsCalculation: true,
+      },
+    ] as Grouping[]);
+    this.gridObj.invalidate(); // invalidate all rows and re-render
+  }
+}

package/src/demos/examples/example14.component.html

@@ -0,0 +1,50 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 14: Column Span & Header Grouping
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-colspan.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    This example demonstrates how to easily span a row over multiple columns & how to group header titles.
+    <ul>
+      <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>
+  </div>
+
+  <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
+  <angular-slickgrid gridId="grid1" [columns]="columnDefinitions1" [options]="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 btn-icon" (click)="setFrozenColumns2(-1)" data-test="remove-frozen-column-button">
+      <i class="mdi mdi-close"></i> Remove Frozen Columns
+    </button>
+    <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="setFrozenColumns2(2)" data-test="set-3frozen-columns">
+      <i class="mdi mdi-pin-outline"></i> Set 3 Frozen Columns
+    </button>
+  </div>
+  <angular-slickgrid
+    gridId="grid2"
+    [columns]="columnDefinitions2"
+    [options]="gridOptions2"
+    [dataset]="dataset2"
+    (onAngularGridCreated)="angularGridReady2($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

package/src/demos/examples/example14.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/demos/examples/example14.component.ts

@@ -0,0 +1,156 @@
+import { Component, OnInit } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+import { AngularGridInstance, Column, GridOption, ItemMetadata } from '../../library';
+
+@Component({
+  templateUrl: './example14.component.html',
+  styleUrls: ['./example14.component.scss'],
+  standalone: false,
+})
+export class Example14Component implements OnInit {
+  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: 'boolean', columnGroup: 'Analysis' },
+    ];
+
+    this.gridOptions1 = {
+      gridHeight: 275,
+      gridWidth: 800,
+      enableAutoResize: false,
+      enableCellNavigation: true,
+      enableSorting: true,
+      createPreHeaderPanel: true,
+      showPreHeaderPanel: true,
+      preHeaderPanelHeight: 28,
+      explicitInitialization: true,
+      dataView: {
+        globalItemMetadataProvider: {
+          getRowMetadata: (item: any) => this.renderDifferentColspan(item),
+        },
+      },
+      gridMenu: {
+        iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default)
+      },
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: false,
+      },
+      externalResources: [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: '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,
+      },
+      externalResources: [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/demos/examples/example15.component.html

@@ -0,0 +1,56 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 15: Grid State & Presets using Local Storage
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-state.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    Grid State & Preset (<a
+      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grid-state-and-preset"
+      target="_blank"
+      >Wiki docs</a
+    >)
+    <br />
+    <ul class="small">
+      <li>Uses Local Storage to persist the Grid State and uses Grid Options "presets" to put the grid back to it's previous state</li>
+      <ul>
+        <li>
+          to demo this, simply change any columns (position reorder, visibility, size, filter, sort), then refresh your browser with (F5)
+        </li>
+      </ul>
+      <li>Local Storage is just one option, you can use whichever is more convenient for you (Local Storage, Session Storage, DB, ...)</li>
+    </ul>
+  </div>
+
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="reset-button" (click)="clearGridStateFromLocalStorage()">
+    <i class="mdi mdi-close"></i>
+    Clear Grid State from Local Storage &amp; Reset Grid
+  </button>
+
+  <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="switchLanguage()" data-test="language-button">
+    <i class="mdi mdi-translate"></i>
+    Switch Language
+  </button>
+  <b>Locale:</b>
+  <span style="font-style: italic" data-test="selected-locale">
+    {{ selectedLanguage + '.json' }}
+  </span>
+
+  <angular-slickgrid
+    gridId="grid15"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onGridStateChanged)="gridStateChanged($event.detail)"
+    (onBeforeGridDestroy)="saveCurrentGridState()"
+  >
+  </angular-slickgrid>
+</div>