angular-slickgrid 4.1.2 → 4.2.0

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

@@ -0,0 +1,80 @@
+<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-grouping.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle"
+       [innerHTML]="subTitle"></div>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <button class="btn btn-outline-secondary btn-xs" data-test="add-500-rows-btn" (click)="loadData(500)">
+        500 rows
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="add-50k-rows-btn" (click)="loadData(50000)">
+        50k rows
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="clear-grouping-btn" (click)="clearGrouping()">
+        <i class="fa fa-times"></i> Clear grouping
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="collapse-all-btn" (click)="collapseAllGroups()">
+        <i class="fa fa-compress"></i> Collapse all groups
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="expand-all-btn" (click)="expandAllGroups()">
+        <i class="fa fa-expand"></i> Expand all groups
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="export-excel-btn" (click)="exportToExcel()">
+        <i class="fa fa-file-excel-o text-success"></i> Export to Excel
+      </button>
+    </div>
+  </div>
+  <hr />
+  <div class="row">
+    <div class="col-sm-12">
+      <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-sort-value-btn"
+              (click)="groupByDuration()">
+        Group by duration &amp; sort groups by value
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-sort-count-btn"
+              (click)="groupByDurationOrderByCount(false)">
+        Group by duration &amp; sort groups by count
+      </button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-sort-count-collapse-btn"
+              (click)="groupByDurationOrderByCount(true)">
+        Group by duration &amp; sort groups by count, aggregate collapsed
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-effort-btn"
+              (click)="groupByDurationEffortDriven()">
+        Group by duration then effort-driven
+      </button>
+      <button class="btn btn-outline-secondary btn-xs" data-test="group-duration-effort-percent-btn"
+              (click)="groupByDurationEffortDrivenPercent()">
+        Group by duration then effort-driven then percent.
+      </button>
+      <span [hidden]="!processing">
+        <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+      </span>
+    </div>
+  </div>
+
+  <angular-slickgrid gridId="grid14"
+                     [dataset]="dataset"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     (onBeforeExportToTextFile)="processing = true"
+                     (onAfterExportToTextFile)="processing = false"
+                     (onBeforeExportToExcel)="processing = true"
+                     (onAfterExportToExcel)="processing = false"
+                     (onAngularGridCreated)="angularGridReady($event.detail)">
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,313 @@
+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,
+  FieldType,
+  FileType,
+  Filters,
+  Formatters,
+  GridOption,
+  Grouping,
+  GroupTotalFormatters,
+  SortDirectionNumber,
+  SortComparers,
+} from './../modules/angular-slickgrid';
+
+@Component({
+  templateUrl: './grid-grouping.component.html'
+})
+export class GridGroupingComponent implements OnInit {
+  title = 'Example 14: Grouping & Aggregators';
+  subTitle = `
+  (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grouping-&-Aggregators" target="_blank">Wiki docs</a>)
+  <ul>
+    <li>
+    Fully dynamic and interactive multi-level grouping with filtering and aggregates over 50'000 items
+    </li>
+    <li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
+  </ul>
+  `;
+
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  gridObj: any;
+  dataviewObj: any;
+  processing = false;
+  excelExportService = new ExcelExportService();
+  textExportService = new TextExportService();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      {
+        id: 'sel', name: '#', field: 'num', width: 40,
+        excludeFromExport: true,
+        maxWidth: 70,
+        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: FieldType.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: FieldType.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: FieldType.dateIso,
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true
+      },
+      {
+        id: 'finish', name: 'Finish', field: 'finish',
+        minWidth: 60,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+        sortable: true,
+        type: FieldType.dateIso,
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true
+      },
+      {
+        id: 'cost', name: 'Cost', field: 'cost',
+        minWidth: 70,
+        width: 100,
+        filterable: true,
+        filter: { model: Filters.compoundInputNumber },
+        type: FieldType.number,
+        sortable: true,
+        exportWithFormatter: true,
+        formatter: Formatters.dollar,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
+        params: { groupFormatterPrefix: '<b>Total</b>: ' /*, groupFormatterSuffix: ' USD'*/ }
+      },
+      {
+        id: 'effort-driven', name: 'Effort Driven',
+        minWidth: 20, width: 80, maxWidth: 80,
+        cssClass: 'cell-effort-driven',
+        field: 'effortDriven',
+        formatter: Formatters.checkmark,
+        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,
+      enableExport: true,
+      gridMenu: {
+        hideExportTextDelimitedCommand: false
+      },
+      excelExportOptions: { sanitizeDataExport: true },
+      textExportOptions: { sanitizeDataExport: true },
+      registerExternalResources: [this.excelExportService, this.textExportService],
+    };
+
+    this.loadData(500);
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+    this.dataviewObj = angularGrid.dataView;
+  }
+
+  loadData(rowCount: number) {
+    // mock a dataset
+    this.dataset = [];
+    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);
+
+      this.dataset[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 % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
+        effortDriven: (i % 5 === 0)
+      };
+    }
+  }
+
+  clearGrouping() {
+    this.dataviewObj.setGrouping([]);
+  }
+
+  collapseAllGroups() {
+    this.dataviewObj.collapseAllGroups();
+  }
+
+  expandAllGroups() {
+    this.dataviewObj.expandAllGroups();
+  }
+
+  exportToExcel() {
+    this.excelExportService.exportToExcel({
+      filename: 'Export',
+      format: FileType.xlsx
+    });
+  }
+
+  exportToFile(type = 'csv') {
+    this.textExportService.exportToFile({
+      delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
+      filename: 'myExport',
+      format: (type === 'csv') ? FileType.csv : FileType.txt
+    });
+  }
+
+  groupByDuration() {
+    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);
+
+    // you need to manually add the sort icon(s) in UI
+    this.angularGrid.filterService.setSortColumnIcons([{ columnId: 'duration', sortAsc: true }]);
+    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() {
+    this.angularGrid.filterService.setSortColumnIcons([]);
+    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() {
+    this.angularGrid.filterService.setSortColumnIcons([]);
+    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/app/examples/grid-headerbutton.component.html

@@ -0,0 +1,31 @@
+<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-headerbutton.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <h5>Grid 1</h5>
+  <angular-slickgrid gridId="grid7-1"
+                     [columnDefinitions]="columnDefinitions1"
+                     [gridOptions]="gridOptions1"
+                     [dataset]="dataset1"
+                     (onAngularGridCreated)="angularGrid1Ready($event.detail)">
+  </angular-slickgrid>
+
+  <br />
+  <h5>Grid 2 - <span class="subtitle">with both Header Buttons & Menus</span></h5>
+  <angular-slickgrid gridId="grid7-2"
+                     [columnDefinitions]="columnDefinitions2"
+                     [gridOptions]="gridOptions2"
+                     [dataset]="dataset2"
+                     (onAngularGridCreated)="angularGrid2Ready($event.detail)">
+  </angular-slickgrid>
+
+</div>

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

@@ -0,0 +1,10 @@
+/* 1st grid */
+#grid7-1 {
+  --slick-header-button-float: right;
+}
+
+/* 2nd grid */
+#grid7-2 {
+  --slick-header-button-margin: 4px 0 50px 0;
+  --slick-header-button-float: left;
+}

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

