angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,341 +0,0 @@
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import {
-  AngularGridInstance,
-  Column,
-  ColumnEditorDualInput,
-  Editors,
-  formatNumber,
-  Formatters,
-  Filters,
-  GridOption,
-  SlickEventHandler,
-} from '../../library';
-
-@Component({
-  templateUrl: './example20.component.html',
-  styleUrls: ['./example20.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example20Component implements OnInit, OnDestroy {
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  frozenColumnCount = 2;
-  frozenRowCount = 3;
-  isFrozenBottom = false;
-  gridObj: any;
-  slickEventHandler: any;
-
-  constructor() {
-    this.slickEventHandler = new SlickEventHandler();
-  }
-
-  ngOnInit(): void {
-    this.prepareDataGrid();
-  }
-
-  ngOnDestroy() {
-    // unsubscribe all SlickGrid events
-    this.slickEventHandler.unsubscribeAll();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-
-    // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
-    // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
-    // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
-    this.slickEventHandler.subscribe(this.gridObj.onMouseEnter, (event: Event) => this.colorizeHoveringRow(event, true));
-    this.slickEventHandler.subscribe(this.gridObj.onMouseLeave, (event: Event) => this.colorizeHoveringRow(event, false));
-  }
-
-  colorizeHoveringRow(event: Event, isMouseEnter: boolean) {
-    const cell = this.gridObj.getCellFromEvent(event);
-    const rows = isMouseEnter ? [cell?.row ?? 0] : [];
-    this.gridObj.setSelectedRows(rows); // highlight current row
-    event.preventDefault();
-  }
-
-  prepareDataGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'sel',
-        name: '#',
-        field: 'id',
-        minWidth: 40,
-        width: 40,
-        maxWidth: 40,
-        cannotTriggerInsert: true,
-        resizable: false,
-        unselectable: true,
-      },
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'percentComplete',
-        name: '% Complete',
-        field: 'percentComplete',
-        resizable: false,
-        minWidth: 130,
-        width: 140,
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        filterable: true,
-        filter: { model: Filters.slider, operator: '>=' },
-        sortable: true,
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-        formatter: Formatters.dateIso,
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-        formatter: Formatters.dateIso,
-      },
-      {
-        id: 'cost',
-        name: 'Cost | Duration',
-        field: 'cost',
-        formatter: this.costDurationFormatter.bind(this),
-        minWidth: 150,
-        width: 170,
-        sortable: true,
-        // filterable: true,
-        filter: {
-          model: Filters.compoundSlider,
-        },
-        editor: {
-          model: Editors.dualInput,
-          // the DualInputEditor is of Type ColumnEditorDualInput and MUST include (leftInput/rightInput) in its params object
-          // in each of these 2 properties, you can pass any regular properties of a column editor
-          // and they will be executed following the options defined in each
-          params: {
-            leftInput: {
-              field: 'cost',
-              type: 'float',
-              decimal: 2,
-              minValue: 0,
-              maxValue: 50000,
-              placeholder: '< 50K',
-              errorMessage: 'Cost must be positive and below $50K.',
-            },
-            rightInput: {
-              field: 'duration',
-              type: 'float', // you could have 2 different input type as well
-              minValue: 0,
-              maxValue: 100,
-              title: 'make sure Duration is withing its range of 0 to 100',
-              errorMessage: 'Duration must be between 0 and 100.',
-
-              // Validator Option #1
-              // You could also optionally define a custom validator in 1 or both inputs
-              /*
-              validator: (value, args) => {
-                let isValid = true;
-                let errorMsg = '';
-                if (value < 0 || value > 120) {
-                  isValid = false;
-                  errorMsg = 'Duration MUST be between 0 and 120.';
-                }
-                return { valid: isValid, msg: errorMsg };
-              }
-              */
-            },
-          } as ColumnEditorDualInput,
-
-          // Validator Option #2 (shared Validator) - this is the last alternative, option #1 (independent Validators) is still the recommended way
-          // You can also optionally use a common Validator (if you do then you cannot use the leftInput/rightInput validators at same time)
-          // to compare both values at the same time.
-          /*
-          validator: (values, args) => {
-            let isValid = true;
-            let errorMsg = '';
-            if (values.cost < 0 || values.cost > 50000) {
-              isValid = false;
-              errorMsg = 'Cost MUST be between 0 and 50k.';
-            }
-            if (values.duration < 0 || values.duration > 120) {
-              isValid = false;
-              errorMsg = 'Duration MUST be between 0 and 120.';
-            }
-            if (values.cost < values.duration) {
-              isValid = false;
-              errorMsg = 'Cost can never be lower than its Duration.';
-            }
-            return { valid: isValid, msg: errorMsg };
-          }
-          */
-        },
-      },
-      {
-        id: 'effortDriven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        minWidth: 100,
-        width: 120,
-        formatter: Formatters.checkmarkMaterial,
-        filterable: true,
-        filter: {
-          collection: [
-            { value: '', label: '' },
-            { value: true, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          model: Filters.singleSelect,
-        },
-        sortable: true,
-      },
-      {
-        id: 'title1',
-        name: 'Title 1',
-        field: 'title1',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'title2',
-        name: 'Title 2',
-        field: 'title2',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'title3',
-        name: 'Title 3',
-        field: 'title3',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-      },
-      {
-        id: 'title4',
-        name: 'Title 4',
-        field: 'title4',
-        minWidth: 100,
-        width: 120,
-        filterable: true,
-        sortable: true,
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableExcelCopyBuffer: true,
-      enableCellNavigation: true,
-      editable: true,
-      autoEdit: true,
-      asyncEditorLoading: true,
-      frozenColumn: this.frozenColumnCount,
-      frozenRow: this.frozenRowCount,
-      // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
-
-      gridMenu: { hideClearFrozenColumnsCommand: false },
-      headerMenu: { hideFreezeColumnsCommand: false },
-    };
-
-    // mock a dataset
-    this.dataset = this.getData();
-  }
-
-  getData() {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        cost: i % 33 === 0 ? null : Math.random() * 10000,
-        duration: i % 8 ? Math.round(Math.random() * 100) + '' : null,
-        percentComplete: Math.round(Math.random() * 100),
-        start: new Date(2009, 0, 1),
-        finish: new Date(2009, 4, 5),
-        effortDriven: i % 5 === 0,
-        title1: `Some Text ${Math.round(Math.random() * 25)}`,
-        title2: `Some Text ${Math.round(Math.random() * 25)}`,
-        title3: `Some Text ${Math.round(Math.random() * 25)}`,
-        title4: `Some Text ${Math.round(Math.random() * 25)}`,
-      };
-    }
-    return mockDataset;
-  }
-
-  /** change dynamically, through slickgrid "setOptions()" the number of pinned columns */
-  changeFrozenColumnCount() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenColumn: this.frozenColumnCount,
-      });
-    }
-  }
-
-  /** change dynamically, through slickgrid "setOptions()" the number of pinned rows */
-  changeFrozenRowCount() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenRow: this.frozenRowCount,
-      });
-    }
-  }
-
-  costDurationFormatter(_row: number, _cell: number, _value: any, _columnDef: Column, dataContext: any) {
-    const costText = this.isNullUndefinedOrEmpty(dataContext.cost) ? 'n/a' : formatNumber(dataContext.cost, 0, 2, false, '$', '', '.', ',');
-    let durationText = 'n/a';
-    if (!this.isNullUndefinedOrEmpty(dataContext.duration) && dataContext.duration >= 0) {
-      durationText = `${dataContext.duration} ${dataContext.duration > 1 ? 'days' : 'day'}`;
-    }
-    return `<b>${costText}</b> | ${durationText}`;
-  }
-
-  isNullUndefinedOrEmpty(data: any) {
-    return data === '' || data === null || data === undefined;
-  }
-
-  onValidationError(e: Event, args: any) {
-    alert(args.validationResults.msg);
-  }
-
-  setFrozenColumns(frozenCols: number) {
-    this.gridObj.setOptions({ frozenColumn: frozenCols });
-    this.gridOptions = this.gridObj.getOptions();
-  }
-
-  /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
-  toggleFrozenBottomRows() {
-    if (this.gridObj && this.gridObj.setOptions) {
-      this.gridObj.setOptions({
-        frozenBottom: !this.isFrozenBottom,
-      });
-      this.isFrozenBottom = !this.isFrozenBottom; // toggle the variable
-    }
-  }
-}

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

