angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/grid-tabs.component.ts

@@ -0,0 +1,115 @@
+import { Component, OnInit, } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { AngularGridInstance, Column, GridOption, Filters } from '../modules/angular-slickgrid';
+
+const URL_CUSTOMERS = 'assets/data/customers_100.json';
+
+@Component({
+  templateUrl: './grid-tabs.component.html'
+})
+export class GridTabsComponent implements OnInit {
+  title = 'Example 24: Grids in Bootstrap Tabs';
+  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>`;
+
+  angularGrid2!: AngularGridInstance;
+  columnDefinitions1!: Column[];
+  columnDefinitions2!: Column[];
+  gridOptions1!: GridOption;
+  gridOptions2!: GridOption;
+  dataset1!: any[];
+  dataset2!: any[];
+
+  constructor(private http: HttpClient) { }
+
+  angularGrid2Ready(angularGrid: AngularGridInstance) {
+    this.angularGrid2 = angularGrid;
+  }
+
+  ngOnInit(): void {
+    this.defineGrid1();
+    this.defineGrid2();
+
+    // mock some data (different in each dataset)
+    this.dataset1 = this.mockData();
+
+    // load data with Http-Client
+    this.http.get((URL_CUSTOMERS)).subscribe(((data: any[]) => this.dataset2 = data) as any);
+  }
+
+  // Grid2 definition
+  defineGrid1() {
+    this.columnDefinitions1 = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100 },
+      { id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, minWidth: 100 },
+      { id: '%', name: '% Complete', field: 'percentComplete', sortable: true, minWidth: 100 },
+      { id: 'start', name: 'Start', field: 'start', minWidth: 100 },
+      { id: 'finish', name: 'Finish', field: 'finish', minWidth: 100 },
+      { id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true, minWidth: 100 }
+    ];
+    this.gridOptions1 = {
+      enableAutoResize: true,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableSorting: true
+    };
+  }
+
+  // Grid2 definition
+  defineGrid2() {
+    this.columnDefinitions2 = [
+      { id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, },
+      {
+        id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true,
+        filter: {
+          model: Filters.singleSelect,
+          collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }]
+        }
+      },
+      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true }
+    ];
+
+    this.gridOptions2 = {
+      enableAutoResize: true,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableFiltering: true,
+      enableSorting: true
+    };
+  }
+
+  mockData() {
+    // mock a dataset
+    const mockDataset = [];
+    for (let i = 0; i < 1000; 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);
+
+      mockDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 100) + '',
+        percentComplete: randomPercent,
+        start: `${randomMonth}/${randomDay}/${randomYear}`,
+        finish: `${randomMonth}/${randomDay}/${randomYear}`,
+        effortDriven: (i % 5 === 0)
+      };
+    }
+
+    return mockDataset;
+  }
+
+  resizeGrid2() {
+    this.angularGrid2.resizerService.resizeGrid();
+  }
+}

package/src/app/examples/grid-trading.component.html

@@ -0,0 +1,58 @@
+<div class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-trading.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <div class="trading-platform">
+    <div class="row mb-4 simulation-form">
+      <div class="col-sm-12 d-flex align-items-center">
+        <div class="range">
+          <label for="refreshRateRange" class="form-label me-1">Changes Rate(ms)</label>
+          <input type="range" class="form-range" id="refreshRateRange" min="0" max="250" [(ngModel)]="refreshRate">
+          <span class="refresh-rate">
+            <input type="number" [(ngModel)]="refreshRate">
+          </span>
+        </div>
+        <span class="ms-3 me-1">
+          <button class="btn btn-outline-secondary btn-sm" data-test="start-btn" (click)="startSimulation()">
+            <li class="fa fa-play"></li> Start Simulation
+          </button>
+        </span>
+        <span class="me-3">
+          <button class="btn btn-outline-secondary btn-sm" data-test="stop-btn" (click)="stopSimulation()">
+            <li class="fa fa-stop"></li> Stop Simulation
+          </button>
+        </span>
+        <span class="mx-1">
+          <label for="change-per-cycle-input">Changes p/Cycle</label>
+          <input type="number" id="change-per-cycle-input" [(ngModel)]="minChangePerCycle" [max]="maxChangePerCycle">
+          to
+          <input type="number" [(ngModel)]="maxChangePerCycle" [min]="minChangePerCycle">
+        </span>
+        <span class="ms-2">
+          <label for="highlight-input">Highlight Duration(ms)</label>
+          <input type="number" id="highlight-input" data-test="highlight-input" [(ngModel)]="highlightDuration">
+        </span>
+        <div class="ms-auto">
+          <button class="btn btn-outline-secondary btn-sm" (click)="toggleFullScreen()">
+            <li [class]="isFullScreen ? 'fa fa-compress' : 'fa fa-arrows-alt'"></li> Toggle Full-Screen
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <angular-slickgrid gridId="grid33"
+                       [columnDefinitions]="columnDefinitions"
+                       [gridOptions]="gridOptions"
+                       [dataset]="dataset"
+                       (onAngularGridCreated)="angularGridReady($event.detail)">
+    </angular-slickgrid>
+  </div>

package/src/app/examples/grid-trading.component.scss

@@ -0,0 +1,49 @@
+// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+
+$sparkline-color: #00b78d;
+// $sparkline-color: #573585;
+
+.trading-platform.full-screen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 10px 12px 0 10px;
+  background-color: white;
+  z-index: 8000;
+  position: fixed;
+}
+.changed-gain {
+  background-color: #eafae8 !important;
+}
+.changed-loss {
+  background-color: #ffeae8 !important;
+}
+.simulation-form {
+  input[type=number] {
+    height: 32px;
+    width: 50px;
+    border: 1px solid #c0c0c0;
+    border-radius: 3px;
+  }
+  div.range {
+    display: contents;
+    width: 200px;
+    label.form-label {
+      margin: 0;
+    }
+    input.form-range {
+      width: 120px;
+    }
+  }
+  .refresh-rate input {
+    height: 30px;
+    width: 46px;
+  }
+}
+.sparkline {
+  stroke: $sparkline-color;
+  // fill: none;
+  fill: rgba($sparkline-color, 0.03);
+}

package/src/app/examples/grid-trading.component.ts

@@ -0,0 +1,319 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation, } from '@angular/core';
+import { faker } from '@faker-js/faker';
+import sparkline from '@fnando/sparkline';
+import {
+  Aggregators,
+  AngularGridInstance,
+  Column,
+  deepCopy,
+  FieldType,
+  Filters,
+  Formatter,
+  Formatters,
+  GridOption,
+  GroupTotalFormatters,
+} from '../modules/angular-slickgrid';
+
+const NB_ROWS = 200;
+
+const currencyFormatter: Formatter = (cell: number, row: number, value: string) =>
+  `<img src="https://flags.fmcdn.net/data/flags/mini/${value.substr(0, 2).toLowerCase()}.png" width="20"/> ${value}`;
+
+const priceFormatter: Formatter = (cell: number, row: number, value: number, col: Column, dataContext: any) => {
+  const direction = dataContext.priceChange >= 0 ? 'up' : 'down';
+  return `<span class="fa fa-arrow-${direction} text-${direction === 'up' ? 'success' : 'danger'}"></span> ${value}`;
+};
+
+const transactionTypeFormatter: Formatter = (row: number, cell: number, value: string) =>
+  `<span <span class="fa fa-${value === 'Buy' ? 'plus' : 'minus'}-circle ${value === 'Buy' ? 'text-info' : 'text-warning'}"></span> ${value}`;
+
+const historicSparklineFormatter: Formatter = (row: number, cell: number, value: string, col: Column, dataContext: any) => {
+  const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svgElem.setAttributeNS(null, 'width', '135');
+  svgElem.setAttributeNS(null, 'height', '30');
+  svgElem.setAttributeNS(null, 'stroke-width', '2');
+  svgElem.classList.add('sparkline');
+  sparkline(svgElem, dataContext.historic, { interactive: true });
+  return svgElem.outerHTML;
+};
+
+@Component({
+  templateUrl: './grid-trading.component.html',
+  styleUrls: ['./grid-trading.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class GridTradingComponent implements OnDestroy, OnInit {
+  title = 'Example 33: Real-Time Trading Platform';
+  subTitle = `Simulate a stock trading platform with lot of price changes
+    <ul>
+      <li>you can start/stop the simulation</li>
+      <li>optionally change random numbers, between 0 and 10 symbols, per cycle (higher numbers means more changes)</li>
+      <li>optionally change the simulation changes refresh rate in ms (lower number means more changes).</li>
+      <li>you can Group by 1 of these columns: Currency, Market or Type</li>
+      <li>to show SlickGrid HUGE PERF., do the following: (1) lower Changes Rate (2) increase both Changes per Cycle and (3) lower Highlight Duration
+    </ul>`;
+  angularGrid!: AngularGridInstance;
+  gridOptions!: GridOption;
+  columnDefinitions: Column[] = [];
+  dataset: any[] = [];
+  isFullScreen = false;
+  highlightDuration = 150;
+  itemCount = 200;
+  minChangePerCycle = 0;
+  maxChangePerCycle = 10;
+  refreshRate = 75;
+  timer: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.defineGrid();
+
+    // mock a dataset
+    this.dataset = this.loadData(NB_ROWS);
+
+    setTimeout(() => {
+      this.startSimulation();
+    }, this.refreshRate);
+  }
+
+  ngOnDestroy(): void {
+    this.stopSimulation();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    // the columns field property is type-safe, try to add a different string not representing one of DataItems properties
+    this.columnDefinitions = [
+      {
+        id: 'currency', name: 'Currency', field: 'currency', filterable: true, sortable: true, minWidth: 65, width: 65,
+        formatter: currencyFormatter,
+        filter: {
+          model: Filters.singleSelect,
+          collection: [{ label: '', value: '' }, { label: 'CAD', value: 'CAD' }, { label: 'USD', value: 'USD' }]
+        },
+        grouping: {
+          getter: 'currency',
+          formatter: (g) => `Currency: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          aggregators: [
+            new Aggregators.Sum('amount')
+          ],
+          aggregateCollapsed: true,
+          collapsed: false
+        }
+      },
+      { id: 'symbol', name: 'Symbol', field: 'symbol', filterable: true, sortable: true, minWidth: 65, width: 65 },
+      {
+        id: 'market', name: 'Market', field: 'market', filterable: true, sortable: true, minWidth: 75, width: 75,
+        grouping: {
+          getter: 'market',
+          formatter: (g) => `Market: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          aggregators: [
+            new Aggregators.Sum('amount')
+          ],
+          aggregateCollapsed: true,
+          collapsed: false
+        }
+      },
+      { id: 'company', name: 'Company', field: 'company', filterable: true, sortable: true, minWidth: 80, width: 130 },
+      {
+        id: 'trsnType', name: 'Type', field: 'trsnType', filterable: true, sortable: true, minWidth: 60, width: 60,
+        formatter: transactionTypeFormatter,
+        filter: {
+          model: Filters.singleSelect,
+          collection: [{ label: '', value: '' }, { label: 'Buy', value: 'Buy' }, { label: 'Sell', value: 'Sell' }]
+        },
+        grouping: {
+          getter: 'trsnType',
+          formatter: (g) => `Type: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          aggregators: [
+            new Aggregators.Sum('amount')
+          ],
+          aggregateCollapsed: true,
+          collapsed: false
+        }
+      },
+      {
+        id: 'priceChange', name: 'Change', field: 'priceChange', filterable: true, sortable: true, minWidth: 80, width: 80,
+        filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
+        formatter: Formatters.multiple,
+        params: {
+          formatters: [Formatters.dollarColored, priceFormatter],
+          maxDecimal: 2,
+        }
+
+      },
+      {
+        id: 'price', name: 'Price', field: 'price', filterable: true, sortable: true, minWidth: 70, width: 70,
+        filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
+        formatter: Formatters.dollar, params: { maxDecimal: 2 }
+      },
+      {
+        id: 'quantity', name: 'Quantity', field: 'quantity', filterable: true, sortable: true, minWidth: 70, width: 70,
+        filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
+      },
+      {
+        id: 'amount', name: 'Amount', field: 'amount', filterable: true, sortable: true, minWidth: 70, width: 60,
+        filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
+        formatter: Formatters.dollar, params: { maxDecimal: 2 },
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
+      },
+      { id: 'historic', name: 'Price History', field: 'historic', minWidth: 100, width: 150, maxWidth: 150, formatter: historicSparklineFormatter },
+      {
+        id: 'execution', name: 'Execution Timestamp', field: 'execution', filterable: true, sortable: true, minWidth: 125,
+        formatter: Formatters.dateTimeIsoAmPm, exportWithFormatter: true,
+        type: FieldType.dateTimeIsoAM_PM, filter: { model: Filters.compoundDate }
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '.trading-platform',
+        rightPadding: 0,
+        bottomPadding: 10,
+      },
+      formatterOptions: {
+        displayNegativeNumberWithParentheses: true,
+        thousandSeparator: ','
+      },
+      draggableGrouping: {
+        dropPlaceHolderText: 'Drop a column header here to group by any of these available columns: Currency, Market or Type',
+        deleteIconCssClass: 'fa fa-times',
+      },
+      enableDraggableGrouping: true,
+      createPreHeaderPanel: true,
+      showPreHeaderPanel: true,
+      preHeaderPanelHeight: 40,
+      enableCellNavigation: true,
+      enableFiltering: true,
+      cellHighlightCssClass: 'changed',
+    };
+  }
+
+  loadData(itemCount: number): any[] {
+    // mock a dataset
+    const tmpDataset = [];
+    for (let i = 0; i < itemCount; i++) {
+      const randomPercent = Math.round(Math.random() * 100);
+      const randomLowQty = this.randomNumber(1, 50);
+      const randomHighQty = this.randomNumber(125, 255);
+      const priceChange = this.randomNumber(-25, 35, false);
+      const price = this.randomNumber(priceChange, 300);
+      const quantity = price < 5 ? randomHighQty : randomLowQty;
+      const amount = price * quantity;
+      const now = new Date();
+      now.setHours(9, 30, 0);
+      const currency = (Math.floor(Math.random() * 10)) % 2 ? 'CAD' : 'USD';
+      const company = faker.company.companyName();
+
+      tmpDataset[i] = {
+        id: i,
+        currency,
+        trsnType: (Math.round(Math.random() * 100)) % 2 ? 'Buy' : 'Sell',
+        company,
+        symbol: currency === 'CAD' ? company.substr(0, 3).toUpperCase() + '.TO' : company.substr(0, 4).toUpperCase(),
+        market: currency === 'CAD' ? 'TSX' : price > 200 ? 'Nasdaq' : 'S&P 500',
+        duration: (i % 33 === 0) ? null : Math.random() * 100 + '',
+        percentCompleteNumber: randomPercent,
+        priceChange,
+        price,
+        quantity,
+        amount,
+        execution: now,
+        historic: [price]
+      };
+    }
+
+    return tmpDataset;
+  }
+
+  startSimulation() {
+    const changes: any = {};
+    const numberOfUpdates = this.randomNumber(this.minChangePerCycle, this.maxChangePerCycle);
+
+    for (let i = 0; i < numberOfUpdates; i++) {
+      const randomLowQty = this.randomNumber(1, 50);
+      const randomHighQty = this.randomNumber(125, 255);
+      const rowNumber = Math.round(Math.random() * (this.dataset.length - 1));
+      const priceChange = this.randomNumber(-25, 25, false);
+      const prevItem = deepCopy(this.dataset[rowNumber]);
+      const itemTmp = { ...this.dataset[rowNumber] };
+      itemTmp.priceChange = priceChange;
+      itemTmp.price = ((itemTmp.price + priceChange) < 0) ? 0 : itemTmp.price + priceChange;
+      itemTmp.quantity = itemTmp.price < 5 ? randomHighQty : randomLowQty;
+      itemTmp.amount = itemTmp.price * itemTmp.quantity;
+      itemTmp.trsnType = (Math.round(Math.random() * 100)) % 2 ? 'Buy' : 'Sell';
+      itemTmp.execution = new Date();
+      itemTmp.historic.push(itemTmp.price);
+      itemTmp.historic = itemTmp.historic.slice(-20); // keep a max of X historic values
+
+      if (!changes[rowNumber]) {
+        changes[rowNumber] = {};
+      }
+
+      // highlight whichever cell is being changed
+      changes[rowNumber]['id'] = 'changed';
+      this.renderCellHighlighting(itemTmp, this.findColumnById('priceChange'), priceChange);
+      if ((prevItem.priceChange < 0 && itemTmp.priceChange > 0) || (prevItem.priceChange > 0 && itemTmp.priceChange < 0)) {
+        this.renderCellHighlighting(itemTmp, this.findColumnById('price'), priceChange);
+      }
+      // if (prevItem.trsnType !== itemTmp.trsnType) {
+      //   this.renderCellHighlighting(itemTmp, this.findColumnById('trsnType'), priceChange);
+      // }
+
+      // update the data
+      this.angularGrid.dataView.updateItem(itemTmp.id, itemTmp);
+      // NOTE: we should also invalidate/render the row after updating cell data to see the new data rendered in the UI
+      // but the cell highlight actually does that for us so we can skip it
+    }
+
+    this.timer = setTimeout(this.startSimulation.bind(this), this.refreshRate || 0);
+  }
+
+  stopSimulation() {
+    clearTimeout(this.timer);
+  }
+
+  findColumnById(columnName: string): Column {
+    return this.columnDefinitions.find(col => col.field === columnName) as Column;
+  }
+
+  renderCellHighlighting(item: any, column: Column, priceChange: number) {
+    if (item && column) {
+      const row = this.angularGrid.dataView.getRowByItem(item) as number;
+      if (row >= 0) {
+        const hash = { [row]: { [column.id]: priceChange >= 0 ? 'changed-gain' : 'changed-loss' } };
+        this.angularGrid.slickGrid.setCellCssStyles(`highlight_${[column.id]}${row}`, hash);
+
+        // remove highlight after x amount of time
+        setTimeout(() => this.removeCellStyling(item, column, row), this.highlightDuration);
+      }
+    }
+  }
+
+  /** remove change highlight css class from that cell */
+  removeCellStyling(_item: any, column: Column, row: number) {
+    this.angularGrid?.slickGrid?.removeCellCssStyles(`highlight_${[column.id]}${row}`);
+  }
+
+  toggleFullScreen() {
+    const container = document.querySelector('.trading-platform');
+    if (container?.classList.contains('full-screen')) {
+      container.classList.remove('full-screen');
+      this.isFullScreen = false;
+    } else if (container) {
+      container.classList.add('full-screen');
+      this.isFullScreen = true;
+    }
+    this.angularGrid.resizerService.resizeGrid();
+  }
+
+  private randomNumber(min: number, max: number, floor = true) {
+    const number = Math.random() * (max - min + 1) + min;
+    return floor ? Math.floor(number) : number;
+  }
+}

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

