angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,383 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+import {
+  AngularGridInstance,
+  AngularUtilService,
+  Column,
+  Editors,
+  Filters,
+  Formatters,
+  GridOption,
+  type MultipleSelectOption,
+  OnEventArgs,
+  SlickGlobalEditorLock,
+  type SliderOption,
+} from '../../library';
+import { EditorNgSelectComponent } from './editor-ng-select.component';
+import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
+import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
+import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
+import { FilterNgSelectComponent } from './filter-ng-select.component';
+import { CustomButtonFormatterComponent } from './custom-buttonFormatter.component';
+
+const NB_ITEMS = 100;
+
+@Component({
+  templateUrl: './example26.component.html',
+  styleUrls: ['./example26.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  providers: [AngularUtilService],
+  standalone: false,
+})
+export class Example26Component implements OnInit {
+  private _commandQueue: any[] = [];
+  angularGrid!: AngularGridInstance;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  gridObj: any;
+  isAutoEdit = true;
+  alertWarning: any;
+  updatedObject: any;
+  selectedLanguage = 'en';
+  assignees = [
+    { id: '', name: '' },
+    { id: '1', name: 'John' },
+    { id: '2', name: 'Pierre' },
+    { id: '3', name: 'Paul' },
+  ];
+
+  constructor(
+    private angularUtilService: AngularUtilService,
+    private translate: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.prepareGrid();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+  }
+
+  prepareGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        editor: {
+          model: Editors.longText,
+          minLength: 5,
+          maxLength: 255,
+        },
+        onCellChange: (e: Event, args: OnEventArgs) => {
+          console.log(args);
+          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
+        },
+      },
+      {
+        id: 'title2',
+        name: 'Title with Angular Component',
+        field: 'title',
+        minWidth: 100,
+        sortable: true,
+        // loading formatter, text to display while Post Render gets processed
+        formatter: () => '...',
+
+        // if the component needs to stay and be interactive after rendering
+        asyncPostRender: this.renderInteractiveAngularComponent.bind(this),
+        params: {
+          component: CustomButtonFormatterComponent,
+          angularUtilService: this.angularUtilService,
+        },
+      },
+      {
+        id: 'assignee',
+        name: 'Assignee',
+        field: 'assignee',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        filter: {
+          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
+          collection: this.assignees,
+          params: {
+            component: FilterNgSelectComponent,
+          },
+        },
+        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
+        queryFieldSorter: 'assignee.name',
+        formatter: Formatters.complexObject,
+        params: {
+          complexFieldLabel: 'assignee.name',
+        },
+        exportWithFormatter: true,
+        editor: {
+          model: CustomAngularComponentEditor,
+          collection: this.assignees,
+          params: {
+            component: EditorNgSelectComponent,
+          },
+        },
+        onCellChange: (e: Event, args: OnEventArgs) => {
+          console.log(args);
+          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
+        },
+      },
+      {
+        id: 'assignee2',
+        name: 'Assignee with Angular Component',
+        field: 'assignee',
+        minWidth: 125,
+        filterable: true,
+        sortable: true,
+        filter: {
+          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
+          collection: this.assignees,
+          params: {
+            component: FilterNgSelectComponent,
+          },
+        },
+        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
+        queryFieldSorter: 'assignee.name',
+
+        // loading formatter, text to display while Post Render gets processed
+        formatter: () => '...',
+
+        // to load an Angular Component, you cannot use a Formatter since Angular needs at least 1 cycle to render everything
+        // you can use a PostRenderer but you will visually see the data appearing,
+        // which is why it's still better to use regular Formatter instead of Angular Component
+        asyncPostRender: this.renderAngularComponent.bind(this),
+        params: {
+          component: CustomTitleFormatterComponent,
+          angularUtilService: this.angularUtilService,
+          complexFieldLabel: 'assignee.name', // for the exportCustomFormatter
+        },
+        exportCustomFormatter: Formatters.complexObject,
+      },
+      {
+        id: 'complete',
+        name: '% Complete',
+        field: 'percentComplete',
+        minWidth: 100,
+        filterable: true,
+        formatter: Formatters.multiple,
+        type: 'number',
+        editor: {
+          model: Editors.singleSelect,
+
+          // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
+          enableRenderHtml: true,
+          collection: Array.from(Array(101).keys()).map((k) => ({
+            value: k,
+            label: k,
+            symbol: '<i class="mdi mdi-percent-outline" style="color:cadetblue"></i>',
+          })),
+          customStructure: {
+            value: 'value',
+            label: 'label',
+            labelSuffix: 'symbol',
+          },
+          options: { maxHeight: 400 } as MultipleSelectOption,
+        },
+        filter: {
+          model: Filters.slider,
+          operator: '>=',
+          options: { hideSliderNumber: false } as SliderOption,
+        },
+        params: {
+          formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar],
+        },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        minWidth: 100,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        sortable: true,
+        type: 'date',
+        editor: {
+          model: Editors.date,
+        },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        minWidth: 100,
+        filterable: true,
+        sortable: true,
+        filter: { model: Filters.compoundDate },
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        type: 'date',
+        editor: {
+          model: Editors.date,
+        },
+      },
+      {
+        id: 'action',
+        name: 'Action',
+        field: 'id',
+        maxWidth: 100,
+        formatter: () => `<div class="cell-menu-dropdown">Action<i class="mdi mdi-chevron-down"></i></div>`,
+        cellMenu: {
+          commandTitle: 'Commands',
+          commandItems: [
+            {
+              command: 'help',
+              title: 'Help',
+              iconCssClass: 'mdi mdi-help-circle text-info',
+              positionOrder: 66,
+              action: () => alert('Please Help!'),
+            },
+            {
+              command: 'delete-row',
+              title: 'Delete Row',
+              positionOrder: 64,
+              iconCssClass: 'mdi mdi-close color-danger',
+              cssClass: 'red',
+              textCssClass: 'text-italic color-danger-light',
+              action: (_event, args) => this.angularGrid.gridService.deleteItemById(args.dataContext.id),
+            },
+          ],
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      asyncEditorLoading: false,
+      autoEdit: this.isAutoEdit,
+      autoCommitEdit: false,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      headerRowHeight: 45,
+      rowHeight: 45, // increase row height so that the ng-select fits in the cell
+      editable: true,
+      enableCellMenu: true,
+      enableCellNavigation: true,
+      enableColumnPicker: true,
+      enableExcelCopyBuffer: true,
+      enableFiltering: true,
+      enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
+      asyncPostRenderDelay: 0, // also make sure to remove any delay to render it
+      editCommandHandler: (item, column, editCommand) => {
+        this._commandQueue.push(editCommand);
+        editCommand.execute();
+      },
+      i18n: this.translate,
+      params: {
+        angularUtilService: this.angularUtilService, // provide the service to all at once (Editor, Filter, AsyncPostRender)
+      },
+    };
+
+    this.dataset = this.mockData(NB_ITEMS);
+  }
+
+  mockData(itemCount: number, startingIndex = 0) {
+    // mock a dataset
+    const tempDataset = [];
+    for (let i = startingIndex; i < startingIndex + itemCount; 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);
+
+      tempDataset.push({
+        id: i,
+        title: 'Task ' + i,
+        assignee: i % 3 ? this.assignees[3] : i % 2 ? this.assignees[2] : this.assignees[1],
+        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,
+      });
+    }
+    return tempDataset;
+  }
+
+  onCellChanged(e: Event, args: any) {
+    this.updatedObject = args.item;
+  }
+
+  onCellClicked(e: Event, args: any) {
+    const metadata = this.angularGrid.gridService.getColumnFromEventArguments(args);
+    console.log(metadata);
+
+    if (metadata.columnDef.id === 'edit') {
+      this.alertWarning = `open a modal window to edit: ${metadata.dataContext.title}`;
+
+      // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
+      this.angularGrid.gridService.highlightRow(args.row, 1500);
+
+      // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
+      // this.angularGrid.gridService.setSelectedRow(args.row);
+    } else if (metadata.columnDef.id === 'delete') {
+      if (confirm('Are you sure?')) {
+        this.angularGrid.gridService.deleteItemById(metadata.dataContext.id);
+      }
+    }
+  }
+
+  onCellValidationError(e: Event, args: any) {
+    alert(args.validationResults.msg);
+  }
+
+  changeAutoCommit() {
+    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
+    this.gridObj.setOptions({
+      autoCommitEdit: this.gridOptions.autoCommitEdit,
+    });
+    return true;
+  }
+
+  setAutoEdit(isAutoEdit: boolean) {
+    this.isAutoEdit = isAutoEdit;
+    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
+    return true;
+  }
+
+  undo() {
+    const command = this._commandQueue.pop();
+    if (command && SlickGlobalEditorLock.cancelCurrentEdit()) {
+      command.undo();
+      this.gridObj.gotoCell(command.row, command.cell, false);
+    }
+  }
+
+  renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
+    if (colDef.params.component) {
+      // the last 2 arguments of createAngularComponent() are optional
+      // but when they are provided, that is the DOM target (cellNode) and the dataContext,
+      // the util will render everything for you without too much delay
+      const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component, cellNode, { item: dataContext });
+      componentOutput.componentRef.destroy(); // cleanup no longer needed temp component
+    }
+  }
+
+  renderInteractiveAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
+    if (colDef.params.component) {
+      this.angularUtilService.createInteractiveAngularComponent(colDef.params.component, cellNode, { item: dataContext });
+    }
+  }
+
+  /* Create an Action Dropdown Menu */
+  deleteCell(rowNumber: number) {
+    const item = this.angularGrid.dataView.getItem(rowNumber);
+    this.angularGrid.gridService.deleteItemById(item.id);
+  }
+}

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

