angular-slickgrid 8.14.1 → 9.0.0

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

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

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

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

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

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