@@ -0,0 +1,233 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+import { AngularGridInstance, Column, GridOption, } from './../modules/angular-slickgrid';
+
+// create a custom Formatter to highlight negative values in red
+let columns1WithHighlightingById: any = {};
+let columns2WithHighlightingById: any = {};
+
+@Component({
+  styleUrls: ['./grid-headerbutton.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './grid-headerbutton.component.html'
+})
+export class GridHeaderButtonComponent implements OnInit {
+  title = 'Example 7: Header Button Plugin';
+  subTitle = `
+    This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to colum headers.
+    These buttons can be specified directly in the column definition, and are very easy to configure and use.
+    (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Menu-&-Header-Buttons" target="_blank">Wiki docs</a>)
+    <ul>
+      <li>Resize the 1st column to see all icon/command</li>
+      <li>Mouse hover the 2nd column to see it's icon/command</li>
+      <li>For all the other columns, click on top-right red circle icon to enable highlight of negative numbers.</li>
+      <li>Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list</li>
+      <ol>
+        <li>These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride"</li>
+        <li>for example the "Column E" does not show the header button via "itemVisibilityOverride"</li>
+        <li>for example the "Column J" header button is displayed but it not usable via "itemUsabilityOverride"</li>
+      </ol>
+    </ul>
+  `;
+
+  columnDefinitions1: Column[] = [];
+  columnDefinitions2: Column[] = [];
+  gridOptions1!: GridOption;
+  gridOptions2!: GridOption;
+  dataset1: any[] = [];
+  dataset2: any[] = [];
+  angularGrid1!: AngularGridInstance;
+  angularGrid2!: AngularGridInstance;
+
+  constructor() {
+    columns1WithHighlightingById = {};
+    columns2WithHighlightingById = {};
+  }
+
+  ngOnInit(): void {
+    this.defineGrid();
+
+    // populate the dataset once the grid is ready
+    this.dataset1 = this.loadData(200, 1);
+    this.dataset2 = this.loadData(200, 2);
+  }
+
+  angularGrid1Ready(angularGrid: AngularGridInstance) {
+    this.angularGrid1 = angularGrid;
+  }
+
+  angularGrid2Ready(angularGrid: AngularGridInstance) {
+    this.angularGrid2 = angularGrid;
+  }
+
+  defineGrid() {
+    this.gridOptions1 = {
+      enableAutoResize: true,
+      enableHeaderButton: true,
+      enableHeaderMenu: false,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableFiltering: false,
+      enableExcelCopyBuffer: true,
+      excelCopyBufferOptions: {
+        onCopyCells: (e, args) => console.log('onCopyCells', e, args),
+        onPasteCells: (e, args) => console.log('onPasteCells', e, args),
+        onCopyCancelled: (e, args) => console.log('onCopyCancelled', e, args),
+      },
+      enableCellNavigation: true,
+      gridHeight: 275,
+      headerButton: {
+        // you can use the "onCommand" (in Grid Options) and/or the "action" callback (in Column Definition)
+        onCommand: (_e, args) => this.handleOnCommand(_e, args, 1)
+      }
+    };
+
+    // grid 2 options, same as grid 1 + extras
+    this.gridOptions2 = {
+      ...this.gridOptions1,
+      enableHeaderMenu: true,
+      enableFiltering: true,
+      // frozenColumn: 2,
+      // frozenRow: 2,
+      headerButton: {
+        // when floating to left, you might want to inverse the icon orders
+        onCommand: (_e, args) => this.handleOnCommand(_e, args, 2)
+      }
+    };
+  }
+
+  handleOnCommand(_e: Event, args: any, gridNo: 1 | 2) {
+    const column = args.column;
+    const button = args.button;
+    const command = args.command;
+
+    if (command === 'toggle-highlight') {
+      if (button.cssClass === 'fa fa-circle red') {
+        if (gridNo === 1) {
+          delete columns1WithHighlightingById[column.id];
+        } else {
+          delete columns2WithHighlightingById[column.id];
+        }
+        button.cssClass = 'fa fa-circle-o red faded';
+        button.tooltip = 'Highlight negative numbers.';
+      } else {
+        if (gridNo === 1) {
+          columns1WithHighlightingById[column.id] = true;
+        } else {
+          columns2WithHighlightingById[column.id] = true;
+        }
+        button.cssClass = 'fa fa-circle red';
+        button.tooltip = 'Remove highlight.';
+      }
+      ((this as any)[`angularGrid${gridNo}`] as AngularGridInstance).slickGrid.invalidate();
+    }
+  }
+
+  loadData(count: number, gridNo: 1 | 2) {
+    // Set up some test columns.
+    for (let i = 0; i < 10; i++) {
+      (this as any)[`columnDefinitions${gridNo}`].push({
+        id: i,
+        name: 'Column ' + String.fromCharCode('A'.charCodeAt(0) + i),
+        field: i + '',
+        width: i === 0 ? 70 : 100, // have the 2 first columns wider
+        filterable: true,
+        sortable: true,
+        formatter: (_row: number, _cell: number, value: any, columnDef: Column) => {
+          if (gridNo === 1 && columns1WithHighlightingById[columnDef.id] && value < 0) {
+            return `<div style="color:red; font-weight:bold;">${value}</div>`;
+          } else if (gridNo === 2 && columns2WithHighlightingById[columnDef.id] && value < 0) {
+            return `<div style="color:red; font-weight:bold;">${value}</div>`;
+          }
+          return value;
+        },
+        header: {
+          buttons: [
+            {
+              cssClass: 'fa fa-circle-o red faded',
+              command: 'toggle-highlight',
+              tooltip: 'Highlight negative numbers.',
+              itemVisibilityOverride: (args: any) => {
+                // for example don't show the header button on column "E"
+                return args.column.name !== 'Column E';
+              },
+              itemUsabilityOverride: (args: any) => {
+                // for example the button usable everywhere except on last column ='J"
+                return args.column.name !== 'Column J';
+              },
+              action: (_e: Event, args: any) => {
+                // you can use the "action" callback and/or subscribe to the "onCallback" event, they both have the same arguments
+                // do something
+                console.log(`execute a callback action to "${args.command}" on ${args.column.name}`);
+              }
+            }
+          ]
+        }
+      });
+    }
+
+    // Set multiple buttons on the first column to demonstrate overflow.
+    (this as any)[`columnDefinitions${gridNo}`][0].name = 'Resize me!';
+    (this as any)[`columnDefinitions${gridNo}`][0].header = {
+      buttons: [
+        {
+          cssClass: 'fa fa-tag',
+          handler: () => {
+            alert('Tag');
+          }
+        },
+        {
+          cssClass: 'fa fa-comment',
+          handler: () => {
+            alert('Comment');
+          }
+        },
+        {
+          cssClass: 'fa fa-info-circle',
+          handler: () => {
+            alert('Info');
+          }
+        },
+        {
+          cssClass: 'fa fa-question-circle',
+          handler: () => {
+            alert('Help');
+          }
+        }
+      ]
+    };
+
+    // when floating to left, you might want to inverse the icon orders
+    if (gridNo === 2) {
+      this.columnDefinitions2[0].header?.buttons?.reverse();
+    }
+
+    // Set a button on the second column to demonstrate hover.
+    (this as any)[`columnDefinitions${gridNo}`][1].name = 'Hover me!';
+    (this as any)[`columnDefinitions${gridNo}`][1].header = {
+      buttons: [
+        {
+          cssClass: 'fa fa-question-circle',
+          showOnHover: true,
+          tooltip: 'This button only appears on hover.',
+          handler: () => {
+            alert('Help');
+          }
+        }
+      ]
+    };
+
+    // mock a dataset
+    const mockDataset = [];
+    for (let i = 0; i < count; i++) {
+      const d: any = (mockDataset[i] = {});
+      d['id'] = i;
+      for (let j = 0; j < (this as any)[`columnDefinitions${gridNo}`].length; j++) {
+        d[j] = Math.round(Math.random() * 10) - 5;
+      }
+    }
+    return mockDataset;
+  }
+}