angular-slickgrid 4.1.4 → 4.2.0

package/src/app/examples/grid-tree-data-hierarchical.component.ts

@@ -0,0 +1,311 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+import {
+  AngularGridInstance,
+  Column,
+  FieldType,
+  Filters,
+  Formatter,
+  Formatters,
+  GridOption,
+  findItemInTreeStructure,
+} from './../modules/angular-slickgrid';
+
+@Component({
+  templateUrl: './grid-tree-data-hierarchical.component.html',
+  styleUrls: ['grid-tree-data-hierarchical.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class GridTreeDataHierarchicalComponent implements OnInit {
+  title = 'Example 29: Tree Data <small> <span class="mdi mdi-file-tree mdi-27px"></span> (from a Hierarchical Dataset - <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Tree-Data-Grid" target="_blank">Wiki</a>)</small>';
+  subTitle = `<ul>
+    <li><b>NOTE:</b> The grid will automatically sort Ascending with the column that has the Tree Data, you could add a "sortByFieldId" in your column "treeData" option if you wish to sort on a different column</li>
+    <li><b>Styling - Salesforce Theme</b></li>
+    <ul>
+      <li>The Salesforce Theme was created with SASS and compiled in CSS (<a href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/modules/angular-slickgrid/styles/slickgrid-theme-salesforce.scss" target="_blank">slickgrid-theme-salesforce.scss</a>), you can override any of its SASS variables</li>
+      <li>We use a small subset of <a href="https://materialdesignicons.com/" target="_blank">Material Design Icons</a></li>
+      <li>you might need to refresh the page to clear the browser cache and see the correct theme</li>
+    </ul>
+  `;
+
+  angularGrid!: AngularGridInstance;
+  dataViewObj: any;
+  gridObj: any;
+  gridOptions!: GridOption;
+  columnDefinitions!: Column[];
+  datasetHierarchical: any[] = [];
+  isExcludingChildWhenFiltering = false;
+  isAutoApproveParentItemWhenTreeColumnIsValid = true;
+  searchString = '';
+
+  constructor() { }
+
+  ngOnInit(): void {
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
+
+    // mock a dataset
+    this.datasetHierarchical = this.mockDataset();
+  }
+
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'file', name: 'Files', field: 'file',
+        type: FieldType.string, width: 150, formatter: this.treeFormatter,
+        filterable: true, sortable: true,
+      },
+      {
+        id: 'dateModified', name: 'Date Modified', field: 'dateModified',
+        formatter: Formatters.dateIso, type: FieldType.dateUtc, outputType: FieldType.dateIso, minWidth: 90,
+        exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate }
+      },
+      {
+        id: 'description', name: 'Description', field: 'description', minWidth: 90,
+        filterable: true, sortable: true,
+      },
+      {
+        id: 'size', name: 'Size', field: 'size', minWidth: 90,
+        type: FieldType.number, exportWithFormatter: true,
+        filterable: true, filter: { model: Filters.compoundInputNumber },
+        formatter: (row, cell, value) => isNaN(value) ? '' : `${value} MB`,
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableAutoSizeColumns: true,
+      enableAutoResize: true,
+      enableExcelExport: true,
+      excelExportOptions: {
+        exportWithFormatter: true,
+        sanitizeDataExport: true
+      },
+      registerExternalResources: [new ExcelExportService()],
+      enableFiltering: true,
+      enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
+      multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
+      treeDataOptions: {
+        columnId: 'file',
+        childrenPropName: 'files',
+        excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false
+
+        // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
+        // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
+        // this flag only works with the other flag set to `excludeChildrenWhenFilteringTree: false`
+        autoApproveParentItemWhenTreeColumnIsValid: this.isAutoApproveParentItemWhenTreeColumnIsValid,
+
+        // you can also optionally sort by a different column and/or change sort direction
+        // initialSort: {
+        //   columnId: 'file',
+        //   direction: 'DESC'
+        // }
+      },
+      // change header/cell row height for salesforce theme
+      headerRowHeight: 35,
+      rowHeight: 33,
+      showCustomFooter: true,
+
+      // we can also preset collapsed items via Grid Presets (parentId: 4 => is the "pdf" folder)
+      presets: {
+        treeData: { toggledItems: [{ itemId: 4, isCollapsed: true }] },
+      },
+      // use Material Design SVG icons
+      contextMenu: {
+        iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
+        iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
+        iconClearGroupingCommand: 'mdi mdi-close',
+        iconCopyCellValueCommand: 'mdi mdi-content-copy',
+        iconExportCsvCommand: 'mdi mdi-download',
+        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+        iconExportTextDelimitedCommand: 'mdi mdi-download',
+      },
+      gridMenu: {
+        iconCssClass: 'mdi mdi-menu',
+        iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
+        iconClearAllSortingCommand: 'mdi mdi-swap-vertical',
+        iconExportCsvCommand: 'mdi mdi-download',
+        iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+        iconExportTextDelimitedCommand: 'mdi mdi-download',
+        iconRefreshDatasetCommand: 'mdi mdi-sync',
+        iconToggleFilterCommand: 'mdi mdi-flip-vertical',
+        iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
+      },
+      headerMenu: {
+        iconClearFilterCommand: 'mdi mdi mdi-filter-remove-outline',
+        iconClearSortCommand: 'mdi mdi-swap-vertical',
+        iconSortAscCommand: 'mdi mdi-sort-ascending',
+        iconSortDescCommand: 'mdi mdi-flip-v mdi-sort-descending',
+        iconColumnHideCommand: 'mdi mdi-close',
+      }
+    };
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+    this.dataViewObj = angularGrid.dataView;
+  }
+
+  changeAutoApproveParentItem() {
+    this.isAutoApproveParentItemWhenTreeColumnIsValid = !this.isAutoApproveParentItemWhenTreeColumnIsValid;
+    this.gridOptions.treeDataOptions!.autoApproveParentItemWhenTreeColumnIsValid = this.isAutoApproveParentItemWhenTreeColumnIsValid;
+    this.angularGrid.slickGrid.setOptions(this.gridOptions);
+    this.angularGrid.filterService.refreshTreeDataFilters();
+    return true;
+  }
+
+  changeExcludeChildWhenFiltering() {
+    this.isExcludingChildWhenFiltering = !this.isExcludingChildWhenFiltering;
+    this.gridOptions.treeDataOptions!.excludeChildrenWhenFilteringTree = this.isExcludingChildWhenFiltering;
+    this.angularGrid.slickGrid.setOptions(this.gridOptions);
+    this.angularGrid.filterService.refreshTreeDataFilters();
+    return true;
+  }
+
+  clearSearch() {
+    this.searchString = '';
+    this.updateFilter();
+  }
+
+  searchStringChanged() {
+    this.updateFilter();
+  }
+
+  updateFilter() {
+    this.angularGrid.filterService.updateFilters([{ columnId: 'file', searchTerms: [this.searchString] }], true, false, true);
+  }
+
+  treeFormatter: Formatter = (_row, _cell, value, _columnDef, dataContext, grid) => {
+    const gridOptions = grid.getOptions() as GridOption;
+    const treeLevelPropName = gridOptions.treeDataOptions && gridOptions.treeDataOptions.levelPropName || '__treeLevel';
+    if (value === null || value === undefined || dataContext === undefined) {
+      return '';
+    }
+    const dataView = grid.getData();
+    const data = dataView.getItems();
+    const identifierPropName = dataView.getIdPropertyName() || 'id';
+    const idx = dataView.getIdxById(dataContext[identifierPropName]) as number;
+    const prefix = this.getFileIcon(value);
+
+    value = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const spacer = `<span style="display:inline-block; width:${(15 * dataContext[treeLevelPropName])}px;"></span>`;
+
+    if (data[idx + 1] && data[idx + 1][treeLevelPropName] > data[idx][treeLevelPropName]) {
+      const folderPrefix = `<span class="mdi icon color-alt-warning ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></span>`;
+      if (dataContext.__collapsed) {
+        return `${spacer} <span class="slick-group-toggle collapsed" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
+      } else {
+        return `${spacer} <span class="slick-group-toggle expanded" level="${dataContext[treeLevelPropName]}"></span>${folderPrefix} ${prefix}&nbsp;${value}`;
+      }
+    } else {
+      return `${spacer} <span class="slick-group-toggle" level="${dataContext[treeLevelPropName]}"></span>${prefix}&nbsp;${value}`;
+    }
+  }
+
+  getFileIcon(value: string) {
+    let prefix = '';
+    if (value.includes('.pdf')) {
+      prefix = '<span class="mdi icon mdi-file-pdf-outline color-danger"></span>';
+    } else if (value.includes('.txt')) {
+      prefix = '<span class="mdi icon mdi-file-document-outline color-muted-light"></span>';
+    } else if (value.includes('.xls')) {
+      prefix = '<span class="mdi icon mdi-file-excel-outline color-success"></span>';
+    } else if (value.includes('.mp3')) {
+      prefix = '<span class="mdi icon mdi-file-music-outline color-info"></span>';
+    }
+    return prefix;
+  }
+
+  /**
+   * A simple method to add a new item inside the first group that we find.
+   * After adding the item, it will sort by parent/child recursively
+   */
+  addNewFile() {
+    const newId = this.dataViewObj.getLength() + 100;
+
+    // find first parent object and add the new item as a child
+    const tmpDatasetHierarchical = [...this.datasetHierarchical];
+    const popItem = findItemInTreeStructure(tmpDatasetHierarchical, x => x.file === 'pop', 'files');
+
+    if (popItem && Array.isArray(popItem.files)) {
+      popItem.files.push({
+        id: newId,
+        file: `pop-${newId}.mp3`,
+        dateModified: new Date(),
+        size: Math.floor(Math.random() * 100) + 50,
+      });
+
+      // overwrite hierarchical dataset which will also trigger a grid sort and rendering
+      this.datasetHierarchical = tmpDatasetHierarchical;
+
+      // scroll into the position, after insertion cycle, where the item was added
+      setTimeout(() => {
+        const rowIndex = this.dataViewObj.getRowById(popItem.id);
+        this.gridObj.scrollRowIntoView(rowIndex + 3);
+      }, 10);
+    }
+  }
+
+  collapseAll() {
+    this.angularGrid.treeDataService.toggleTreeDataCollapse(true);
+  }
+
+  expandAll() {
+    this.angularGrid.treeDataService.toggleTreeDataCollapse(false);
+  }
+
+  logHierarchicalStructure() {
+    console.log('exploded array', this.angularGrid.treeDataService.datasetHierarchical);
+  }
+
+  logFlatStructure() {
+    console.log('flat array', this.angularGrid.treeDataService.dataset);
+  }
+
+  mockDataset() {
+    return [
+      { id: 24, file: 'bucket-list.txt', dateModified: '2012-03-05T12:44:00.123Z', size: 0.5 },
+      { id: 18, file: 'something.txt', dateModified: '2015-03-03T03:50:00.123Z', size: 90 },
+      {
+        id: 21, file: 'documents', files: [
+          { id: 2, file: 'txt', files: [{ id: 3, file: 'todo.txt', description: 'things to do someday maybe', dateModified: '2015-05-12T14:50:00.123Z', size: 0.7, }] },
+          {
+            id: 4, file: 'pdf', files: [
+              { id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9, },
+              { id: 5, file: 'map.pdf', dateModified: '2015-05-21T10:22:00.123Z', size: 3.1, },
+              { id: 6, file: 'internet-bill.pdf', dateModified: '2015-05-12T14:50:00.123Z', size: 1.4, },
+              { id: 23, file: 'phone-bill.pdf', dateModified: '2015-05-01T07:50:00.123Z', size: 1.4, },
+            ]
+          },
+          { id: 9, file: 'misc', files: [{ id: 10, file: 'todo.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4, }] },
+          { id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', description: 'movie compilation', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] },
+        ]
+      },
+      {
+        id: 11, file: 'music', files: [{
+          id: 12, file: 'mp3', files: [
+            { id: 16, file: 'rock', files: [{ id: 17, file: 'soft.mp3', dateModified: '2015-05-13T13:50:00Z', size: 98, }] },
+            {
+              id: 14, file: 'pop', files: [
+                { id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47, },
+                { id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3, }
+              ]
+            },
+          ]
+        }]
+      },
+      {
+        id: 26, file: 'recipes', description: 'Cake Recipes', dateModified: '2012-03-05T12:44:00.123Z', files: [
+          { id: 29, file: 'cheesecake', description: 'strawberry cheesecake', dateModified: '2012-04-04T13:52:00.123Z', size: 0.2 },
+          { id: 30, file: 'chocolate-cake', description: 'tasty sweet chocolate cake', dateModified: '2012-05-05T09:22:00.123Z', size: 0.2 },
+          { id: 31, file: 'coffee-cake', description: 'chocolate coffee cake', dateModified: '2012-01-01T08:08:48.123Z', size: 0.2 },
+        ]
+      },
+    ];
+  }
+}

package/src/app/examples/grid-tree-data-parent-child.component.html

@@ -0,0 +1,108 @@
+<div class="container-fluid">
+  <h2>
+    <span [innerHTML]="title"></span>
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/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" [innerHTML]="subTitle"></div>
+
+  <div class="row" style="margin-bottom: 4px;">
+    <div class="col-md-12">
+      <button class="btn btn-outline-secondary btn-sm" data-test="add-500-rows-btn" (click)="loadData(500)">
+        500 rows
+      </button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="add-50k-rows-btn" (click)="loadData(25000)">
+        25k rows
+      </button>
+      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-sm"
+              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-sm">
+        <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-sm"
+              [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-sm"
+              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-sm"
+              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-sm"
+              disabled.bind="hasNoExpandCollapseChanged">
+        <span class="mdi mdi-history"></span>
+        <span>Reapply Previous Toggled Items</span>
+      </button>
+      <div class.bind="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-sm">
+        <span class="icon mdi mdi-plus color-white"></span>
+        <span>Add New Item (in 1st group)</span>
+      </button>
+      <button (click)="collapseAll()" data-test="collapse-all-btn" class="btn btn-outline-secondary btn-sm">
+        <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-sm">
+        <span class="icon mdi mdi-arrow-expand"></span>
+        <span>Expand All</span>
+      </button>
+      <button (click)="logTreeDataToggledItems()" class="btn btn-outline-secondary btn-sm">
+        <span>Log Tree Toggled Items</span>
+      </button>
+      <button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm"
+              title="console.log of the Flat dataset">
+        <span>Log Flat Structure</span>
+      </button>
+      <button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm"
+              title="console.log of the Hierarchical Tree dataset">
+        <span>Log Hierarchical Structure</span>
+      </button>
+      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-sm">
+        <span>Dynamically Change Filter (% complete &lt; 40)</span>
+      </button>
+    </div>
+  </div>
+
+  <br />
+
+  <angular-slickgrid gridId="grid28"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="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/app/examples/grid-tree-data-parent-child.component.scss

@@ -0,0 +1,10 @@
+/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
+
+.icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    height: 1rem;
+    width: 1rem;
+}