@@ -0,0 +1,79 @@
+<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-hierarchical.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">
+    <div class="col-md-7">
+      <button (click)="addNewFile()" data-test="add-item-btn" class="btn btn-primary btn-sm">
+        <span class="icon mdi mdi-plus color-white"></span>
+        <span>Add New Pop Song</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)="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>
+    </div>
+
+    <div class="col-md-5">
+      <div class="input-group">
+        <input type="text" class="form-control search-string" data-test="search-string"
+               placeholder="search value" autocomplete="off" [(ngModel)]="searchString"
+               (ngModelChange)="searchStringChanged()">
+        <button class="btn btn-outline-secondary" data-test="clear-search-string" (click)="clearSearch()">
+          <span class="icon mdi mdi-close-thick"></span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <label class="checkbox-inline control-label" for="excludeChildWhenFiltering" style="margin-left: 20px">
+      <input type="checkbox" id="excludeChildWhenFiltering" data-test="exclude-child-when-filtering"
+             [checked]="isExcludingChildWhenFiltering"
+             (click)="changeExcludeChildWhenFiltering()">
+      <span
+            title="for example if we filter the word 'pop' and we exclude children, then only the folder 'pop' will show up without any content unless we uncheck this flag">
+        Exclude Children when Filtering Tree
+      </span>
+    </label>
+    <label class="checkbox-inline control-label" for="autoApproveParentItem" style="margin-left: 20px">
+      <input type="checkbox" id="autoApproveParentItem" data-test="auto-approve-parent-item"
+             [checked]="isAutoApproveParentItemWhenTreeColumnIsValid"
+             (click)="changeAutoApproveParentItem()">
+      <span
+            title="for example in this demo if we filter with 'music' and size '> 70' nothing will show up unless we have this flag enabled
+            because none of the files have both criteria at the same time, however the column with the tree 'file' does pass the filter criteria 'music'
+            and with this flag we tell the lib to skip any other filter(s) as soon as the with the tree (file in this demo) passes its own filter criteria">
+        Skip Other Filter Criteria when Parent with Tree is valid
+      </span>
+    </label>
+  </div>
+
+  <angular-slickgrid gridId="grid29"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     [datasetHierarchical]="datasetHierarchical"
+                     (onAngularGridCreated)="angularGridReady($event.detail)">
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,47 @@
+/* make sure to add the @import the SlickGrid Theme AFTER the variables changes */
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.lite.scss';
+
+/*
+  www.OnlineWebFonts.Com
+  You must credit the author Copy this link on your web
+  <div>Font made from <a href="http://www.onlinewebfonts.com">oNline Web Fonts</a>is licensed by CC BY 3.0</div>
+*/
+@font-face {
+  font-family: "SalesforceSans-Regular";
+  src: url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.eot"); /* IE9*/
+  src: url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
+  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.woff2") format("woff2"), /* chrome firefox */
+  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.woff") format("woff"), /* chrome firefox */
+  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.ttf") format("truetype"), /* chrome firefox opera Safari, Android, iOS 4.2+*/
+  url("https://db.onlinewebfonts.com/t/0fadaa21fcac88ceee0bb8da992c221b.svg#SalesforceSans-Regular") format("svg"); /* iOS 4.1- */
+}
+.icon {
+    align-items: center;
+    display: inline-flex;
+    justify-content: center;
+    height: 1rem;
+    width: 1rem;
+}
+
+/** You can use the following code OR use the .color-x CSS classes */
+
+// .icon.mdi-file-pdf-outline {
+//   /** 1. use `filter` color */
+//   // filter: invert(62%) sepia(93%) saturate(5654%) hue-rotate(325deg) brightness(100%) contrast(90%);
+
+//   /** 2. or use the SASS @mixin (from Angular-Slickgrid "sass-utilities.scss") that will produce the `filter` color */
+//   @include recolor(#f14668, 0.9);
+// }
+
+// .icon.mdi-folder, .icon.mdi-folder-open {
+//   @include recolor(#ffa500, 0.9);
+// }
+// .icon.mdi-file-music-outline {
+//   @include recolor(#3298dc, 0.9);
+// }
+// .icon.mdi-file-excel-outline {
+//   @include recolor(#1E9F75, 0.9);
+// }
+// .icon.mdi-file-document-outline {
+//   @include recolor(#686868, 0.9);
+// }