@@ -0,0 +1,138 @@
+<div class="container-fluid">
+  <h2>
+    Example 27: Tree Data
+    <small>
+      <span class="mdi mdi-file-tree mdi-27px"></span> (from a flat dataset with <code>parentId</code> references -
+      <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/tree-data-grid" target="_blank">Wiki</a>)</small
+    >
+    <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-tree-data-parent-child.component.ts"
+      >
+        <span class="mdi mdi-link mdi-v-align-sub"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    <ul>
+      <li>It is assumed that your dataset will have Parent/Child references AND also Tree Level (indent) property.</li>
+      <ul>
+        <li>
+          If you do not have the Tree Level (indent), you could call "convertParentChildArrayToHierarchicalView()" then call
+          "convertHierarchicalViewToParentChildArray()"
+        </li>
+        <li>
+          You could also pass the result of "convertParentChildArrayToHierarchicalView()" to "dataset-hierarchical.bind" as defined in the
+          next Hierarchical Example
+        </li>
+      </ul>
+    </ul>
+  </div>
+
+  <div class="row" style="margin-bottom: 4px">
+    <div class="col-md-12">
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500-rows-btn" (click)="loadData(500)">500 rows</button>
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" (click)="loadData(25000)">25k rows</button>
+      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-xs btn-icon" data-test="change-filter-dynamically">
+        <span class="mdi mdi-filter-outline"></span>
+        <span>Dynamically Change Filter (% complete &lt; 40)</span>
+      </button>
+      <button (click)="collapseAllWithoutEvent()" data-test="collapse-all-noevent-btn" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span class="icon mdi mdi-arrow-collapse"></span>
+        <span>Collapse All (without triggering event)</span>
+      </button>
+      <button
+        (click)="reapplyToggledItems()"
+        data-test="reapply-toggled-items-btn"
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        [disabled]="hasNoExpandCollapseChanged"
+      >
+        <span class="icon mdi mdi-history"></span>
+        <span>Reapply Previous Toggled Items</span>
+      </button>
+      <button (click)="collapseAllWithoutEvent()" class="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-noevent-btn">
+        <span class="mdi mdi-arrow-collapse"></span>
+        <span>Collapse All (without triggering event)</span>
+      </button>
+      <button
+        (click)="dynamicallyToggledFirstParent()"
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="dynamically-toggle-first-parent-btn"
+      >
+        <span>Dynamically Toggle First Parent</span>
+      </button>
+      <button
+        (click)="reapplyToggledItems()"
+        data-test="reapply-toggled-items-btn"
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        [disabled]="hasNoExpandCollapseChanged"
+      >
+        <span class="mdi mdi-history"></span>
+        <span>Reapply Previous Toggled Items</span>
+      </button>
+      <div [class]="loadingClass"></div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <button (click)="addNewRow()" data-test="add-item-btn" class="btn btn-primary btn-xs btn-icon">
+        <span class="icon mdi mdi-plus color-white"></span>
+        <span>Add New Item to "Task 1" group</span>
+      </button>
+      <button (click)="updateFirstRow()" data-test="update-item-btn" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span class="icon mdi mdi-pencil"></span>
+        <span>Update 1st Row Item</span>
+      </button>
+      <button (click)="collapseAll()" data-test="collapse-all-btn" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span class="icon mdi mdi-arrow-collapse"></span>
+        <span>Collapse All</span>
+      </button>
+      <button (click)="expandAll()" data-test="expand-all-btn" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span class="icon mdi mdi-arrow-expand"></span>
+        <span>Expand All</span>
+      </button>
+      <button (click)="logTreeDataToggledItems()" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span>Log Tree Toggled Items</span>
+      </button>
+      <button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-xs btn-icon" title="console.log of the Flat dataset">
+        <span>Log Flat Structure</span>
+      </button>
+      <button
+        (click)="logHierarchicalStructure()"
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        title="console.log of the Hierarchical Tree dataset"
+      >
+        <span>Log Hierarchical Structure</span>
+      </button>
+      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-xs btn-icon">
+        <span>Dynamically Change Filter (% complete &lt; 40)</span>
+      </button>
+    </div>
+  </div>
+
+  <br />
+
+  <angular-slickgrid
+    gridId="grid27"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onGridStateChanged)="handleOnGridStateChanged($event.detail)"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onBeforeFilterChange)="showSpinner()"
+    (onFilterChanged)="hideSpinner()"
+    (onBeforeFilterClear)="showSpinner()"
+    (onFilterCleared)="hideSpinner()"
+    (onBeforeSortChange)="showSpinner()"
+    (onSortChanged)="hideSpinner()"
+    (onBeforeToggleTreeCollapse)="showSpinner()"
+    (onToggle-tree-collapsed)="hideSpinner()"
+    (onTree-full-toggle-start)="showSpinner()"
+    (onTree-full-toggle-end)="handleOnTreeFullToggleEnd($event.detail)"
+    (onTree-item-toggled)="handleOnTreeItemToggled($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,10 @@
+/* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
+// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
+
+#grid28 {
+  .slick-cell {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+}