@@ -1,86 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 21: Grid AutoHeight
-    <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-autoheight.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    The SlickGrid option "autoHeight" can be used if you wish to keep the full height of the grid without any scrolling
-    <ul>
-      <li>You define a fixed grid width via "gridWidth" in the View</li>
-      <li>You can still use the "autoResize" for the width to be resized automatically (the height will never change in this case)</li>
-      <li>
-        This dataset has 25 rows, if you scroll down the page you can see the entire set is shown without any grid scrolling (though you
-        might have browser scrolling)
-      </li>
-    </ul>
-  </div>
-
-  <div class="row row-cols-lg-auto g-1 align-items-center">
-    <div class="col">
-      <label for="columnSelect">Single Search:</label>
-    </div>
-    <div class="col">
-      <select
-        class="form-select"
-        data-test="search-column-list"
-        name="selectedColumn"
-        [(ngModel)]="selectedColumn"
-        (ngModelChange)="updateFilter()"
-      >
-        <option [ngValue]="field" *ngFor="let field of columnDefinitions">{{ field.name }}</option>
-      </select>
-    </div>
-    <div class="col">
-      <select
-        class="form-select"
-        data-test="search-operator-list"
-        name="selectedOperator"
-        [(ngModel)]="selectedOperator"
-        (ngModelChange)="updateFilter()"
-      >
-        <option [ngValue]="operator" *ngFor="let operator of operatorList">{{ operator }}</option>
-      </select>
-    </div>
-
-    <div class="col">
-      <div class="input-group">
-        <input
-          type="text"
-          class="form-control"
-          data-test="search-value-input"
-          name="searchValue"
-          placeholder="search value"
-          autocomplete="off"
-          (input)="updateFilter()"
-          [(ngModel)]="searchValue"
-        />
-        <button
-          class="btn btn-outline-secondary d-flex align-items-center pl-2 pr-2"
-          data-test="clear-search-value"
-          (click)="clearGridSearchInput()"
-        >
-          <span class="mdi mdi-close"></span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <hr />
-
-  <angular-slickgrid
-    gridId="grid21"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,16 +0,0 @@
-// sort indication will show behind Grid Menu since we don't have scroll,
-// we can offset these icons to fix that
-#grid23 {
-    .slick-header-column:last-child {
-        .slick-header-menu-button,
-        .slick-resizable-handle,
-        .slick-sort-indicator,
-        .slick-sort-indicator-numbered {
-            margin-right: 18px; // grid menu icon width
-        }
-    }
-}
-
-.duration-bg {
-    background-color: #e9d4f1 !important;
-}

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

