angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,375 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { AngularGridInstance, Column, Formatter, GridOption, type ItemMetadata } from '../../library';
-
-const rowCellValueFormatter: Formatter = (row, cell, value) =>
-  `<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
-const rowCellValueExportFormatter: Formatter = (_row, _cell, value) => value.toFixed(2);
-
-@Component({
-  styleUrls: ['example44.component.scss'],
-  templateUrl: './example44.component.html',
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example44Component implements OnInit {
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  angularGrid!: AngularGridInstance;
-  dataLn: number | string = 'loading...';
-  dataset: any[] = [];
-  hideSubTitle = false;
-  scrollToRow = 100;
-  metadata: Record<number, ItemMetadata> = {
-    0: {
-      columns: {
-        1: { rowspan: 3 },
-      },
-    },
-    2: {
-      columns: {
-        0: { rowspan: 3 },
-        3: { colspan: 3 },
-      },
-    },
-    3: {
-      columns: {
-        1: { rowspan: 5, colspan: 1, cssClass: 'cell-var-span' },
-        // 1: { rowspan: 3, colspan: 2, cssClass: "cell-var-span" },
-        3: { rowspan: 3, colspan: 5 },
-      },
-    },
-    8: {
-      columns: {
-        1: { rowspan: 80 },
-        3: { rowspan: 1999, colspan: 2, cssClass: 'cell-very-high' },
-      },
-    },
-    12: {
-      columns: {
-        11: { rowspan: 3 },
-      },
-    },
-    15: {
-      columns: {
-        18: { colspan: 4, rowspan: 3 },
-      },
-    },
-    85: {
-      columns: {
-        5: { rowspan: 20 },
-      },
-    },
-  };
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnInit(): void {
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-
-    // mock a dataset
-    this.loadData(500);
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', minWidth: 80 },
-      {
-        id: 'revenueGrowth',
-        name: 'Revenue Growth',
-        field: 'revenueGrowth',
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-        minWidth: 120,
-      },
-      {
-        id: 'pricingPolicy',
-        name: 'Pricing Policy',
-        field: 'pricingPolicy',
-        minWidth: 110,
-        sortable: true,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'policyIndex',
-        name: 'Policy Index',
-        field: 'policyIndex',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'expenseControl',
-        name: 'Expense Control',
-        field: 'expenseControl',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'excessCash',
-        name: 'Excess Cash',
-        field: 'excessCash',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'netTradeCycle',
-        name: 'Net Trade Cycle',
-        field: 'netTradeCycle',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'costCapital',
-        name: 'Cost of Capital',
-        field: 'costCapital',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'revenueGrowth2',
-        name: 'Revenue Growth',
-        field: 'revenueGrowth2',
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-        minWidth: 120,
-      },
-      {
-        id: 'pricingPolicy2',
-        name: 'Pricing Policy',
-        field: 'pricingPolicy2',
-        minWidth: 110,
-        sortable: true,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'policyIndex2',
-        name: 'Policy Index',
-        field: 'policyIndex2',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'expenseControl2',
-        name: 'Expense Control',
-        field: 'expenseControl2',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'excessCash2',
-        name: 'Excess Cash',
-        field: 'excessCash2',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'netTradeCycle2',
-        name: 'Net Trade Cycle',
-        field: 'netTradeCycle2',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'costCapital2',
-        name: 'Cost of Capital',
-        field: 'costCapital2',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'revenueGrowth3',
-        name: 'Revenue Growth',
-        field: 'revenueGrowth3',
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-        minWidth: 120,
-      },
-      {
-        id: 'pricingPolicy3',
-        name: 'Pricing Policy',
-        field: 'pricingPolicy3',
-        minWidth: 110,
-        sortable: true,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'policyIndex3',
-        name: 'Policy Index',
-        field: 'policyIndex3',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'expenseControl3',
-        name: 'Expense Control',
-        field: 'expenseControl3',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'excessCash3',
-        name: 'Excess Cash',
-        field: 'excessCash3',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'netTradeCycle3',
-        name: 'Net Trade Cycle',
-        field: 'netTradeCycle3',
-        minWidth: 110,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-      {
-        id: 'costCapital3',
-        name: 'Cost of Capital',
-        field: 'costCapital3',
-        minWidth: 100,
-        exportCustomFormatter: rowCellValueExportFormatter,
-        formatter: rowCellValueFormatter,
-        type: 'number',
-      },
-    ];
-
-    this.gridOptions = {
-      enableCellNavigation: true,
-      enableColumnReorder: true,
-      enableCellRowSpan: true,
-      enableHeaderMenu: false,
-      gridHeight: 600,
-      gridWidth: 900,
-      rowHeight: 30,
-      dataView: {
-        globalItemMetadataProvider: {
-          getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
-        },
-      },
-      enableExcelExport: true,
-      externalResources: [new ExcelExportService()],
-      rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
-    };
-  }
-
-  clearScrollTo() {
-    this.scrollToRow = 0;
-    document.querySelector<HTMLInputElement>('#nRow')?.focus();
-  }
-
-  loadData(count: number) {
-    this.dataLn = 'loading...';
-
-    // add a delay just to show the "loading" text before it loads all data
-    setTimeout(() => {
-      // mock data
-      const tmpArray: any[] = [];
-      for (let i = 0; i < count; i++) {
-        tmpArray[i] = {
-          id: i,
-          title: 'Task ' + i,
-          revenueGrowth: Math.random() * Math.pow(10, Math.random() * 3),
-          pricingPolicy: Math.random() * Math.pow(10, Math.random() * 3),
-          policyIndex: Math.random() * Math.pow(10, Math.random() * 3),
-          expenseControl: Math.random() * Math.pow(10, Math.random() * 3),
-          excessCash: Math.random() * Math.pow(10, Math.random() * 3),
-          netTradeCycle: Math.random() * Math.pow(10, Math.random() * 3),
-          costCapital: Math.random() * Math.pow(10, Math.random() * 3),
-          revenueGrowth2: Math.random() * Math.pow(10, Math.random() * 3),
-          pricingPolicy2: Math.random() * Math.pow(10, Math.random() * 3),
-          policyIndex2: Math.random() * Math.pow(10, Math.random() * 3),
-          expenseControl2: Math.random() * Math.pow(10, Math.random() * 3),
-          excessCash2: Math.random() * Math.pow(10, Math.random() * 3),
-          netTradeCycle2: Math.random() * Math.pow(10, Math.random() * 3),
-          costCapital2: Math.random() * Math.pow(10, Math.random() * 3),
-          revenueGrowth3: Math.random() * Math.pow(10, Math.random() * 3),
-          pricingPolicy3: Math.random() * Math.pow(10, Math.random() * 3),
-          policyIndex3: Math.random() * Math.pow(10, Math.random() * 3),
-          expenseControl3: Math.random() * Math.pow(10, Math.random() * 3),
-          excessCash3: Math.random() * Math.pow(10, Math.random() * 3),
-          netTradeCycle3: Math.random() * Math.pow(10, Math.random() * 3),
-          costCapital3: Math.random() * Math.pow(10, Math.random() * 3),
-        };
-      }
-
-      // let's keep column 3-4 as the row spanning from row 8 until the end of the grid
-      this.metadata[8].columns![3].rowspan = tmpArray.length - 8;
-
-      this.angularGrid?.dataView?.beginUpdate();
-      this.angularGrid?.dataView?.setItems(tmpArray);
-      this.angularGrid?.dataView?.endUpdate();
-      this.dataLn = count;
-    }, 20);
-  }
-
-  /**
-   * 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 object must always be in the form of:: { columns: { [columnName]: { colspan: number|'*' } }}
-   */
-  renderDifferentColspan(_item: any, row: number): any {
-    return (this.metadata[row] as ItemMetadata)?.attributes
-      ? this.metadata[row]
-      : (this.metadata[row] = { attributes: { 'data-row': row }, ...this.metadata[row] });
-  }
-
-  handleToggleSpans() {
-    const cell = this.metadata[3].columns![1];
-    if (cell.colspan === 1) {
-      cell.rowspan = 3;
-      cell.colspan = 2;
-    } else {
-      cell.rowspan = 5;
-      cell.colspan = 1;
-    }
-
-    // row index 3 can have a rowspan of up to 5 rows, so we need to invalidate from row 3 + 5 (-1 because of zero index)
-    // so: 3 + 5 - 1 => row indexes 3 to 7
-    this.angularGrid.slickGrid?.invalidateRows([3, 4, 5, 6, 7]);
-    this.angularGrid.slickGrid?.render();
-  }
-
-  handleScrollTo() {
-    // const args = event.detail && event.detail.args;
-    this.angularGrid.slickGrid?.scrollRowToTop(this.scrollToRow);
-    return false;
-  }
-}

package/src/demos/examples/example45-detail.component.html

@@ -1,15 +0,0 @@
-<div [class]="innerGridClass">
-  <h4>{{ model.companyName }} - Order Details (id: {{ model.id }})</h4>
-  <div class="container-fluid">
-    <angular-slickgrid
-      class="innergrid"
-      [gridId]="innerGridId"
-      [columns]="innerColDefs"
-      [options]="innerGridOptions"
-      [dataset]="innerDataset"
-      (onAngularGridCreated)="angularGridReady($event.detail)"
-      (onBeforeGridDestroy)="handleBeforeGridDestroy()"
-    >
-    </angular-slickgrid>
-  </div>
-</div>

package/src/demos/examples/example45-detail.component.ts

@@ -1,97 +0,0 @@
-import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, GridOption, GridState } from '../../library';
-
-export interface Distributor {
-  id: number;
-  companyId: number;
-  companyName: string;
-  city: string;
-  streetAddress: string;
-  zipCode: string;
-  country: string;
-  orderData: OrderData[];
-  isUsingInnerGridStatePresets: boolean;
-}
-
-export interface OrderData {
-  orderId: string;
-  shipCity: string;
-  freight: number;
-  shipName: string;
-}
-
-@Component({
-  styles: ['.innergrid { --slick-header-menu-display: inline-block; }'],
-  templateUrl: './example45-detail.component.html',
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example45DetailComponent implements OnDestroy, OnInit {
-  model!: Distributor;
-  innerColDefs: Column[] = [];
-  innerGridOptions!: GridOption;
-  angularGrid!: AngularGridInstance;
-  innerDataset: any[] = [];
-  innerGridId = '';
-  innerGridClass = '';
-  showGrid = false;
-
-  ngOnInit(): void {
-    this.innerGridId = `innergrid-${this.model.id}`;
-    this.innerGridClass = `row-detail-${this.model.id}`;
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-
-    // mock some data (different in each dataset)
-    this.innerDataset = [...this.model.orderData];
-    this.showGrid = true;
-  }
-
-  ngOnDestroy(): void {
-    console.log('destroying row detail', this.model.id);
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  defineGrid() {
-    // when Grid State found in Session Storage, reapply inner Grid State then reapply it as preset
-    let gridState: GridState | undefined;
-    if (this.model.isUsingInnerGridStatePresets) {
-      const gridStateStr = sessionStorage.getItem(`gridstate_${this.innerGridClass}`);
-      if (gridStateStr) {
-        gridState = JSON.parse(gridStateStr);
-      }
-    }
-
-    this.innerColDefs = [
-      { id: 'orderId', field: 'orderId', name: 'Order ID', filterable: true, sortable: true },
-      { id: 'shipCity', field: 'shipCity', name: 'Ship City', filterable: true, sortable: true },
-      { id: 'freight', field: 'freight', name: 'Freight', filterable: true, sortable: true, type: 'number' },
-      { id: 'shipName', field: 'shipName', name: 'Ship Name', filterable: true, sortable: true },
-    ];
-
-    this.innerGridOptions = {
-      autoResize: {
-        container: `.${this.innerGridClass}`,
-        rightPadding: 30,
-        minHeight: 200,
-      },
-      enableFiltering: true,
-      enableSorting: true,
-      rowHeight: 33,
-      enableCellNavigation: true,
-      datasetIdPropertyName: 'orderId',
-      presets: gridState,
-      rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
-    };
-  }
-
-  handleBeforeGridDestroy() {
-    if (this.model.isUsingInnerGridStatePresets) {
-      const gridState = this.angularGrid.gridStateService.getCurrentGridState();
-      sessionStorage.setItem(`gridstate_${this.innerGridClass}`, JSON.stringify(gridState));
-    }
-  }
-}

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

@@ -1,110 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 45: Row Detail with inner Grid
-    <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/grid45.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      (click)="hideSubTitle = !hideSubTitle"
-    >
-      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
-    </button>
-    <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
-  </h2>
-
-  <div class="subtitle" [hidden]="hideSubTitle">
-    Add functionality to show extra information with a Row Detail View, (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/row-detail"
-      target="_blank"
-      >Wiki docs</a
-    >), we'll use an inner grid inside our Row Detail Component. Note that because SlickGrid uses Virtual Scroll, the rows and row details
-    are often be re-rendered (when row is out of viewport range) and this means unmounting Row Detail Component which indirectly mean that
-    all component states (dynamic elements, forms, ...) will be disposed as well, however you can use Grid State/Presets to reapply previous
-    state whenever the row detail gets re-rendered when back to viewport.
-  </div>
-
-  <div class="row">
-    <div class="col-sm-10">
-      <button class="btn btn-outline-secondary btn-sm btn-icon ms-1" data-test="collapse-all-btn" (click)="closeAllRowDetail()">
-        Close all Row Details
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="redraw-all-btn" (click)="redrawAllRowDetail()">
-        Force redraw all Row Details
-      </button>
-
-      <span class="d-inline-flex gap-4px">
-        <label for="detailViewRowCount">Detail View Rows Shown: </label>
-        <input
-          id="detailViewRowCount"
-          data-test="detail-view-row-count"
-          type="number"
-          style="height: 22px; width: 40px"
-          [(ngModel)]="detailViewRowCount"
-        />
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          style="height: 26px"
-          data-test="set-count-btn"
-          (click)="changeDetailViewRowCount()"
-        >
-          Set
-        </button>
-        <label for="serverdelay" class="ms-2">Server Delay: </label>
-        <input
-          id="serverdelay"
-          [(ngModel)]="serverWaitDelay"
-          type="number"
-          data-test="server-delay"
-          style="height: 26px; width: 55px"
-          title="input a fake timer delay to simulate slow server response"
-        />
-        <label class="checkbox-inline control-label ms-2" for="useInnerGridStatePresets">
-          <input
-            type="checkbox"
-            id="useInnerGridStatePresets"
-            data-test="use-inner-grid-state-presets"
-            [checked]="isUsingInnerGridStatePresets"
-            (click)="changeUsingInnerGridStatePresets()"
-          />
-          <span
-            title="should we use Grid State/Presets to keep the inner grid state whenever Row Details are out and back to viewport and re-rendered"
-          >
-            Use Inner Grid State/Presets
-          </span>
-        </label>
-
-        <label class="checkbox-inline control-label ms-2" for="useResizeAutoHeight">
-          <input
-            type="checkbox"
-            id="useResizeAutoHeight"
-            data-test="use-auto-height"
-            [checked]="isUsingAutoHeight"
-            (click)="changeUsingResizerAutoHeight()"
-          />
-          Use <code>autoResize.autoHeight</code>
-        </label>
-      </span>
-    </div>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid45"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

package/src/demos/examples/example45.component.scss

@@ -1,50 +0,0 @@
-#grid45 {
-  --slick-cell-active-box-shadow: inset 0 0 0 1px #e35ddc;
-
-  .slick-row.even .slick-cell.cell-very-high {
-    background-color: #f0ffe0;
-  }
-  .slick-row.odd .slick-cell.cell-var-span {
-    background-color: #87ceeb;
-  }
-  .slick-row .slick-cell.rowspan {
-    background-color: #95b7a2;
-    z-index: 10;
-  }
-  .slick-row[data-row='3'] .slick-cell.l3.rowspan {
-    background-color: #95b7a2;
-  }
-  .slick-row[data-row='2'] .slick-cell.l3.r5 {
-    background-color: #ddfffc;
-  }
-  .slick-row[data-row='0'] .slick-cell.rowspan,
-  .slick-row[data-row='8'] .slick-cell.rowspan {
-    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQ0lEQVQYV2N8/fr1fwY84M6dOwyM+BSBFKioqOBWBFMAsgSrScgKsCpCV4ChCJsCFEW4FMAV4VMAVnT8+PH/IG/iAwDA1DlezHn8bwAAAABJRU5ErkJggg==);
-  }
-  .slick-row[data-row='8'] .slick-cell.rowspan:nth-child(4) {
-    background: #f0ffe0;
-  }
-  .slick-row[data-row='12'] .slick-cell.rowspan {
-    background: #bd8b8b;
-  }
-  .slick-row[data-row='15'] .slick-cell.rowspan {
-    background: #edc12e;
-  }
-  .slick-row[data-row='85'] .slick-cell.rowspan {
-    background: #8baebd;
-  }
-  .slick-cell.active {
-    /* use a different active cell color to make it a bit more obvious */
-    box-shadow: inset 0 0 0 1px #e35ddc;
-  }
-  .cellValue {
-    float: right;
-    font-size: 14px;
-  }
-  .valueComment {
-    color: #7c8983;
-    font-size: 12px;
-    font-style: italic;
-    width: fit-content;
-  }
-}