angular-slickgrid 4.2.0 → 4.2.1

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

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

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

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

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

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