@@ -1,140 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, Formatters, GridOption, OperatorString, SlickDataView, SlickGrid } from '../../library';
-
-@Component({
-  encapsulation: ViewEncapsulation.None,
-  styleUrls: ['./example21.component.scss'],
-  templateUrl: './example21.component.html',
-  standalone: false,
-})
-export class Example21Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  grid!: SlickGrid;
-  dataView!: SlickDataView;
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  operatorList: OperatorString[] = ['=', '<', '<=', '>', '>=', '<>', 'StartsWith', 'EndsWith'];
-  selectedOperator = '=';
-  searchValue = '';
-  selectedColumn?: Column;
-
-  ngOnInit() {
-    this.prepareGrid();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  prepareGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        sortable: true,
-      },
-      {
-        id: 'duration',
-        name: 'Duration (days)',
-        field: 'duration',
-        sortable: true,
-        type: 'number',
-      },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        formatter: Formatters.percentCompleteBar,
-        sortable: true,
-        type: 'number',
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        type: 'date',
-      },
-      {
-        id: 'effort-driven',
-        name: 'Effort Driven',
-        field: 'effortDriven',
-        formatter: Formatters.checkmarkMaterial,
-        sortable: true,
-        type: 'number',
-      },
-    ];
-    this.selectedColumn = this.columnDefinitions[0];
-
-    this.gridOptions = {
-      // if you want to disable autoResize and use a fixed width which requires horizontal scrolling
-      // it's advised to disable the autoFitColumnsOnFirstLoad as well
-      // enableAutoResize: false,
-      // autoFitColumnsOnFirstLoad: false,
-
-      autoHeight: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-
-      // enable the filtering but hide the user filter row since we use our own single filter
-      enableFiltering: true,
-      showHeaderRow: false, // hide the filter row (header row)
-
-      alwaysShowVerticalScroll: false,
-      enableColumnPicker: true,
-      enableCellNavigation: true,
-      enableRowSelection: true,
-    };
-
-    // mock a dataset
-    const mockedDataset = [];
-    for (let i = 0; i < 25; 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);
-
-      mockedDataset[i] = {
-        id: 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),
-        effortDriven: i % 5 === 0,
-      };
-    }
-    this.dataset = mockedDataset;
-  }
-
-  //
-  // -- if any of the Search form input changes, we'll call the updateFilter() method
-  //
-
-  clearGridSearchInput() {
-    this.searchValue = '';
-    this.updateFilter();
-  }
-
-  updateFilter() {
-    this.angularGrid.filterService.updateSingleFilter({
-      columnId: `${this.selectedColumn!.id || ''}`,
-      operator: this.selectedOperator as OperatorString,
-      searchTerms: [this.searchValue || ''],
-    });
-  }
-}

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

@@ -1,41 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 22: Grids in Bootstrap Tabs
-    <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-tabs.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    This example demonstrate the creation of multiple grids in Bootstrap Tabs
-    <ol>
-      <li>Regular mocked data with javascript</li>
-      <li>Load dataset through Http-Client. Also note we need to call a "resizeGrid()" after focusing on this tab</li>
-    </ol>
-  </div>
-
-  <div>
-    <tabset>
-      <tab heading="Javascript" id="javascript" data-test="javascript-tab">
-        <h4>Grid 1 - Load Local Data</h4>
-        <angular-slickgrid gridId="grid1" [columns]="columnDefinitions1" [options]="gridOptions1" [dataset]="dataset1"> </angular-slickgrid>
-      </tab>
-      <tab heading="Http-Client" data-test="http-tab" (selectTab)="resizeGrid2()">
-        <h4>Grid 2 - Load a JSON dataset through Http-Client</h4>
-        <angular-slickgrid
-          gridId="grid2"
-          [columns]="columnDefinitions2"
-          [options]="gridOptions2"
-          [dataset]="dataset2"
-          (onAngularGridCreated)="angularGrid2Ready($event.detail)"
-        >
-        </angular-slickgrid>
-      </tab>
-    </tabset>
-  </div>
-</div>