diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.html b/examples/webpack-demo-vanilla-bundle/src/examples/example05.html
index 37ac5bb28..e0a11b364 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example05.html
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example05.html
@@ -27,6 +27,15 @@ <h6 class="title is-6 italic">
         <span class="icon mdi mdi-filter-outline"></span>
         <span>Dynamically Change Filter (% complete &lt; 40)</span>
       </button>
+      <button onclick.delegate="collapseAllWithoutEvent()" data-test="collapse-all-noevent-btn" class="button is-small">
+        <span class="icon mdi mdi-arrow-collapse"></span>
+        <span>Collapse All (without triggering event)</span>
+      </button>
+      <button onclick.delegate="reapplyToggledItems()" data-test="reapply-toggled-items-btn" class="button is-small"
+              disabled.bind="hasNoExpandCollapseChanged">
+        <span class="icon mdi mdi-history"></span>
+        <span>Reapply Previous Toggled Items</span>
+      </button>
     </div>
 
     <div class="row" style="margin-bottom: 4px;">
@@ -42,10 +51,8 @@ <h6 class="title is-6 italic">
         <span class="icon mdi mdi-arrow-expand"></span>
         <span>Expand All</span>
       </button>
-      <button onclick.delegate="reapplyCollapsedItems()" data-test="reapply-collapsing-btn" class="button is-small"
-              disabled.bind="hasNoExpandCollapseChanged">
-        <span class="icon mdi mdi-history"></span>
-        <span>Re-Apply Previous Expanded/Collapsed Items</span>
+      <button onclick.delegate="logTreeDataToggledItems()" class="button is-small">
+        <span>Log Tree Toggled Items</span>
       </button>
       <button onclick.delegate="logFlatStructure()" class="button is-small">
         <span>Log Flat Structure</span>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
index 491c0710d..a01e564ed 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example05.ts
@@ -5,6 +5,10 @@ import {
   Filters,
   Formatters,
   GridOption,
+  GridStateChange,
+  GridStateType,
+  TreeToggledItem,
+  TreeToggleStateChange,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
@@ -23,7 +27,7 @@ export class Example5 {
   loadingClass = '';
   isLargeDataset = false;
   hasNoExpandCollapseChanged = true;
-  collapsedTreeItems: { parentId: number | string; isCollapsed: boolean; }[] = [];
+  treeToggleItems: TreeToggledItem[] = [];
 
   constructor() {
     this._bindingEventService = new BindingEventService();
@@ -36,7 +40,6 @@ export class Example5 {
 
     this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions });
     this.dataset = this.loadData(NB_ITEMS);
-    // this.sgb.dataset = this.dataset;
 
     // with large dataset you maybe want to show spinner before/after these events: sorting/filtering/collapsing/expanding
     this._bindingEventService.bind(gridContainerElm, 'onbeforefilterchange', this.showSpinner.bind(this));
@@ -45,15 +48,13 @@ export class Example5 {
     this._bindingEventService.bind(gridContainerElm, 'onfiltercleared', this.hideSpinner.bind(this));
     this._bindingEventService.bind(gridContainerElm, 'onbeforesortchange', this.showSpinner.bind(this));
     this._bindingEventService.bind(gridContainerElm, 'onsortchanged', this.hideSpinner.bind(this));
-    this._bindingEventService.bind(gridContainerElm, 'onbeforetoggletreecollapse', this.showSpinner.bind(this));
-    this._bindingEventService.bind(gridContainerElm, 'ontreetoggleallrequested', this.hideSpinner.bind(this));
-    // @ts-ignore
-    this._bindingEventService.bind(gridContainerElm, 'onTreeToggleStageChanged', (e: CustomEvent) => {
-      this.hasNoExpandCollapseChanged = false;
-      const treeToggleExecution = e.detail;
-      this.collapsedTreeItems = treeToggleExecution.treeChanges;
-      console.log('onTreeCollapseChanged', treeToggleExecution);
-    });
+
+    // keep toggled items, note that we could also get these changes via the `onGridStateChanged`
+    this._bindingEventService.bind(gridContainerElm, 'ontreefulltogglestart', this.showSpinner.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'ontreefulltoggleend', this.handleOnTreeFullToggleEnd.bind(this));
+    this._bindingEventService.bind(gridContainerElm, 'ontreeitemtoggled', this.handleOnTreeItemToggled.bind(this));
+    // or use the Grid State change event
+    // this._bindingEventService.bind(gridContainerElm, 'ongridstatechanged', this.handleOnGridStateChanged.bind(this));
   }
 
   dispose() {
@@ -133,6 +134,7 @@ export class Example5 {
         // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
         levelPropName: 'treeLevel',
         indentMarginLeft: 15,
+        initiallyCollapsed: true,
 
         // you can optionally sort by a different column and/or sort direction
         // this is the recommend approach, unless you are 100% that your original array is already sorted (in most cases it's not)
@@ -152,8 +154,6 @@ export class Example5 {
       multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
       presets: {
         filters: [{ columnId: 'percentComplete', searchTerms: [25], operator: '>=' }],
-        // @ts-ignore
-        treeCollapsedParents: [{ parentId: 12, isCollapsed: true }],
       },
       // if you're dealing with lots of data, it is recommended to use the filter debounce
       filterTypingDebounce: 250,
@@ -195,6 +195,10 @@ export class Example5 {
     this.sgb.treeDataService.toggleTreeDataCollapse(true);
   }
 
+  collapseAllWithoutEvent() {
+    this.sgb.treeDataService.toggleTreeDataCollapse(true, false);
+  }
+
   expandAll() {
     this.sgb.treeDataService.toggleTreeDataCollapse(false);
   }
@@ -203,21 +207,6 @@ export class Example5 {
     this.sgb.filterService.updateFilters([{ columnId: 'percentComplete', operator: '<', searchTerms: [40] }]);
   }
 
-  reapplyCollapsedItems() {
-    // const collapsedItems = Object.keys(this.collapsedTreeItems);
-    const collapsedItems = this.collapsedTreeItems.filter(item => item.isCollapsed);
-    if (Array.isArray(collapsedItems)) {
-      this.sgb.dataView.beginUpdate(true);
-      for (const collapsedItem of collapsedItems) {
-        if (collapsedItem) {
-          this.sgb.dataView.updateItem(collapsedItem.parentId, { ...this.sgb.dataView.getItemById(collapsedItem.parentId), __collapsed: collapsedItem.isCollapsed });
-        }
-      }
-      this.sgb.dataView.endUpdate();
-      this.sgb.dataView.refresh();
-    }
-  }
-
   logHierarchicalStructure() {
     console.log('hierarchical array', this.sgb.treeDataService.datasetHierarchical);
   }
@@ -240,11 +229,25 @@ export class Example5 {
       const item = (data[i] = {});
       let parentId;
 
-      // for implementing filtering/sorting, don't go over indent of 2
-      if (Math.random() > 0.8 && i > 0 && indent < 3) {
+      /*
+        for demo & E2E testing purposes, let's make "Task 0" empty and then "Task 1" a parent that contains at least "Task 2" and "Task 3" which the latter will also contain "Task 4" (as shown below)
+        also for all other rows don't go over indent tree level depth of 2
+        Task 0
+        Task 1
+          Task 2
+          Task 3
+            Task 4
+        ...
+       */
+      if (i === 1 || i === 0) {
+        indent = 0;
+        parents.pop();
+      } if (i === 3) {
+        indent = 1;
+      } else if (i === 2 || i === 4 || (Math.random() > 0.8 && i > 0 && indent < 3 && i - 1 !== 0 && i - 1 !== 2)) { // also make sure Task 0, 2 remains empty
         indent++;
         parents.push(i - 1);
-      } else if (Math.random() < 0.3 && indent > 0) {
+      } else if ((Math.random() < 0.3 && indent > 0)) {
         indent--;
         parents.pop();
       }
@@ -269,4 +272,36 @@ export class Example5 {
     }
     return data;
   }
+
+  handleOnTreeFullToggleEnd(e: CustomEvent<TreeToggleStateChange>) {
+    const treeToggleExecution = e.detail;
+    console.log('Tree Data changes', treeToggleExecution);
+    this.hideSpinner();
+  }
+
+  /** Whenever a parent is being toggled, we'll keep a reference of all of these changes so that we can reapply them whenever we want */
+  handleOnTreeItemToggled(e: CustomEvent<TreeToggleStateChange>) {
+    this.hasNoExpandCollapseChanged = false;
+    const treeToggleExecution = e.detail;
+    this.treeToggleItems = treeToggleExecution.toggledItems;
+    console.log('Tree Data changes', treeToggleExecution);
+  }
+
+  handleOnGridStateChanged(e: CustomEvent<GridStateChange>) {
+    this.hasNoExpandCollapseChanged = false;
+    const gridStateChange = e.detail;
+
+    if (gridStateChange.change.type === GridStateType.treeData) {
+      console.log('Tree Data gridStateChange', gridStateChange.gridState.treeData);
+      this.treeToggleItems = gridStateChange.gridState.treeData.toggledItems;
+    }
+  }
+
+  logTreeDataToggledItems() {
+    console.log(this.sgb.treeDataService.getToggledItems());
+  }
+
+  reapplyToggledItems() {
+    this.sgb.treeDataService.applyToggledItemStateChanges(this.treeToggleItems);
+  }
 }
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
index 1688f7e74..db73947c6 100644
--- a/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
+++ b/examples/webpack-demo-vanilla-bundle/src/examples/example06.ts
@@ -80,6 +80,11 @@ export class Example6 {
         // }
       },
       showCustomFooter: true,
+
+      // we can also preset collapsed items via Grid Presets (parentId: 4 => is the "pdf" folder)
+      presets: {
+        treeData: { toggledItems: [{ itemId: 4, isCollapsed: true }] },
+      },
     };
   }
 
diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
index 71460ec02..17fb58fbc 100644
--- a/packages/common/src/constants.ts
+++ b/packages/common/src/constants.ts
@@ -67,6 +67,13 @@ export class Constants {
     TEXT_X_OF_Y_MASS_SELECTED: '{{x}} of {{y}} selected',
   };
 
+  static readonly treeDataProperties = {
+    CHILDREN_PROP: 'children',
+    COLLAPSED_PROP: '__collapsed',
+    HAS_CHILDREN_PROP: '__hasChildren',
+    TREE_LEVEL_PROP: '__treeLevel',
+    PARENT_PROP: '__parentId',
+  };
   static readonly VALIDATION_REQUIRED_FIELD = 'Field is required';
   static readonly VALIDATION_EDITOR_VALID_NUMBER = 'Please enter a valid number';
   static readonly VALIDATION_EDITOR_VALID_INTEGER = 'Please enter a valid integer number';
diff --git a/packages/common/src/enums/gridStateType.enum.ts b/packages/common/src/enums/gridStateType.enum.ts
index de5dc50ab..9a169ab19 100644
--- a/packages/common/src/enums/gridStateType.enum.ts
+++ b/packages/common/src/enums/gridStateType.enum.ts
@@ -5,4 +5,5 @@ export enum GridStateType {
   pinning = 'pinning',
   rowSelection = 'rowSelection',
   sorter = 'sorter',
+  treeData = 'treeData',
 }
diff --git a/packages/common/src/enums/index.ts b/packages/common/src/enums/index.ts
index d6bc1673b..e9fb8e653 100644
--- a/packages/common/src/enums/index.ts
+++ b/packages/common/src/enums/index.ts
@@ -22,3 +22,4 @@ export * from './slickPluginList.enum';
 export * from './sortDirection.enum';
 export * from './sortDirectionString.type';
 export * from './sortDirectionNumber.enum';
+export * from './toggleStateChangeType';
\ No newline at end of file
diff --git a/packages/common/src/enums/toggleStateChangeType.ts b/packages/common/src/enums/toggleStateChangeType.ts
new file mode 100644
index 000000000..69c6f8e45
--- /dev/null
+++ b/packages/common/src/enums/toggleStateChangeType.ts
@@ -0,0 +1,15 @@
+export type ToggleStateChangeTypeString = 'toggle-collapse' | 'toggle-expand' | 'full-collapse' | 'full-expand';
+
+export enum ToggleStateChangeType {
+  /** full tree collapse */
+  toggleCollapse = 'toggle-collapse',
+
+  /** full tree expand */
+  fullExpand = 'full-expand',
+
+  /** item toggle collapse */
+  fullCollapse = 'full-collapse',
+
+  /** item toggle expand */
+  toggleExpand = 'toggle-expand',
+}
\ No newline at end of file
diff --git a/packages/common/src/formatters/__tests__/treeExportFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeExportFormatter.spec.ts
index 40cf5571e..4d8790f92 100644
--- a/packages/common/src/formatters/__tests__/treeExportFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/treeExportFormatter.spec.ts
@@ -1,12 +1,6 @@
-import { Column, SlickDataView, GridOption, SlickGrid } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { treeExportFormatter } from '../treeExportFormatter';
 
-const dataViewStub = {
-  getIdxById: jest.fn(),
-  getItemByIdx: jest.fn(),
-  getIdPropertyName: jest.fn(),
-} as unknown as SlickDataView;
-
 const gridStub = {
   getData: jest.fn(),
   getOptions: jest.fn(),
@@ -18,11 +12,13 @@ describe('Tree Export Formatter', () => {
 
   beforeEach(() => {
     dataset = [
-      { id: 0, firstName: 'John', lastName: 'Smith', fullName: 'John Smith', email: 'john.smith@movie.com', address: { zip: 123456 }, parentId: null, indent: 0 },
-      { id: 1, firstName: 'Jane', lastName: 'Doe', fullName: 'Jane Doe', email: 'jane.doe@movie.com', address: { zip: 222222 }, parentId: 0, indent: 1 },
-      { id: 2, firstName: 'Bob', lastName: 'Cane', fullName: 'Bob Cane', email: 'bob.cane@movie.com', address: { zip: 333333 }, parentId: 1, indent: 2, __collapsed: true },
-      { id: 3, firstName: 'Barbara', lastName: 'Cane', fullName: 'Barbara Cane', email: 'barbara.cane@movie.com', address: { zip: 444444 }, parentId: null, indent: 0, __collapsed: true },
-      { id: 4, firstName: 'Anonymous', lastName: 'Doe', fullName: 'Anonymous < Doe', email: 'anonymous.doe@anom.com', address: { zip: 556666 }, parentId: null, indent: 0, __collapsed: true },
+      { id: 0, firstName: 'John', lastName: 'Smith', fullName: 'John Smith', email: 'john.smith@movie.com', address: { zip: 123456 }, parentId: null, indent: 0, __collapsed: false, __hasChildren: true },
+      { id: 1, firstName: 'Jane', lastName: 'Doe', fullName: 'Jane Doe', email: 'jane.doe@movie.com', address: { zip: 222222 }, parentId: 0, indent: 1, __collapsed: false, __hasChildren: true },
+      { id: 2, firstName: 'Bob', lastName: 'Cane', fullName: 'Bob Cane', email: 'bob.cane@movie.com', address: { zip: 333333 }, parentId: 1, indent: 2, __collapsed: true, __hasChildren: true },
+      { id: 3, firstName: 'Barbara', lastName: 'Cane', fullName: 'Barbara Cane', email: 'barbara.cane@movie.com', address: { zip: 444444 }, parentId: null, indent: 0, __hasChildren: false },
+      { id: 4, firstName: 'Anonymous', lastName: 'Doe', fullName: 'Anonymous < Doe', email: 'anonymous.doe@anom.com', address: { zip: 556666 }, parentId: null, indent: 0, __collapsed: true, __hasChildren: true },
+      { id: 5, firstName: 'Sponge', lastName: 'Bob', fullName: 'Sponge Bob', email: 'sponge.bob@cartoon.com', address: { zip: 888888 }, parentId: 2, indent: 3, __hasChildren: false },
+      { id: 6, firstName: 'Bobby', lastName: 'Blown', fullName: 'Bobby Blown', email: 'bobby.blown@dynamite.com', address: { zip: 998877 }, parentId: 4, indent: 1, __hasChildren: false },
     ];
     mockGridOptions = {
       treeDataOptions: { levelPropName: 'indent' }
@@ -35,11 +31,6 @@ describe('Tree Export Formatter', () => {
       .toThrowError('[Slickgrid-Universal] You must provide valid "treeDataOptions" in your Grid Options, however it seems that we could not find any tree level info on the current item datacontext row.');
   });
 
-  it('should return empty string when DataView is not correctly formed', () => {
-    const output = treeExportFormatter(1, 1, '', {} as Column, dataset[1], gridStub);
-    expect(output).toBe('');
-  });
-
   it('should return empty string when value is null', () => {
     const output = treeExportFormatter(1, 1, null, {} as Column, dataset[1], gridStub);
     expect(output).toBe('');
@@ -55,90 +46,55 @@ describe('Tree Export Formatter', () => {
     expect(output).toBe('');
   });
 
-  it('should return a span without any icon which include leading char and 4 spaces to cover width of collapsing icons', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[0]);
-
-    const output = treeExportFormatter(1, 1, dataset[0]['firstName'], {} as Column, dataset[0], gridStub);
-    expect(output).toBe(`.    John`); // 3x spaces for exportIndentationLeadingSpaceCount + 1x space for space after collapsing icon in final string output
+  it('should return a span without any toggle icon which include leading char and 4 spaces to cover width of collapsing icons', () => {
+    const output = treeExportFormatter(1, 1, dataset[3]['firstName'], {} as Column, dataset[3], gridStub);
+    expect(output).toBe(`.    Barbara`); // 3x spaces for exportIndentationLeadingSpaceCount + 1x space for space after collapsing icon in final string output
   });
 
-  it('should return a span without any icon and 15px indentation of a tree level 1', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeExportFormatter(1, 1, dataset[1]['firstName'], {} as Column, dataset[1], gridStub);
-    expect(output).toBe(`.           Jane`);
+  it('should return a span without any toggle icon and 15px indentation of a tree level 1', () => {
+    const output = treeExportFormatter(1, 1, dataset[6]['firstName'], {} as Column, dataset[6], gridStub);
+    expect(output).toBe(`.           Bobby`);
   });
 
-  it('should return a span without any icon and 30px indentation of a tree level 2', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeExportFormatter(1, 1, dataset[2]['firstName'], {} as Column, dataset[2], gridStub);
-    expect(output).toBe(`.                Bob`);
+  it('should return a span without any toggle icon and 45px indentation of a tree level 3', () => {
+    const output = treeExportFormatter(1, 1, dataset[5]['firstName'], {} as Column, dataset[5], gridStub);
+    expect(output).toBe(`.                     Sponge`);
   });
 
-  it('should return a span with expanded icon and 15px indentation of a tree level 1 when current item is greater than next item', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
-
+  it('should return a span with expanded icon and 15px indentation of a tree level 1 when current item is a parent that is expanded', () => {
     const output = treeExportFormatter(1, 1, dataset[1]['firstName'], {} as Column, dataset[1], gridStub);
     expect(output).toBe(`.     ⮟ Jane`);
   });
 
-  it('should return a span with collapsed icon and 0px indentation of a tree level 0 when current item is lower than next item', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeExportFormatter(1, 1, dataset[3]['firstName'], {} as Column, dataset[3], gridStub);
-    expect(output).toBe(`⮞ Barbara`);
+  it('should return a span with collapsed icon and 0px indentation of a tree level 0 when current item is a parent that is collapsed', () => {
+    const output = treeExportFormatter(1, 1, dataset[4]['firstName'], {} as Column, dataset[4], gridStub);
+    expect(output).toBe(`⮞ Anonymous`);
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name to use when it is defined', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: (dataContext) => 'fullName' } as Column;
-    const output = treeExportFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
-    expect(output).toBe(`⮞ Barbara Cane`);
+    const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: () => 'fullName' } as Column;
+    const output = treeExportFormatter(1, 1, null, mockColumn as Column, dataset[4], gridStub);
+    expect(output).toBe(`⮞ Anonymous < Doe`);
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name and also apply html encoding when output value includes a character that should be encoded', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(2);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
-
-    const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: (dataContext) => 'fullName' } as Column;
+    const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: () => 'fullName' } as Column;
     const output = treeExportFormatter(1, 1, null, mockColumn as Column, dataset[4], gridStub);
     expect(output).toBe(`⮞ Anonymous < Doe`);
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name, which has (.) dot notation reprensenting complex object', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const mockColumn = { id: 'zip', field: 'zip', queryFieldNameGetterFn: (dataContext) => 'address.zip' } as Column;
+    const mockColumn = { id: 'zip', field: 'zip', queryFieldNameGetterFn: () => 'address.zip' } as Column;
     const output = treeExportFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
-    expect(output).toBe(`⮞ 444444`);
+    expect(output).toBe(`.    444444`);
   });
 
   it('should return a span with expanded icon and 15px indentation of a tree level 1 with a value prefix when provided', () => {
     mockGridOptions.treeDataOptions.levelPropName = 'indent';
-    mockGridOptions.treeDataOptions.titleFormatter = (_row, _cell, value, _def, dataContext) => `++${value}++`;
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
+    mockGridOptions.treeDataOptions.titleFormatter = (_row, _cell, value, _def) => `++${value}++`;
 
     const output = treeExportFormatter(1, 1, dataset[3]['firstName'], { field: 'firstName' } as Column, dataset[3], gridStub);
-    expect(output).toEqual(`⮞ ++Barbara++`);
+    expect(output).toEqual(`.    ++Barbara++`);
   });
 
   it('should return a span with expanded icon and expected indentation and expanded icon of a tree level 1 with a value prefix when provided', () => {
@@ -149,9 +105,6 @@ describe('Tree Export Formatter', () => {
       }
       return value || '';
     };
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
 
     const output = treeExportFormatter(1, 1, { ...dataset[1]['firstName'], indent: 1 }, { field: 'firstName' } as Column, dataset[1], gridStub);
     expect(output).toEqual(`.     ⮟ ++Jane++`);
diff --git a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
index 608ed53ee..0f6f5f530 100644
--- a/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
+++ b/packages/common/src/formatters/__tests__/treeFormatter.spec.ts
@@ -1,12 +1,6 @@
-import { Column, SlickDataView, GridOption, SlickGrid } from '../../interfaces/index';
+import { Column, GridOption, SlickGrid } from '../../interfaces/index';
 import { treeFormatter } from '../treeFormatter';
 
-const dataViewStub = {
-  getIdxById: jest.fn(),
-  getItemByIdx: jest.fn(),
-  getIdPropertyName: jest.fn(),
-} as unknown as SlickDataView;
-
 const gridStub = {
   getData: jest.fn(),
   getOptions: jest.fn(),
@@ -18,12 +12,13 @@ describe('Tree Formatter', () => {
 
   beforeEach(() => {
     dataset = [
-      { id: 0, firstName: 'John', lastName: 'Smith', fullName: 'John Smith', email: 'john.smith@movie.com', address: { zip: 123456 }, parentId: null, indent: 0 },
-      { id: 1, firstName: 'Jane', lastName: 'Doe', fullName: 'Jane Doe', email: 'jane.doe@movie.com', address: { zip: 222222 }, parentId: 0, indent: 1 },
-      { id: 2, firstName: 'Bob', lastName: 'Cane', fullName: 'Bob Cane', email: 'bob.cane@movie.com', address: { zip: 333333 }, parentId: 1, indent: 2, __collapsed: true },
-      { id: 3, firstName: 'Barbara', lastName: 'Cane', fullName: 'Barbara Cane', email: 'barbara.cane@movie.com', address: { zip: 444444 }, parentId: null, indent: 0, __collapsed: true },
-      { id: 4, firstName: 'Anonymous', lastName: 'Doe', fullName: 'Anonymous < Doe', email: 'anonymous.doe@anom.com', address: { zip: 556666 }, parentId: null, indent: 0, __collapsed: true },
-      { id: 5, firstName: 'Sponge', lastName: 'Bob', fullName: 'Sponge Bob', email: 'sponge.bob@cartoon.com', address: { zip: 888888 }, parentId: 2, indent: 3, __collapsed: true },
+      { id: 0, firstName: 'John', lastName: 'Smith', fullName: 'John Smith', email: 'john.smith@movie.com', address: { zip: 123456 }, parentId: null, indent: 0, __collapsed: false, __hasChildren: true },
+      { id: 1, firstName: 'Jane', lastName: 'Doe', fullName: 'Jane Doe', email: 'jane.doe@movie.com', address: { zip: 222222 }, parentId: 0, indent: 1, __collapsed: false, __hasChildren: true },
+      { id: 2, firstName: 'Bob', lastName: 'Cane', fullName: 'Bob Cane', email: 'bob.cane@movie.com', address: { zip: 333333 }, parentId: 1, indent: 2, __collapsed: true, __hasChildren: true },
+      { id: 3, firstName: 'Barbara', lastName: 'Cane', fullName: 'Barbara Cane', email: 'barbara.cane@movie.com', address: { zip: 444444 }, parentId: null, indent: 0, __hasChildren: false },
+      { id: 4, firstName: 'Anonymous', lastName: 'Doe', fullName: 'Anonymous < Doe', email: 'anonymous.doe@anom.com', address: { zip: 556666 }, parentId: null, indent: 0, __collapsed: true, __hasChildren: true },
+      { id: 5, firstName: 'Sponge', lastName: 'Bob', fullName: 'Sponge Bob', email: 'sponge.bob@cartoon.com', address: { zip: 888888 }, parentId: 2, indent: 3, __hasChildren: false },
+      { id: 6, firstName: 'Bobby', lastName: 'Blown', fullName: 'Bobby Blown', email: 'bobby.blown@dynamite.com', address: { zip: 998877 }, parentId: 4, indent: 1, __hasChildren: false },
     ];
     mockGridOptions = {
       treeDataOptions: { levelPropName: 'indent' }
@@ -36,11 +31,6 @@ describe('Tree Formatter', () => {
       .toThrowError('[Slickgrid-Universal] You must provide valid "treeDataOptions" in your Grid Options, however it seems that we could not find any tree level info on the current item datacontext row.');
   });
 
-  it('should return empty string when DataView is not correctly formed', () => {
-    const output = treeFormatter(1, 1, '', {} as Column, dataset[1], gridStub);
-    expect(output).toBe('');
-  });
-
   it('should return empty string when value is null', () => {
     const output = treeFormatter(1, 1, null, {} as Column, dataset[1], gridStub);
     expect(output).toBe('');
@@ -56,47 +46,31 @@ describe('Tree Formatter', () => {
     expect(output).toBe('');
   });
 
-  it('should return a span without any icon and ', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[0]);
-
-    const output = treeFormatter(1, 1, dataset[0]['firstName'], {} as Column, dataset[0], gridStub);
+  it('should return a span without any toggle icon when item is not a parent item', () => {
+    const output = treeFormatter(1, 1, dataset[3]['firstName'], {} as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">John</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">Barbara</span>`
     });
   });
 
-  it('should return a span without any icon and 15px indentation of a tree level 1', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeFormatter(1, 1, dataset[1]['firstName'], {} as Column, dataset[1], gridStub);
+  it('should return a span without any toggle icon and have a 15px indentation with tree level 3', () => {
+    const output = treeFormatter(1, 1, dataset[6]['firstName'], {} as Column, dataset[6], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-1',
-      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="1">Jane</span>`
+      text: `<span style="display:inline-block; width:15px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="1">Bobby</span>`
     });
   });
 
-  it('should return a span without any icon and 30px indentation of a tree level 2', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeFormatter(1, 1, dataset[2]['firstName'], {} as Column, dataset[2], gridStub);
+  it('should return a span without any toggle icon and have a 45px indentation of a tree level 3', () => {
+    const output = treeFormatter(1, 1, dataset[5]['firstName'], {} as Column, dataset[5], gridStub);
     expect(output).toEqual({
-      addClasses: 'slick-tree-level-2',
-      text: `<span style="display:inline-block; width:30px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="2">Bob</span>`
+      addClasses: 'slick-tree-level-3',
+      text: `<span style="display:inline-block; width:45px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="3">Sponge</span>`
     });
   });
 
-  it('should return a span with expanded icon and 15px indentation of a tree level 1 when current item is greater than next item', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
-
+  it('should return a span with expanded icon and 15px indentation when item is a parent and is not collapsed', () => {
     const output = treeFormatter(1, 1, dataset[1]['firstName'], {} as Column, dataset[1], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-1',
@@ -104,15 +78,11 @@ describe('Tree Formatter', () => {
     });
   });
 
-  it('should return a span with collapsed icon and 0px indentation of a tree level 0 when current item is lower than next item', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
-    const output = treeFormatter(1, 1, dataset[3]['firstName'], {} as Column, dataset[3], gridStub);
+  it('should return a span with collapsed icon and 0px indentation of a tree level 0 when item is a parent and is collapsed', () => {
+    const output = treeFormatter(1, 1, dataset[4]['firstName'], {} as Column, dataset[4], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">Barbara</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">Anonymous</span>`
     });
   });
 
@@ -124,9 +94,6 @@ describe('Tree Formatter', () => {
       }
       return value || '';
     };
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
 
     const output = treeFormatter(1, 1, { ...dataset[1]['firstName'], indent: 1 }, { field: 'firstName' } as Column, dataset[1], gridStub);
     expect(output).toEqual({
@@ -136,23 +103,15 @@ describe('Tree Formatter', () => {
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name to use when it is defined', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
     const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: () => 'fullName' } as Column;
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">Barbara Cane</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">Barbara Cane</span>`
     });
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name and also apply html encoding when output value includes a character that should be encoded', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(2);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[2]);
-
     const mockColumn = { id: 'firstName', field: 'firstName', queryFieldNameGetterFn: () => 'fullName' } as Column;
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[4], gridStub);
     expect(output).toEqual({
@@ -162,15 +121,11 @@ describe('Tree Formatter', () => {
   });
 
   it('should execute "queryFieldNameGetterFn" callback to get field name, which has (.) dot notation reprensenting complex object', () => {
-    jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
-    jest.spyOn(dataViewStub, 'getIdxById').mockReturnValue(1);
-    jest.spyOn(dataViewStub, 'getItemByIdx').mockReturnValue(dataset[1]);
-
     const mockColumn = { id: 'zip', field: 'zip', queryFieldNameGetterFn: () => 'address.zip' } as Column;
     const output = treeFormatter(1, 1, null, mockColumn as Column, dataset[3], gridStub);
     expect(output).toEqual({
       addClasses: 'slick-tree-level-0',
-      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle collapsed"></span><span class="slick-tree-title" level="0">444444</span>`
+      text: `<span style="display:inline-block; width:0px;"></span><span class="slick-group-toggle"></span><span class="slick-tree-title" level="0">444444</span>`
     });
   });
 });
diff --git a/packages/common/src/formatters/treeExportFormatter.ts b/packages/common/src/formatters/treeExportFormatter.ts
index dc765e27b..d000fc5dc 100644
--- a/packages/common/src/formatters/treeExportFormatter.ts
+++ b/packages/common/src/formatters/treeExportFormatter.ts
@@ -1,14 +1,15 @@
-import { SlickDataView, Formatter } from './../interfaces/index';
+import { Constants } from '../constants';
+import { Formatter } from './../interfaces/index';
 import { addWhiteSpaces, getDescendantProperty, sanitizeHtmlToText, } from '../services/utilities';
 import { parseFormatterWhenExist } from './formatterUtilities';
 
 /** Formatter that must be use with a Tree Data column */
 export const treeExportFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const dataView = grid.getData<SlickDataView>();
   const gridOptions = grid.getOptions();
   const treeDataOptions = gridOptions?.treeDataOptions;
-  const collapsedPropName = treeDataOptions?.collapsedPropName ?? '__collapsed';
-  const treeLevelPropName = treeDataOptions?.levelPropName ?? '__treeLevel';
+  const collapsedPropName = treeDataOptions?.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
+  const hasChildrenPropName = treeDataOptions?.hasChildrenPropName ?? Constants.treeDataProperties.HAS_CHILDREN_PROP;
+  const treeLevelPropName = treeDataOptions?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
   const indentMarginLeft = treeDataOptions?.exportIndentMarginLeft ?? 5;
   const exportIndentationLeadingChar = treeDataOptions?.exportIndentationLeadingChar ?? '.';
   const exportIndentationLeadingSpaceCount = treeDataOptions?.exportIndentationLeadingSpaceCount ?? 3;
@@ -32,31 +33,25 @@ export const treeExportFormatter: Formatter = (row, cell, value, columnDef, data
     throw new Error('[Slickgrid-Universal] You must provide valid "treeDataOptions" in your Grid Options, however it seems that we could not find any tree level info on the current item datacontext row.');
   }
 
-  if (dataView?.getItemByIdx) {
-    const identifierPropName = dataView.getIdPropertyName() ?? 'id';
-    const treeLevel = dataContext?.[treeLevelPropName] ?? 0;
-    const idx = dataView.getIdxById(dataContext[identifierPropName]);
-    const nextItemRow = dataView.getItemByIdx((idx || 0) + 1);
-    let toggleSymbol = '';
-    let indentation = 0;
-
-    if (nextItemRow?.[treeLevelPropName] > treeLevel) {
-      toggleSymbol = dataContext?.[collapsedPropName] ? groupCollapsedSymbol : groupExpandedSymbol; // parent with child will have a toggle icon
-      indentation = treeLevel === 0 ? 0 : (indentMarginLeft * treeLevel);
-    } else {
-      indentation = (indentMarginLeft * (treeLevel === 0 ? 0 : treeLevel + 1));
-    }
-    const indentSpacer = addWhiteSpaces(indentation);
-
-    if (treeDataOptions?.titleFormatter) {
-      outputValue = parseFormatterWhenExist(treeDataOptions.titleFormatter, row, cell, columnDef, dataContext, grid);
-    }
+  const treeLevel = dataContext?.[treeLevelPropName] ?? 0;
+  let toggleSymbol = '';
+  let indentation = 0;
 
-    const leadingChar = (treeLevel === 0 && toggleSymbol) ? '' : (treeLevel === 0 ? `${exportIndentationLeadingChar}${addWhiteSpaces(exportIndentationLeadingSpaceCount)}` : exportIndentationLeadingChar);
-    outputValue = `${leadingChar}${indentSpacer}${toggleSymbol} ${outputValue}`;
-    const sanitizedOutputValue = sanitizeHtmlToText(outputValue); // also remove any html tags that might exist
+  if (dataContext[hasChildrenPropName]) {
+    toggleSymbol = dataContext?.[collapsedPropName] ? groupCollapsedSymbol : groupExpandedSymbol; // parent with child will have a toggle icon
+    indentation = treeLevel === 0 ? 0 : (indentMarginLeft * treeLevel);
+  } else {
+    indentation = (indentMarginLeft * (treeLevel === 0 ? 0 : treeLevel + 1));
+  }
+  const indentSpacer = addWhiteSpaces(indentation);
 
-    return sanitizedOutputValue;
+  if (treeDataOptions?.titleFormatter) {
+    outputValue = parseFormatterWhenExist(treeDataOptions.titleFormatter, row, cell, columnDef, dataContext, grid);
   }
-  return '';
+
+  const leadingChar = (treeLevel === 0 && toggleSymbol) ? '' : (treeLevel === 0 ? `${exportIndentationLeadingChar}${addWhiteSpaces(exportIndentationLeadingSpaceCount)}` : exportIndentationLeadingChar);
+  outputValue = `${leadingChar}${indentSpacer}${toggleSymbol} ${outputValue}`;
+  const sanitizedOutputValue = sanitizeHtmlToText(outputValue); // also remove any html tags that might exist
+
+  return sanitizedOutputValue;
 };
diff --git a/packages/common/src/formatters/treeFormatter.ts b/packages/common/src/formatters/treeFormatter.ts
index a1c5e5bc4..8226afa4e 100644
--- a/packages/common/src/formatters/treeFormatter.ts
+++ b/packages/common/src/formatters/treeFormatter.ts
@@ -1,15 +1,16 @@
-import { Formatter, SlickDataView } from './../interfaces/index';
+import { Constants } from '../constants';
+import { Formatter } from './../interfaces/index';
 import { parseFormatterWhenExist } from './formatterUtilities';
 import { getDescendantProperty, sanitizeTextByAvailableSanitizer } from '../services/utilities';
 
 /** Formatter that must be use with a Tree Data column */
 export const treeFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const dataView = grid.getData<SlickDataView>();
   const gridOptions = grid.getOptions();
   const treeDataOptions = gridOptions?.treeDataOptions;
-  const collapsedPropName = treeDataOptions?.collapsedPropName ?? '__collapsed';
   const indentMarginLeft = treeDataOptions?.indentMarginLeft ?? 15;
-  const treeLevelPropName = treeDataOptions?.levelPropName ?? '__treeLevel';
+  const collapsedPropName = treeDataOptions?.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
+  const hasChildrenPropName = treeDataOptions?.hasChildrenPropName ?? Constants.treeDataProperties.HAS_CHILDREN_PROP;
+  const treeLevelPropName = treeDataOptions?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
   let outputValue = value;
 
   if (typeof columnDef.queryFieldNameGetterFn === 'function') {
@@ -28,26 +29,20 @@ export const treeFormatter: Formatter = (row, cell, value, columnDef, dataContex
     throw new Error('[Slickgrid-Universal] You must provide valid "treeDataOptions" in your Grid Options, however it seems that we could not find any tree level info on the current item datacontext row.');
   }
 
-  if (dataView?.getItemByIdx) {
-    const identifierPropName = dataView.getIdPropertyName() ?? 'id';
-    const treeLevel = dataContext?.[treeLevelPropName] ?? 0;
-    const indentSpacer = `<span style="display:inline-block; width:${indentMarginLeft * treeLevel}px;"></span>`;
-    const idx = dataView.getIdxById(dataContext[identifierPropName]);
-    const nextItemRow = dataView.getItemByIdx((idx || 0) + 1);
-    const slickTreeLevelClass = `slick-tree-level-${treeLevel}`;
-    let toggleClass = '';
+  const treeLevel = dataContext?.[treeLevelPropName] ?? 0;
+  const indentSpacer = `<span style="display:inline-block; width:${indentMarginLeft * treeLevel}px;"></span>`;
+  const slickTreeLevelClass = `slick-tree-level-${treeLevel}`;
+  let toggleClass = '';
 
-    if (nextItemRow?.[treeLevelPropName] > treeLevel) {
-      toggleClass = dataContext?.[collapsedPropName] ? 'collapsed' : 'expanded'; // parent with child will have a toggle icon
-    }
+  if (dataContext[hasChildrenPropName]) {
+    toggleClass = dataContext?.[collapsedPropName] ? 'collapsed' : 'expanded'; // parent with child will have a toggle icon
+  }
 
-    if (treeDataOptions?.titleFormatter) {
-      outputValue = parseFormatterWhenExist(treeDataOptions.titleFormatter, row, cell, columnDef, dataContext, grid);
-    }
-    const sanitizedOutputValue = sanitizeTextByAvailableSanitizer(gridOptions, outputValue, { ADD_ATTR: ['target'] });
-    const spanToggleClass = `slick-group-toggle ${toggleClass}`.trim();
-    const outputHtml = `${indentSpacer}<span class="${spanToggleClass}"></span><span class="slick-tree-title" level="${treeLevel}">${sanitizedOutputValue}</span>`;
-    return { addClasses: slickTreeLevelClass, text: outputHtml };
+  if (treeDataOptions?.titleFormatter) {
+    outputValue = parseFormatterWhenExist(treeDataOptions.titleFormatter, row, cell, columnDef, dataContext, grid);
   }
-  return '';
+  const sanitizedOutputValue = sanitizeTextByAvailableSanitizer(gridOptions, outputValue, { ADD_ATTR: ['target'] });
+  const spanToggleClass = `slick-group-toggle ${toggleClass}`.trim();
+  const outputHtml = `${indentSpacer}<span class="${spanToggleClass}"></span><span class="slick-tree-title" level="${treeLevel}">${sanitizedOutputValue}</span>`;
+  return { addClasses: slickTreeLevelClass, text: outputHtml };
 };
diff --git a/packages/common/src/interfaces/gridState.interface.ts b/packages/common/src/interfaces/gridState.interface.ts
index 63482691d..05964aff5 100644
--- a/packages/common/src/interfaces/gridState.interface.ts
+++ b/packages/common/src/interfaces/gridState.interface.ts
@@ -1,4 +1,12 @@
-import { CurrentColumn, CurrentFilter, CurrentPagination, CurrentPinning, CurrentRowSelection, CurrentSorter } from './index';
+import {
+  CurrentColumn,
+  CurrentFilter,
+  CurrentPagination,
+  CurrentPinning,
+  CurrentRowSelection,
+  CurrentSorter,
+  TreeToggleStateChange,
+} from './index';
 
 export interface GridState {
   /** Columns (and their state: visibility/position) that are currently applied in the grid */
@@ -19,6 +27,6 @@ export interface GridState {
   /** Row Selections (by their dataContext IDs and/or grid row indexes) */
   rowSelection?: CurrentRowSelection | null;
 
-  /** Tree Data with optional collapsed parents array */
-  treeCollapsedParents?: { parentId: number | string; isCollapsed: boolean; }[] | null;
+  /** Tree Data changes which include toggled items (when the change is an item toggle, this could be `null` when the change is a full collapse/expand) */
+  treeData?: Partial<TreeToggleStateChange> | null;
 }
diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts
index 16be20a6f..3402dcd0f 100644
--- a/packages/common/src/interfaces/index.ts
+++ b/packages/common/src/interfaces/index.ts
@@ -157,3 +157,5 @@ export * from './slickRowSelectionModel.interface';
 export * from './sorter.interface';
 export * from './textExportOption.interface';
 export * from './treeDataOption.interface';
+export * from './treeToggledItem.interface';
+export * from './treeToggleStateChange.interface';
diff --git a/packages/common/src/interfaces/slickDataView.interface.ts b/packages/common/src/interfaces/slickDataView.interface.ts
index 83a7a9a93..c7fbc6cc8 100644
--- a/packages/common/src/interfaces/slickDataView.interface.ts
+++ b/packages/common/src/interfaces/slickDataView.interface.ts
@@ -90,7 +90,7 @@ export interface SlickDataView {
   getItem: <T = any>(index: number) => T;
 
   /** Get an item in the DataView by its Id */
-  getItemById: <T = any>(id: string | number) => T;
+  getItemById: <T = any>(id: string | number) => T | null;
 
   /** Get an item in the DataView by its row index */
   getItemByIdx: <T = any>(idx: number) => T;
diff --git a/packages/common/src/interfaces/treeDataOption.interface.ts b/packages/common/src/interfaces/treeDataOption.interface.ts
index 1a60249c0..cf6b9a8d9 100644
--- a/packages/common/src/interfaces/treeDataOption.interface.ts
+++ b/packages/common/src/interfaces/treeDataOption.interface.ts
@@ -19,13 +19,22 @@ export interface TreeDataOption {
     direction: SortDirection | SortDirectionString;
   };
 
+  /** Defaults to False, will the Tree be collapsed on first load? */
+  initiallyCollapsed?: boolean;
+
   /** Defaults to "children", object property name used to designate the Children array */
   childrenPropName?: string;
 
   /** Defaults to "__collapsed", object property name used to designate the Collapsed flag */
   collapsedPropName?: string;
 
-  /** Defaults to "id", object property name used to designate the Id field */
+  /** Defaults to "__hasChildren", object property name used to designate if the item has children or not (boolean) */
+  hasChildrenPropName?: string;
+
+  /**
+   * Defaults to "id", object property name used to designate the Id field (you would rarely override this property, it is mostly used for internal usage).
+   * NOTE: by default it will read the `datasetIdPropertyName` from the grid option, so it's typically better NOT to override this property.
+   */
   identifierPropName?: string;
 
   /** Defaults to "__parentId", object property name used to designate the Parent Id */
diff --git a/packages/common/src/interfaces/treeToggleStateChange.interface.ts b/packages/common/src/interfaces/treeToggleStateChange.interface.ts
new file mode 100644
index 000000000..817bbb76f
--- /dev/null
+++ b/packages/common/src/interfaces/treeToggleStateChange.interface.ts
@@ -0,0 +1,19 @@
+import { ToggleStateChangeType, ToggleStateChangeTypeString } from '../enums/toggleStateChangeType';
+import { TreeToggledItem } from './treeToggledItem.interface';
+
+export interface TreeToggleStateChange {
+  /** Optional, what was the item Id that triggered the toggle? Only available when a parent item got toggled within the grid */
+  fromItemId: number | string;
+
+  /** What is the Type of toggle that just triggered the change event? */
+  type: ToggleStateChangeType | ToggleStateChangeTypeString;
+
+  /** What are the toggled items? This will be `null` when a full toggle is requested. */
+  toggledItems: TreeToggledItem[] | null;
+
+  /**
+   * What was the previous/last full toggle type?
+   * This will help us identify if the tree was fully collapsed or expanded when toggling items in the grid.
+   */
+  previousFullToggleType: Exclude<ToggleStateChangeType, 'toggle'> | Exclude<ToggleStateChangeTypeString, 'toggle'>;
+}
\ No newline at end of file
diff --git a/packages/common/src/interfaces/treeToggledItem.interface.ts b/packages/common/src/interfaces/treeToggledItem.interface.ts
new file mode 100644
index 000000000..e14214dd4
--- /dev/null
+++ b/packages/common/src/interfaces/treeToggledItem.interface.ts
@@ -0,0 +1,7 @@
+export interface TreeToggledItem {
+  /** Id of the item that was toggled (could be expanded/collapsed) */
+  itemId: number | string;
+
+  /** is the parent id collapsed or not? */
+  isCollapsed: boolean;
+}
\ No newline at end of file
diff --git a/packages/common/src/services/__tests__/filter.service.spec.ts b/packages/common/src/services/__tests__/filter.service.spec.ts
index 6bf85e490..14ab67d68 100644
--- a/packages/common/src/services/__tests__/filter.service.spec.ts
+++ b/packages/common/src/services/__tests__/filter.service.spec.ts
@@ -992,6 +992,10 @@ describe('FilterService', () => {
       };
     });
 
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
     it('should return an empty array when column definitions returns nothing as well', () => {
       gridStub.getColumns = undefined as any;
 
@@ -1059,7 +1063,41 @@ describe('FilterService', () => {
       ]);
     });
 
-    it('should pre-filter the tree dataset when the grid is a Tree Data View', () => {
+    it('should pre-filter the tree dataset when the grid is a Tree Data View & dataset is empty', (done) => {
+      const spyRefresh = jest.spyOn(dataViewStub, 'refresh');
+      const spyPreFilter = jest.spyOn(service, 'preFilterTreeData');
+      const spyGetCols = jest.spyOn(gridStub, 'getColumns').mockReturnValue([
+        { id: 'name', field: 'name', filter: { model: Filters.input, operator: 'EQ' } },
+        { id: 'gender', field: 'gender' },
+        { id: 'size', field: 'size', filter: { model: Filters.input, operator: '>=' } }
+      ]);
+      const mockFlatDataset = [{ id: 0, name: 'John', gender: 'male', size: 170 }, { id: 1, name: 'Jane', gender: 'female', size: 150 }];
+      jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'get').mockReturnValue(mockFlatDataset);
+      gridOptionMock.enableTreeData = true;
+      gridOptionMock.treeDataOptions = { columnId: 'file', childrenPropName: 'files' };
+      gridOptionMock.presets = {
+        filters: [{ columnId: 'size', searchTerms: [20], operator: '>=' }]
+      };
+      service.init(gridStub);
+      const output = service.populateColumnFilterSearchTermPresets(gridOptionMock.presets!.filters as any);
+
+      expect(spyRefresh).not.toHaveBeenCalled();
+      jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
+
+      setTimeout(() => {
+        expect(spyGetCols).toHaveBeenCalled();
+        expect(spyPreFilter).toHaveBeenCalled();
+        expect(spyRefresh).toHaveBeenCalled();
+        expect(output).toEqual([
+          { id: 'name', field: 'name', filter: { model: Filters.input, operator: 'EQ' } },
+          { id: 'gender', field: 'gender', },
+          { id: 'size', field: 'size', filter: { model: Filters.input, operator: '>=', searchTerms: [20] } },
+        ]);
+        done();
+      });
+    });
+
+    it('should pre-filter the tree dataset when the grid is a Tree Data View & dataset is filled', () => {
       const spyRefresh = jest.spyOn(dataViewStub, 'refresh');
       const spyPreFilter = jest.spyOn(service, 'preFilterTreeData');
       const spyGetCols = jest.spyOn(gridStub, 'getColumns').mockReturnValue([
@@ -1067,6 +1105,8 @@ describe('FilterService', () => {
         { id: 'gender', field: 'gender' },
         { id: 'size', field: 'size', filter: { model: Filters.input, operator: '>=' } }
       ]);
+      const mockFlatDataset = [{ id: 0, name: 'John', gender: 'male', size: 170 }, { id: 1, name: 'Jane', gender: 'female', size: 150 }];
+      jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
       gridOptionMock.enableTreeData = true;
       gridOptionMock.treeDataOptions = { columnId: 'file', childrenPropName: 'files' };
       gridOptionMock.presets = {
@@ -1577,6 +1617,9 @@ describe('FilterService', () => {
       beforeEach(() => {
         gridStub.getColumns = jest.fn();
         gridOptionMock.backendServiceApi = undefined;
+        gridOptionMock.presets = {
+          treeData: { toggledItems: [{ itemId: 4, isCollapsed: true }] }
+        };
         dataset = [
           { __parentId: null, __treeLevel: 0, dateModified: '2012-03-05T12:44:00.123Z', file: 'bucket-list.txt', id: 24, size: 0.5 },
           { __hasChildren: true, __parentId: null, __treeLevel: 0, file: 'documents', id: 21 },
diff --git a/packages/common/src/services/__tests__/gridState.service.spec.ts b/packages/common/src/services/__tests__/gridState.service.spec.ts
index 2b2e56bb1..a496292a2 100644
--- a/packages/common/src/services/__tests__/gridState.service.spec.ts
+++ b/packages/common/src/services/__tests__/gridState.service.spec.ts
@@ -24,8 +24,10 @@ import {
   SlickGrid,
   SlickNamespace,
   SlickRowSelectionModel,
+  TreeToggleStateChange,
 } from '../../interfaces/index';
 import { SharedService } from '../shared.service';
+import { TreeDataService } from '../treeData.service';
 
 declare const Slick: SlickNamespace;
 
@@ -87,6 +89,10 @@ const filterServiceStub = {
 const sortServiceStub = {
 } as SortService;
 
+const treeDataServiceStub = {
+  getCurrentToggleState: jest.fn(),
+} as unknown as TreeDataService;
+
 const rowSelectionModelStub = {
   pluginName: 'RowSelectionModel',
   constructor: jest.fn(),
@@ -105,7 +111,7 @@ describe('GridStateService', () => {
 
   beforeEach(() => {
     sharedService = new SharedService();
-    service = new GridStateService(extensionServiceStub, filterServiceStub, mockPubSub, sharedService, sortServiceStub);
+    service = new GridStateService(extensionServiceStub, filterServiceStub, mockPubSub, sharedService, sortServiceStub, treeDataServiceStub);
     service.init(gridStub);
     jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(rowSelectionModelStub);
   });
@@ -137,7 +143,7 @@ describe('GridStateService', () => {
       jest.spyOn(gridStub, 'getSelectionModel').mockReturnValue(rowSelectionModelStub);
 
       expect(gridStateSpy).toHaveBeenCalled();
-      expect(pubSubSpy).toHaveBeenCalledTimes(5);
+      expect(pubSubSpy).toHaveBeenCalledTimes(7);
       // expect(pubSubSpy).toHaveBeenNthCalledWith(1, `onFilterChanged`, () => { });
     });
 
@@ -394,6 +400,10 @@ describe('GridStateService', () => {
   });
 
   describe('getCurrentPagination method', () => {
+    afterEach(() => {
+      jest.clearAllMocks();
+    });
+
     it('should call "getCurrentPagination" and return null when no BackendService is used', () => {
       const output = service.getCurrentPagination();
       expect(output).toBeNull();
@@ -426,18 +436,21 @@ describe('GridStateService', () => {
     });
 
     it('should call "getCurrentGridState" method and return Pagination', () => {
-      const gridOptionsMock = { enablePagination: true, frozenBottom: false, frozenColumn: -1, frozenRow: -1 } as GridOption;
+      const gridOptionsMock = { enablePagination: true, frozenBottom: false, frozenColumn: -1, frozenRow: -1, enableTreeData: true, } as GridOption;
       const paginationMock = { pageNumber: 2, pageSize: 50 } as CurrentPagination;
       const columnMock = [{ columnId: 'field1', cssClass: 'red', headerCssClass: '', width: 100 }] as CurrentColumn[];
       const filterMock = [{ columnId: 'field1', operator: 'EQ', searchTerms: [] }] as CurrentFilter[];
       const sorterMock = [{ columnId: 'field1', direction: 'ASC' }, { columnId: 'field2', direction: 'DESC' }] as CurrentSorter[];
       const pinningMock = { frozenBottom: false, frozenColumn: -1, frozenRow: -1 } as CurrentPinning;
+      const treeDataMock = { type: 'full-expand', previousFullToggleType: 'full-expand', toggledItems: null } as TreeToggleStateChange;
 
       jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(gridOptionsMock);
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue(gridOptionsMock);
       const columnSpy = jest.spyOn(service, 'getCurrentColumns').mockReturnValue(columnMock);
       const filterSpy = jest.spyOn(service, 'getCurrentFilters').mockReturnValue(filterMock);
       const sorterSpy = jest.spyOn(service, 'getCurrentSorters').mockReturnValue(sorterMock);
       const paginationSpy = jest.spyOn(service, 'getCurrentPagination').mockReturnValue(paginationMock);
+      const treeDataSpy = jest.spyOn(service, 'getCurrentTreeDataToggleState').mockReturnValue(treeDataMock);
 
       const output = service.getCurrentGridState();
 
@@ -445,7 +458,8 @@ describe('GridStateService', () => {
       expect(filterSpy).toHaveBeenCalled();
       expect(sorterSpy).toHaveBeenCalled();
       expect(paginationSpy).toHaveBeenCalled();
-      expect(output).toEqual({ columns: columnMock, filters: filterMock, sorters: sorterMock, pagination: paginationMock, pinning: pinningMock, } as GridState);
+      expect(treeDataSpy).toHaveBeenCalled();
+      expect(output).toEqual({ columns: columnMock, filters: filterMock, sorters: sorterMock, pagination: paginationMock, pinning: pinningMock, treeData: treeDataMock } as GridState);
     });
   });
 
@@ -845,6 +859,32 @@ describe('GridStateService', () => {
     });
   });
 
+  describe('getCurrentTreeDataToggleState method', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    it('should return null when Tree Data is not enabled', () => {
+      const gridSpy = jest.spyOn(gridStub, 'getOptions').mockReturnValue({ enableTreeData: false });
+
+      const output = service.getCurrentTreeDataToggleState();
+
+      expect(gridSpy).toHaveBeenCalled();
+      expect(output).toBeNull();
+    });
+
+    it('should expect Tree Data "getCurrentTreeDataToggleState" method to be called', () => {
+      jest.spyOn(gridStub, 'getOptions').mockReturnValue({ enableTreeData: true });
+      const treeDataMock = { type: 'full-expand', previousFullToggleType: 'full-expand', toggledItems: null } as TreeToggleStateChange;
+      const getToggleSpy = jest.spyOn(treeDataServiceStub, 'getCurrentToggleState').mockReturnValue(treeDataMock);
+
+      const output = service.getCurrentTreeDataToggleState();
+
+      expect(getToggleSpy).toHaveBeenCalled();
+      expect(output).toEqual(treeDataMock);
+    });
+  });
+
   describe('getCurrentFilters method', () => {
     afterEach(() => {
       gridStub.getOptions = () => gridOptionMock;
@@ -1130,5 +1170,31 @@ describe('GridStateService', () => {
       expect(getAssocCurColSpy).toHaveBeenCalled();
       expect(pubSubSpy).toHaveBeenCalledWith(`onGridStateChanged`, stateChangeMock);
     });
+
+    it('should trigger a "onGridStateChanged" event when "onTreeItemToggled" is triggered', () => {
+      const toggleChangeMock = { type: 'toggle-expand', fromItemId: 2, previousFullToggleType: 'full-collapse', toggledItems: [{ itemId: 2, isCollapsed: true }] } as TreeToggleStateChange;
+      const gridStateMock = { columns: [], filters: [], sorters: [], treeData: toggleChangeMock } as GridState;
+      const stateChangeMock = { change: { newValues: toggleChangeMock, type: GridStateType.treeData }, gridState: gridStateMock } as GridStateChange;
+      const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
+      const getCurGridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
+
+      fnCallbacks['onTreeItemToggled'](toggleChangeMock);
+
+      expect(getCurGridStateSpy).toHaveBeenCalled();
+      expect(pubSubSpy).toHaveBeenCalledWith(`onGridStateChanged`, stateChangeMock);
+    });
+
+    it('should trigger a "onGridStateChanged" event when "onTreeFullToggleEnd" is triggered', () => {
+      const toggleChangeMock = { type: 'full-expand', previousFullToggleType: 'full-expand', toggledItems: null } as TreeToggleStateChange;
+      const gridStateMock = { columns: [], filters: [], sorters: [], treeData: toggleChangeMock } as GridState;
+      const stateChangeMock = { change: { newValues: toggleChangeMock, type: GridStateType.treeData }, gridState: gridStateMock } as GridStateChange;
+      const pubSubSpy = jest.spyOn(mockPubSub, 'publish');
+      const getCurGridStateSpy = jest.spyOn(service, 'getCurrentGridState').mockReturnValue(gridStateMock);
+
+      fnCallbacks['onTreeFullToggleEnd'](toggleChangeMock);
+
+      expect(getCurGridStateSpy).toHaveBeenCalled();
+      expect(pubSubSpy).toHaveBeenCalledWith(`onGridStateChanged`, stateChangeMock);
+    });
   });
 });
diff --git a/packages/common/src/services/__tests__/sort.service.spec.ts b/packages/common/src/services/__tests__/sort.service.spec.ts
index 4bb54bce5..daf56e61c 100644
--- a/packages/common/src/services/__tests__/sort.service.spec.ts
+++ b/packages/common/src/services/__tests__/sort.service.spec.ts
@@ -1089,34 +1089,34 @@ describe('SortService', () => {
     describe('Hierarchical Dataset', () => {
       let dataset = [];
       const expectedSortedAscDataset = [
-        { __parentId: null, __treeLevel: 0, dateModified: '2012-03-05T12:44:00.123Z', file: 'bucket-list.txt', id: 24, size: 0.5 },
-        { __parentId: null, __treeLevel: 0, file: 'documents', id: 21 },
-        { __parentId: 21, __treeLevel: 1, file: 'misc', id: 9 },
-        { __parentId: 9, __treeLevel: 2, dateModified: '2015-02-26T16:50:00.123Z', file: 'todo.txt', id: 10, size: 0.4 },
-        { __parentId: 21, __treeLevel: 1, file: 'pdf', id: 4 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'internet-bill.pdf', id: 6, size: 1.4 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-21T10:22:00.123Z', file: 'map.pdf', id: 5, size: 3.1 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-01T07:50:00.123Z', file: 'phone-bill.pdf', id: 23, size: 1.4 },
-        { __parentId: 21, __treeLevel: 1, file: 'txt', id: 2 },
-        { __parentId: 2, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'todo.txt', id: 3, size: 0.7 },
-        { __parentId: 21, __treeLevel: 1, file: 'xls', id: 7 },
-        { __parentId: 7, __treeLevel: 2, dateModified: '2014-10-02T14:50:00.123Z', file: 'compilation.xls', id: 8, size: 2.3 },
-        { __parentId: null, __treeLevel: 0, dateModified: '2015-03-03T03:50:00.123Z', file: 'something.txt', id: 18, size: 90 },
+        { __parentId: null, __hasChildren: false, __treeLevel: 0, dateModified: '2012-03-05T12:44:00.123Z', file: 'bucket-list.txt', id: 24, size: 0.5 },
+        { __parentId: null, __hasChildren: true, __treeLevel: 0, file: 'documents', id: 21 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'misc', id: 9 },
+        { __parentId: 9, __hasChildren: false, __treeLevel: 2, dateModified: '2015-02-26T16:50:00.123Z', file: 'todo.txt', id: 10, size: 0.4 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'pdf', id: 4 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'internet-bill.pdf', id: 6, size: 1.4 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-21T10:22:00.123Z', file: 'map.pdf', id: 5, size: 3.1 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-01T07:50:00.123Z', file: 'phone-bill.pdf', id: 23, size: 1.4 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'txt', id: 2 },
+        { __parentId: 2, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'todo.txt', id: 3, size: 0.7 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'xls', id: 7 },
+        { __parentId: 7, __hasChildren: false, __treeLevel: 2, dateModified: '2014-10-02T14:50:00.123Z', file: 'compilation.xls', id: 8, size: 2.3 },
+        { __parentId: null, __hasChildren: false, __treeLevel: 0, dateModified: '2015-03-03T03:50:00.123Z', file: 'something.txt', id: 18, size: 90 },
       ];
       const expectedSortedDescDataset = [
-        { __parentId: null, __treeLevel: 0, dateModified: '2015-03-03T03:50:00.123Z', file: 'something.txt', id: 18, size: 90 },
-        { __parentId: null, __treeLevel: 0, file: 'documents', id: 21 },
-        { __parentId: 21, __treeLevel: 1, file: 'xls', id: 7 },
-        { __parentId: 7, __treeLevel: 2, dateModified: '2014-10-02T14:50:00.123Z', file: 'compilation.xls', id: 8, size: 2.3 },
-        { __parentId: 21, __treeLevel: 1, file: 'txt', id: 2 },
-        { __parentId: 2, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'todo.txt', id: 3, size: 0.7 },
-        { __parentId: 21, __treeLevel: 1, file: 'pdf', id: 4 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-01T07:50:00.123Z', file: 'phone-bill.pdf', id: 23, size: 1.4 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-21T10:22:00.123Z', file: 'map.pdf', id: 5, size: 3.1 },
-        { __parentId: 4, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'internet-bill.pdf', id: 6, size: 1.4 },
-        { __parentId: 21, __treeLevel: 1, file: 'misc', id: 9 },
-        { __parentId: 9, __treeLevel: 2, dateModified: '2015-02-26T16:50:00.123Z', file: 'todo.txt', id: 10, size: 0.4 },
-        { __parentId: null, __treeLevel: 0, dateModified: '2012-03-05T12:44:00.123Z', file: 'bucket-list.txt', id: 24, size: 0.5 },
+        { __parentId: null, __hasChildren: false, __treeLevel: 0, dateModified: '2015-03-03T03:50:00.123Z', file: 'something.txt', id: 18, size: 90 },
+        { __parentId: null, __hasChildren: true, __treeLevel: 0, file: 'documents', id: 21 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'xls', id: 7 },
+        { __parentId: 7, __hasChildren: false, __treeLevel: 2, dateModified: '2014-10-02T14:50:00.123Z', file: 'compilation.xls', id: 8, size: 2.3 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'txt', id: 2 },
+        { __parentId: 2, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'todo.txt', id: 3, size: 0.7 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'pdf', id: 4 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-01T07:50:00.123Z', file: 'phone-bill.pdf', id: 23, size: 1.4 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-21T10:22:00.123Z', file: 'map.pdf', id: 5, size: 3.1 },
+        { __parentId: 4, __hasChildren: false, __treeLevel: 2, dateModified: '2015-05-12T14:50:00.123Z', file: 'internet-bill.pdf', id: 6, size: 1.4 },
+        { __parentId: 21, __hasChildren: true, __treeLevel: 1, file: 'misc', id: 9 },
+        { __parentId: 9, __hasChildren: false, __treeLevel: 2, dateModified: '2015-02-26T16:50:00.123Z', file: 'todo.txt', id: 10, size: 0.4 },
+        { __parentId: null, __hasChildren: false, __treeLevel: 0, dateModified: '2012-03-05T12:44:00.123Z', file: 'bucket-list.txt', id: 24, size: 0.5 },
       ];
 
       beforeEach(() => {
diff --git a/packages/common/src/services/__tests__/treeData.service.spec.ts b/packages/common/src/services/__tests__/treeData.service.spec.ts
index c37141915..a5700ed64 100644
--- a/packages/common/src/services/__tests__/treeData.service.spec.ts
+++ b/packages/common/src/services/__tests__/treeData.service.spec.ts
@@ -1,3 +1,6 @@
+import 'jest-extended';
+
+import { Constants } from '../../constants';
 import { Column, SlickDataView, GridOption, SlickEventHandler, SlickGrid, SlickNamespace, BackendService } from '../../interfaces/index';
 import { PubSubService } from '../pubSub.service';
 import { SharedService } from '../shared.service';
@@ -25,7 +28,10 @@ const backendServiceStub = {
 } as unknown as BackendService;
 
 const dataViewStub = {
+  beginUpdate: jest.fn(),
+  endUpdate: jest.fn(),
   getItem: jest.fn(),
+  getItemById: jest.fn(),
   getItems: jest.fn(),
   refresh: jest.fn(),
   sort: jest.fn(),
@@ -164,6 +170,38 @@ describe('TreeData Service', () => {
     expect(service.datasetHierarchical).toEqual(mockHierarchical);
   });
 
+  describe('getTreeDataOptionPropName method', () => {
+    it('should return default constant children prop name', () => {
+      const output = service.getTreeDataOptionPropName('childrenPropName');
+      expect(output).toBe(Constants.treeDataProperties.CHILDREN_PROP);
+    });
+
+    it('should return default constant collapsed prop name', () => {
+      const output = service.getTreeDataOptionPropName('collapsedPropName');
+      expect(output).toBe(Constants.treeDataProperties.COLLAPSED_PROP);
+    });
+
+    it('should return default constant hasChildren prop name', () => {
+      const output = service.getTreeDataOptionPropName('hasChildrenPropName');
+      expect(output).toBe(Constants.treeDataProperties.HAS_CHILDREN_PROP);
+    });
+
+    it('should return default constant level prop name', () => {
+      const output = service.getTreeDataOptionPropName('levelPropName');
+      expect(output).toBe(Constants.treeDataProperties.TREE_LEVEL_PROP);
+    });
+
+    it('should return default constant parent prop name', () => {
+      const output = service.getTreeDataOptionPropName('parentPropName');
+      expect(output).toBe(Constants.treeDataProperties.PARENT_PROP);
+    });
+
+    it('should return "id" as default identifier prop name', () => {
+      const output = service.getTreeDataOptionPropName('identifierPropName');
+      expect(output).toBe('id');
+    });
+  });
+
   describe('handleOnCellClick method', () => {
     let div;
     let mockColumn;
@@ -173,8 +211,12 @@ describe('TreeData Service', () => {
       div = document.createElement('div');
       div.innerHTML = `<div class="slick-cell">Text</div>`;
       document.body.appendChild(div);
-      mockColumn = { id: 'firstName', field: 'firstName', onCellClick: jest.fn() } as Column;
-      mockRowData = { id: 123, firstName: 'John', lastName: 'Doe' };
+      mockColumn = { id: 'file', field: 'file', onCellClick: jest.fn() } as Column;
+      mockRowData = { id: 123, file: 'myFile.txt', size: 0.5, };
+    });
+
+    afterEach(() => {
+      jest.clearAllMocks();
     });
 
     it('should not do anything when "cell" property is missing', () => {
@@ -220,7 +262,35 @@ describe('TreeData Service', () => {
 
       expect(spyGetItem).toHaveBeenCalled();
       expect(spyInvalidate).toHaveBeenCalled();
+      expect(service.getToggledItems().length).toBe(1);
+      expect(service.getCurrentToggleState()).toEqual({ type: 'toggle-expand', previousFullToggleType: 'full-expand', toggledItems: [{ isCollapsed: false, itemId: 123 }] });
+      expect(spyUptItem).toHaveBeenCalledWith(123, { ...mockRowData, __collapsed: false });
+    });
+
+    it('should toggle 2x times the "__collapsed" to False when the class name was found to be True prior', () => {
+      mockRowData.__collapsed = true;
+      jest.spyOn(gridStub, 'getData').mockReturnValue(dataViewStub);
+      const spyGetItem = jest.spyOn(dataViewStub, 'getItem').mockReturnValue(mockRowData);
+      jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'get').mockReturnValue([mockRowData]);
+      const spyUptItem = jest.spyOn(dataViewStub, 'updateItem');
+      const spyInvalidate = jest.spyOn(gridStub, 'invalidate');
+
+      service.init(gridStub);
+      const eventData = new Slick.EventData();
+      div.className = 'toggle';
+      Object.defineProperty(eventData, 'target', { writable: true, value: div });
+      service.currentToggledItems = [{ itemId: 123, isCollapsed: true }];
+
+      gridStub.onClick.notify({ cell: 0, row: 0, grid: gridStub }, eventData, gridStub);
+
+      expect(service.getToggledItems().length).toBe(1);
+      expect(spyGetItem).toHaveBeenCalled();
+      expect(spyInvalidate).toHaveBeenCalled();
+      expect(service.getCurrentToggleState()).toEqual({ type: 'toggle-expand', previousFullToggleType: 'full-expand', toggledItems: [{ isCollapsed: false, itemId: 123 }] });
       expect(spyUptItem).toHaveBeenCalledWith(123, { ...mockRowData, __collapsed: false });
+      expect(service.getToggledItems()).toEqual([{ itemId: 123, isCollapsed: false }]);
+      expect(SharedService.prototype.hierarchicalDataset[0].file).toBe('myFile.txt');
+      expect(SharedService.prototype.hierarchicalDataset[0].__collapsed).toBeFalse();
     });
 
     it('should toggle the collapsed custom class name to False when that custom class name was found to be True prior', () => {
@@ -238,148 +308,192 @@ describe('TreeData Service', () => {
 
       expect(spyGetItem).toHaveBeenCalled();
       expect(spyInvalidate).toHaveBeenCalled();
+      expect(service.getToggledItems().length).toBe(1);
+      expect(service.getCurrentToggleState()).toEqual({ type: 'toggle-expand', previousFullToggleType: 'full-expand', toggledItems: [{ isCollapsed: false, itemId: 123 }] });
       expect(spyUptItem).toHaveBeenCalledWith(123, { ...mockRowData, customCollapsed: false });
     });
+  });
 
-    describe('toggleTreeDataCollapse method', () => {
-      let itemsMock;
+  describe('toggleTreeDataCollapse method', () => {
+    let mockFlatDataset: any[];
+    let mockHierarchical: any[];
 
-      beforeEach(() => {
-        itemsMock = [{ file: 'myFile.txt', size: 0.5 }, { file: 'myMusic.txt', size: 5.3 }];
-        gridOptionsMock.treeDataOptions = { columnId: 'file' };
-        jest.clearAllMocks();
-      });
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockFlatDataset = [
+        { id: 0, file: 'TXT', size: 5.8, __hasChildren: true },
+        { id: 1, file: 'myFile.txt', size: 0.5 },
+        { id: 2, file: 'myMusic.txt', size: 5.3 },
+        { id: 4, file: 'MP3', size: 3.4, __hasChildren: true },
+        { id: 5, file: 'relaxation.mp3', size: 3.4 }
+      ];
+      mockHierarchical = [
+        { id: 0, file: 'TXT', files: [{ id: 1, file: 'myFile.txt', size: 0.5, }, { id: 2, file: 'myMusic.txt', size: 5.3, }] },
+        { id: 4, file: 'MP3', files: [{ id: 5, file: 'relaxation.mp3', size: 3.4, }] }
+      ];
+      gridOptionsMock.treeDataOptions = { columnId: 'file' };
+    });
 
-      it('should collapse all items when calling the method with collapsing True', async () => {
-        const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(itemsMock);
-        const dataSetItemsSpy = jest.spyOn(dataViewStub, 'setItems');
-        const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+    it('should collapse all items when calling the method with collapsing True', async () => {
+      const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
+      jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'get').mockReturnValue(mockHierarchical);
+      const beginUpdateSpy = jest.spyOn(dataViewStub, 'beginUpdate');
+      const endUpdateSpy = jest.spyOn(dataViewStub, 'endUpdate');
+      const updateItemSpy = jest.spyOn(dataViewStub, 'updateItem');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        service.init(gridStub);
-        await service.toggleTreeDataCollapse(true);
+      service.init(gridStub);
+      await service.toggleTreeDataCollapse(true);
+
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleStart`, { collapsing: true });
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleEnd`, { type: 'full-collapse', previousFullToggleType: 'full-collapse', toggledItems: null, });
+      expect(dataGetItemsSpy).toHaveBeenCalled();
+      expect(beginUpdateSpy).toHaveBeenCalled();
+      expect(updateItemSpy).toHaveBeenNthCalledWith(1, 0, { __collapsed: true, __hasChildren: true, id: 0, file: 'TXT', size: 5.8 });
+      expect(updateItemSpy).toHaveBeenNthCalledWith(2, 4, { __collapsed: true, __hasChildren: true, id: 4, file: 'MP3', size: 3.4 });
+      expect(SharedService.prototype.hierarchicalDataset[0].file).toBe('TXT');
+      expect(SharedService.prototype.hierarchicalDataset[0].__collapsed).toBeTrue();
+      expect(SharedService.prototype.hierarchicalDataset[1].file).toBe('MP3');
+      expect(SharedService.prototype.hierarchicalDataset[1].__collapsed).toBeTrue();
+      expect(endUpdateSpy).toHaveBeenCalled();
+    });
 
-        expect(pubSubSpy).toHaveBeenCalledWith(`onBeforeToggleTreeCollapse`, { collapsing: true });
-        expect(pubSubSpy).toHaveBeenCalledWith(`onTreeToggleAllRequested`, { collapsing: true });
-        expect(dataGetItemsSpy).toHaveBeenCalled();
-        expect(dataSetItemsSpy).toHaveBeenCalledWith([
-          { __collapsed: true, file: 'myFile.txt', size: 0.5, },
-          { __collapsed: true, file: 'myMusic.txt', size: 5.3, },
-        ]);
-      });
+    it('should collapse all items with a custom collapsed property when calling the method with collapsing True', async () => {
+      gridOptionsMock.treeDataOptions!.collapsedPropName = 'customCollapsed';
+      const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
+      const beginUpdateSpy = jest.spyOn(dataViewStub, 'beginUpdate');
+      const endUpdateSpy = jest.spyOn(dataViewStub, 'endUpdate');
+      const updateItemSpy = jest.spyOn(dataViewStub, 'updateItem');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-      it('should collapse all items with a custom collapsed property when calling the method with collapsing True', async () => {
-        gridOptionsMock.treeDataOptions!.collapsedPropName = 'customCollapsed';
-        const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(itemsMock);
-        const dataSetItemsSpy = jest.spyOn(dataViewStub, 'setItems');
-        const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+      service.init(gridStub);
+      await service.toggleTreeDataCollapse(true);
+
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleStart`, { collapsing: true });
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleEnd`, { type: 'full-collapse', previousFullToggleType: 'full-collapse', toggledItems: null, });
+      expect(dataGetItemsSpy).toHaveBeenCalled();
+      expect(dataGetItemsSpy).toHaveBeenCalled();
+      expect(beginUpdateSpy).toHaveBeenCalled();
+      expect(updateItemSpy).toHaveBeenNthCalledWith(1, 0, { customCollapsed: true, __hasChildren: true, id: 0, file: 'TXT', size: 5.8 });
+      expect(updateItemSpy).toHaveBeenNthCalledWith(2, 4, { customCollapsed: true, __hasChildren: true, id: 4, file: 'MP3', size: 3.4 });
+      expect(endUpdateSpy).toHaveBeenCalled();
+    });
 
-        service.init(gridStub);
-        await service.toggleTreeDataCollapse(true);
+    it('should expand all items when calling the method with collapsing False', async () => {
+      const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
+      const beginUpdateSpy = jest.spyOn(dataViewStub, 'beginUpdate');
+      const endUpdateSpy = jest.spyOn(dataViewStub, 'endUpdate');
+      const updateItemSpy = jest.spyOn(dataViewStub, 'updateItem');
+      const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
 
-        expect(pubSubSpy).toHaveBeenCalledWith(`onBeforeToggleTreeCollapse`, { collapsing: true });
-        expect(pubSubSpy).toHaveBeenCalledWith(`onTreeToggleAllRequested`, { collapsing: true });
-        expect(dataGetItemsSpy).toHaveBeenCalled();
-        expect(dataSetItemsSpy).toHaveBeenCalledWith([
-          { customCollapsed: true, file: 'myFile.txt', size: 0.5, },
-          { customCollapsed: true, file: 'myMusic.txt', size: 5.3, },
-        ]);
-      });
+      service.init(gridStub);
+      await service.toggleTreeDataCollapse(false);
+
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleStart`, { collapsing: false });
+      expect(pubSubSpy).toHaveBeenCalledWith(`onTreeFullToggleEnd`, { type: 'full-expand', previousFullToggleType: 'full-expand', toggledItems: null, });
+      expect(dataGetItemsSpy).toHaveBeenCalled();
+      expect(beginUpdateSpy).toHaveBeenCalled();
+      expect(updateItemSpy).toHaveBeenNthCalledWith(1, 0, { __collapsed: false, __hasChildren: true, id: 0, file: 'TXT', size: 5.8 });
+      expect(updateItemSpy).toHaveBeenNthCalledWith(2, 4, { __collapsed: false, __hasChildren: true, id: 4, file: 'MP3', size: 3.4 });
+      expect(endUpdateSpy).toHaveBeenCalled();
+    });
 
-      it('should expand all items when calling the method with collapsing False', async () => {
-        const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(itemsMock);
-        const dataSetItemsSpy = jest.spyOn(dataViewStub, 'setItems');
-        const pubSubSpy = jest.spyOn(pubSubServiceStub, 'publish');
+    describe('applyToggledItemStateChanges method', () => {
+      it('should execute the method', () => {
+        const dataGetItemsSpy = jest.spyOn(dataViewStub, 'getItems').mockReturnValue(mockFlatDataset);
+        jest.spyOn(dataViewStub, 'getItemById').mockReturnValue(mockFlatDataset[3]);
+        jest.spyOn(SharedService.prototype, 'hierarchicalDataset', 'get').mockReturnValue(mockHierarchical);
+        const beginUpdateSpy = jest.spyOn(dataViewStub, 'beginUpdate');
+        const endUpdateSpy = jest.spyOn(dataViewStub, 'endUpdate');
+        const updateItemSpy = jest.spyOn(dataViewStub, 'updateItem');
 
         service.init(gridStub);
-        await service.toggleTreeDataCollapse(false);
+        service.applyToggledItemStateChanges([{ itemId: 4, isCollapsed: true }]);
 
-        expect(pubSubSpy).toHaveBeenCalledWith(`onBeforeToggleTreeCollapse`, { collapsing: false });
-        expect(pubSubSpy).toHaveBeenCalledWith(`onTreeToggleAllRequested`, { collapsing: false });
         expect(dataGetItemsSpy).toHaveBeenCalled();
-        expect(dataSetItemsSpy).toHaveBeenCalledWith([
-          { __collapsed: false, file: 'myFile.txt', size: 0.5, },
-          { __collapsed: false, file: 'myMusic.txt', size: 5.3, },
-        ]);
+        expect(beginUpdateSpy).toHaveBeenCalled();
+        expect(updateItemSpy).toHaveBeenNthCalledWith(1, 4, { __collapsed: true, __hasChildren: true, id: 4, file: 'MP3', size: 3.4 });
+        expect(endUpdateSpy).toHaveBeenCalled();
       });
     });
+  });
 
-    describe('convertFlatParentChildToTreeDatasetAndSort method', () => {
-      let mockColumns: Column[];
-      let mockFlatDataset;
+  describe('convertFlatParentChildToTreeDatasetAndSort method', () => {
+    let mockColumns: Column[];
+    let mockFlatDataset;
 
-      beforeEach(() => {
-        mockColumns = [{ id: 'file', field: 'file', }, { id: 'size', field: 'size', }] as Column[];
-        mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', size: 1.2, parentId: 0 }, { id: 2, file: 'todo.txt', size: 2.3, parentId: 0 }];
-        gridOptionsMock.treeDataOptions = { columnId: 'file', parentPropName: 'parentId' };
-        jest.clearAllMocks();
-      });
+    beforeEach(() => {
+      mockColumns = [{ id: 'file', field: 'file', }, { id: 'size', field: 'size', }] as Column[];
+      mockFlatDataset = [{ id: 0, file: 'documents' }, { id: 1, file: 'vacation.txt', size: 1.2, parentId: 0 }, { id: 2, file: 'todo.txt', size: 2.3, parentId: 0 }];
+      gridOptionsMock.treeDataOptions = { columnId: 'file', parentPropName: 'parentId' };
+      jest.clearAllMocks();
+    });
 
-      it('should sort by the Tree column when there is no initial sort provided', () => {
-        const mockHierarchical = [{
-          id: 0,
-          file: 'documents',
-          files: [{ id: 2, file: 'todo.txt', size: 2.3, }, { id: 1, file: 'vacation.txt', size: 1.2, }]
-        }];
-        const setSortSpy = jest.spyOn(gridStub, 'setSortColumns');
-        jest.spyOn(gridStub, 'getColumnIndex').mockReturnValue(0);
-        jest.spyOn(sortServiceStub, 'sortHierarchicalDataset').mockReturnValue({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
+    it('should sort by the Tree column when there is no initial sort provided', () => {
+      const mockHierarchical = [{
+        id: 0,
+        file: 'documents',
+        files: [{ id: 2, file: 'todo.txt', size: 2.3, }, { id: 1, file: 'vacation.txt', size: 1.2, }]
+      }];
+      const setSortSpy = jest.spyOn(gridStub, 'setSortColumns');
+      jest.spyOn(gridStub, 'getColumnIndex').mockReturnValue(0);
+      jest.spyOn(sortServiceStub, 'sortHierarchicalDataset').mockReturnValue({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
 
-        service.init(gridStub);
-        const result = service.convertFlatParentChildToTreeDatasetAndSort(mockFlatDataset, mockColumns, gridOptionsMock);
-
-        expect(setSortSpy).toHaveBeenCalledWith([{
-          columnId: 'file',
-          sortAsc: true,
-          sortCol: mockColumns[0]
-        }]);
-        expect(result).toEqual({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
-      });
+      service.init(gridStub);
+      const result = service.convertFlatParentChildToTreeDatasetAndSort(mockFlatDataset, mockColumns, gridOptionsMock);
+
+      expect(setSortSpy).toHaveBeenCalledWith([{
+        columnId: 'file',
+        sortAsc: true,
+        sortCol: mockColumns[0]
+      }]);
+      expect(result).toEqual({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
+    });
 
-      it('should sort by the Tree column by the "initialSort" provided', () => {
-        gridOptionsMock.treeDataOptions.initialSort = {
-          columnId: 'size',
-          direction: 'desc'
-        };
-        const mockHierarchical = [{
-          id: 0,
-          file: 'documents',
-          files: [{ id: 1, file: 'vacation.txt', size: 1.2, }, { id: 2, file: 'todo.txt', size: 2.3, }]
-        }];
-        const setSortSpy = jest.spyOn(gridStub, 'setSortColumns');
-        jest.spyOn(gridStub, 'getColumnIndex').mockReturnValue(0);
-        jest.spyOn(sortServiceStub, 'sortHierarchicalDataset').mockReturnValue({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
+    it('should sort by the Tree column by the "initialSort" provided', () => {
+      gridOptionsMock.treeDataOptions.initialSort = {
+        columnId: 'size',
+        direction: 'desc'
+      };
+      const mockHierarchical = [{
+        id: 0,
+        file: 'documents',
+        files: [{ id: 1, file: 'vacation.txt', size: 1.2, }, { id: 2, file: 'todo.txt', size: 2.3, }]
+      }];
+      const setSortSpy = jest.spyOn(gridStub, 'setSortColumns');
+      jest.spyOn(gridStub, 'getColumnIndex').mockReturnValue(0);
+      jest.spyOn(sortServiceStub, 'sortHierarchicalDataset').mockReturnValue({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
 
-        service.init(gridStub);
-        const result = service.convertFlatParentChildToTreeDatasetAndSort(mockFlatDataset, mockColumns, gridOptionsMock);
-
-        expect(setSortSpy).toHaveBeenCalledWith([{
-          columnId: 'size',
-          sortAsc: false,
-          sortCol: mockColumns[1]
-        }]);
-        expect(result).toEqual({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
-      });
+      service.init(gridStub);
+      const result = service.convertFlatParentChildToTreeDatasetAndSort(mockFlatDataset, mockColumns, gridOptionsMock);
+
+      expect(setSortSpy).toHaveBeenCalledWith([{
+        columnId: 'size',
+        sortAsc: false,
+        sortCol: mockColumns[1]
+      }]);
+      expect(result).toEqual({ flat: mockFlatDataset as any[], hierarchical: mockHierarchical as any[] });
     });
+  });
 
-    describe('sortHierarchicalDataset method', () => {
-      it('should call sortHierarchicalDataset from the sort service', () => {
-        const mockColumns = [{ id: 'file', field: 'file', }, { id: 'size', field: 'size', }] as Column[];
-        const mockHierarchical = [{
-          id: 0,
-          file: 'documents',
-          files: [{ id: 2, file: 'todo.txt', size: 2.3, }, { id: 1, file: 'vacation.txt', size: 1.2, }]
-        }];
-        const mockColumnSort = { columnId: 'size', sortAsc: true, sortCol: mockColumns[1], }
-        jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(mockColumns);
-        const getInitialSpy = jest.spyOn(service, 'getInitialSort').mockReturnValue(mockColumnSort);
-        const sortHierarchySpy = jest.spyOn(sortServiceStub, 'sortHierarchicalDataset');
+  describe('sortHierarchicalDataset method', () => {
+    it('should call sortHierarchicalDataset from the sort service', () => {
+      const mockColumns = [{ id: 'file', field: 'file', }, { id: 'size', field: 'size', }] as Column[];
+      const mockHierarchical = [{
+        id: 0,
+        file: 'documents',
+        files: [{ id: 2, file: 'todo.txt', size: 2.3, }, { id: 1, file: 'vacation.txt', size: 1.2, }]
+      }];
+      const mockColumnSort = { columnId: 'size', sortAsc: true, sortCol: mockColumns[1], }
+      jest.spyOn(SharedService.prototype, 'allColumns', 'get').mockReturnValue(mockColumns);
+      const getInitialSpy = jest.spyOn(service, 'getInitialSort').mockReturnValue(mockColumnSort);
+      const sortHierarchySpy = jest.spyOn(sortServiceStub, 'sortHierarchicalDataset');
 
-        service.init(gridStub);
-        service.sortHierarchicalDataset(mockHierarchical);
+      service.init(gridStub);
+      service.sortHierarchicalDataset(mockHierarchical);
 
-        expect(getInitialSpy).toHaveBeenCalledWith(mockColumns, gridOptionsMock);
-        expect(sortHierarchySpy).toHaveBeenCalledWith(mockHierarchical, [mockColumnSort]);
-      });
+      expect(getInitialSpy).toHaveBeenCalledWith(mockColumns, gridOptionsMock);
+      expect(sortHierarchySpy).toHaveBeenCalledWith(mockHierarchical, [mockColumnSort]);
     });
   });
 });
diff --git a/packages/common/src/services/__tests__/utilities.spec.ts b/packages/common/src/services/__tests__/utilities.spec.ts
index 1c6e03e92..aa71c3e23 100644
--- a/packages/common/src/services/__tests__/utilities.spec.ts
+++ b/packages/common/src/services/__tests__/utilities.spec.ts
@@ -171,10 +171,10 @@ describe('Service/Utilies', () => {
 
       expect(output).toEqual([
         {
-          id: 11, __treeLevel: 0, parentId: null, file: 'Music', files: [{
-            id: 12, __treeLevel: 1, parentId: 11, file: 'mp3', files: [
-              { id: 14, __treeLevel: 2, parentId: 12, file: 'pop', files: [{ id: 15, __treeLevel: 3, parentId: 14, file: 'theme.mp3', dateModified: '2015-03-01', size: 85, }] },
-              { id: 16, __treeLevel: 2, parentId: 12, file: 'rock', files: [{ id: 17, __treeLevel: 3, parentId: 16, file: 'soft.mp3', dateModified: '2015-05-13', size: 98, }] },
+          id: 11, __treeLevel: 0, __collapsed: false, parentId: null, file: 'Music', files: [{
+            id: 12, __treeLevel: 1, __collapsed: false, parentId: 11, file: 'mp3', files: [
+              { id: 14, __treeLevel: 2, __collapsed: false, parentId: 12, file: 'pop', files: [{ id: 15, __treeLevel: 3, parentId: 14, file: 'theme.mp3', dateModified: '2015-03-01', size: 85, }] },
+              { id: 16, __treeLevel: 2, __collapsed: false, parentId: 12, file: 'rock', files: [{ id: 17, __treeLevel: 3, parentId: 16, file: 'soft.mp3', dateModified: '2015-05-13', size: 98, }] },
             ]
           }]
         },
@@ -230,13 +230,13 @@ describe('Service/Utilies', () => {
       addTreeLevelByMutation(mockTreeArray, { childrenPropName: 'files', levelPropName: '__treeLevel' });
       const output = flattenToParentChildArray(mockTreeArray, { childrenPropName: 'files' });
       expect(output).toEqual([
-        { id: 18, size: 90, __treeLevel: 0, dateModified: '2015-03-03', file: 'something.txt', __parentId: null, },
-        { id: 11, __treeLevel: 0, file: 'Music', __parentId: null, },
-        { id: 12, __treeLevel: 1, file: 'mp3', __parentId: 11, },
-        { id: 16, __treeLevel: 2, file: 'rock', __parentId: 12, },
-        { id: 17, __treeLevel: 3, dateModified: '2015-05-13', file: 'soft.mp3', size: 98, __parentId: 16, },
-        { id: 14, __treeLevel: 2, file: 'pop', __parentId: 12, },
-        { id: 15, __treeLevel: 3, dateModified: '2015-03-01', file: 'theme.mp3', size: 85, __parentId: 14, },
+        { id: 18, size: 90, __treeLevel: 0, dateModified: '2015-03-03', file: 'something.txt', __parentId: null, __hasChildren: false },
+        { id: 11, __treeLevel: 0, file: 'Music', __parentId: null, __hasChildren: true },
+        { id: 12, __treeLevel: 1, file: 'mp3', __parentId: 11, __hasChildren: true },
+        { id: 16, __treeLevel: 2, file: 'rock', __parentId: 12, __hasChildren: true },
+        { id: 17, __treeLevel: 3, dateModified: '2015-05-13', file: 'soft.mp3', size: 98, __parentId: 16, __hasChildren: false },
+        { id: 14, __treeLevel: 2, file: 'pop', __parentId: 12, __hasChildren: true },
+        { id: 15, __treeLevel: 3, dateModified: '2015-03-01', file: 'theme.mp3', size: 85, __parentId: 14, __hasChildren: false },
       ]);
     });
   });
diff --git a/packages/common/src/services/filter.service.ts b/packages/common/src/services/filter.service.ts
index 17ef54a66..b1776c598 100644
--- a/packages/common/src/services/filter.service.ts
+++ b/packages/common/src/services/filter.service.ts
@@ -34,6 +34,7 @@ import { deepCopy, getDescendantProperty, mapOperatorByFieldType } from './utili
 import { PubSubService } from '../services/pubSub.service';
 import { SharedService } from './shared.service';
 import { RxJsFacade, Subject } from './rxjsFacade';
+import { Constants } from '../constants';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
@@ -57,6 +58,7 @@ export class FilterService {
   protected _filtersMetadata: Array<Filter> = [];
   protected _columnFilters: ColumnFilters = {};
   protected _grid!: SlickGrid;
+  protected _isTreePresetExecuted = false;
   protected _onSearchChange: SlickEvent<OnSearchChangeEvent> | null;
   protected _tmpPreFilteredData?: number[];
   protected httpCancelRequests$?: Subject<void>; // this will be used to cancel any pending http request
@@ -86,17 +88,17 @@ export class FilterService {
 
   /** Getter for the Grid Options pulled through the Grid Object */
   protected get _gridOptions(): GridOption {
-    return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
+    return this._grid?.getOptions?.() ?? {};
   }
 
   /** Getter for the Column Definitions pulled through the Grid Object */
   protected get _columnDefinitions(): Column[] {
-    return (this._grid && this._grid.getColumns) ? this._grid.getColumns() : [];
+    return this._grid?.getColumns?.() ?? [];
   }
 
   /** Getter of SlickGrid DataView object */
   protected get _dataView(): SlickDataView {
-    return (this._grid?.getData && this._grid.getData()) as SlickDataView;
+    return this._grid?.getData?.() ?? {} as SlickDataView;
   }
 
   addRxJsResource(rxjs: RxJsFacade) {
@@ -323,8 +325,8 @@ export class FilterService {
     // so we always run this check even when there are no filter search, the reason is because the user might click on the expand/collapse
     if (isGridWithTreeData && this._gridOptions && this._gridOptions.treeDataOptions) {
       treeDataOptions = this._gridOptions.treeDataOptions;
-      const collapsedPropName = treeDataOptions.collapsedPropName ?? '__collapsed';
-      const parentPropName = treeDataOptions.parentPropName ?? '__parentId';
+      const collapsedPropName = treeDataOptions.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
+      const parentPropName = treeDataOptions.parentPropName ?? Constants.treeDataProperties.PARENT_PROP;
       const dataViewIdIdentifier = this._gridOptions.datasetIdPropertyName ?? 'id';
 
       if (item[parentPropName] !== null) {
@@ -520,10 +522,10 @@ export class FilterService {
    */
   preFilterTreeData(inputItems: any[], columnFilters: ColumnFilters) {
     const treeDataOptions = this._gridOptions?.treeDataOptions;
-    const collapsedPropName = treeDataOptions?.collapsedPropName ?? '__collapsed';
-    const parentPropName = treeDataOptions?.parentPropName ?? '__parentId';
+    const collapsedPropName = treeDataOptions?.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
+    const parentPropName = treeDataOptions?.parentPropName ?? Constants.treeDataProperties.PARENT_PROP;
     const dataViewIdIdentifier = this._gridOptions?.datasetIdPropertyName ?? 'id';
-    const treeCollapsedParents = this._gridOptions.presets?.treeCollapsedParents;
+    const treeDataToggledItems = this._gridOptions.presets?.treeData?.toggledItems;
 
     const treeObj = {};
     const filteredChildrenAndParents: any[] = [];
@@ -582,26 +584,25 @@ export class FilterService {
           const len = filteredChildrenAndParents.length;
           // add child (id):
           filteredChildrenAndParents.splice(len, 0, item[dataViewIdIdentifier]);
-          let parent = (treeObj as any)[item[parentPropName]] || false;
+          let parent = (treeObj as any)[item[parentPropName]] ?? false;
+
+          // if there are any presets of collapsed parents, let's processed them
+          if (!this._isTreePresetExecuted && Array.isArray(treeDataToggledItems) && treeDataToggledItems.some(collapsedItem => collapsedItem.itemId === parent.id && collapsedItem.isCollapsed)) {
+            parent[collapsedPropName] = true;
+          }
+
           while (parent) {
             // only add parent (id) if not already added:
-            parent.__used || filteredChildrenAndParents.splice(len, 0, parent[dataViewIdIdentifier]);
+            parent.__used ?? filteredChildrenAndParents.splice(len, 0, parent[dataViewIdIdentifier]);
             // mark each parent as used to not use them again later:
             (treeObj as any)[parent[dataViewIdIdentifier]].__used = true;
             // try to find parent of the current parent, if exists:
-            parent = (treeObj as any)[parent[parentPropName]] || false;
-
-            // if there are any presets of collapsed parents, let's processed them
-            if (Array.isArray(treeCollapsedParents)) {
-              if (treeCollapsedParents.some(collapsedItem => collapsedItem.parentId === parent.id && collapsedItem.isCollapsed)) {
-                parent[collapsedPropName] = true;
-              }
-            }
+            parent = (treeObj as any)[parent[parentPropName]] ?? false;
           }
         }
-
       }
     }
+    this._isTreePresetExecuted = true;
 
     return filteredChildrenAndParents;
   }
@@ -726,10 +727,17 @@ export class FilterService {
    * @param {Array<Object>} [items] - optional flat array of parent/child items to use while redoing the full sort & refresh
    */
   refreshTreeDataFilters(items?: any[]) {
-    const inputItems = items ?? this._dataView.getItems();
-    if (this._dataView && this._gridOptions?.enableTreeData) {
+    const inputItems = items ?? this._dataView.getItems() ?? [];
+
+    if (this._dataView && this._gridOptions?.enableTreeData && inputItems.length > 0) {
       this._tmpPreFilteredData = this.preFilterTreeData(inputItems, this._columnFilters);
       this._dataView.refresh(); // and finally this refresh() is what triggers a DataView filtering check
+    } else if (inputItems.length === 0 && Array.isArray(this.sharedService.hierarchicalDataset) && this.sharedService.hierarchicalDataset.length > 0) {
+      // in some occasion, we might be dealing with a dataset that is hierarchical from the start (the source dataset is already a tree structure)
+      // and we did not have time to convert it to a flat dataset yet (for SlickGrid to use),
+      // we would end up calling the pre-filter too early because these pre-filter works only a flat dataset
+      // for that use case (like Example 6), we need to delay for at least a cycle the pre-filtering (so we can simply recall the same method after a delay of 0 which equal to 1 CPU cycle)
+      setTimeout(() => this.refreshTreeDataFilters());
     }
   }
 
diff --git a/packages/common/src/services/grid.service.ts b/packages/common/src/services/grid.service.ts
index 8bd05daa1..ddc0e71db 100644
--- a/packages/common/src/services/grid.service.ts
+++ b/packages/common/src/services/grid.service.ts
@@ -889,7 +889,7 @@ export class GridService {
     // if we add/remove item(s) from the dataset, we need to also refresh our tree data filters
     if (this._gridOptions?.enableTreeData && this.treeDataService) {
       const inputItems = items ?? this._dataView.getItems();
-      const sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(inputItems, this.sharedService.allColumns, this._gridOptions);
+      const sortedDatasetResult = this.treeDataService.convertFlatParentChildToTreeDatasetAndSort(inputItems || [], this.sharedService.allColumns, this._gridOptions);
       this.sharedService.hierarchicalDataset = sortedDatasetResult.hierarchical;
       this.filterService.refreshTreeDataFilters(items);
       this._dataView.setItems(sortedDatasetResult.flat);
diff --git a/packages/common/src/services/gridState.service.ts b/packages/common/src/services/gridState.service.ts
index 48bf95837..04f028257 100644
--- a/packages/common/src/services/gridState.service.ts
+++ b/packages/common/src/services/gridState.service.ts
@@ -19,12 +19,14 @@ import {
   SlickEventHandler,
   SlickGrid,
   SlickNamespace,
+  TreeToggleStateChange,
 } from '../interfaces/index';
 import { ExtensionService } from './extension.service';
 import { FilterService } from './filter.service';
+import { PubSubService } from './pubSub.service';
 import { SharedService } from './shared.service';
 import { SortService } from './sort.service';
-import { PubSubService } from './pubSub.service';
+import { TreeDataService } from './treeData.service';
 
 // using external non-typed js libraries
 declare const Slick: SlickNamespace;
@@ -40,21 +42,22 @@ export class GridStateService {
   private _wasRecheckedAfterPageChange = true; // used with row selection & pagination
 
   constructor(
-    private extensionService: ExtensionService,
-    private filterService: FilterService,
-    private pubSubService: PubSubService,
-    private sharedService: SharedService,
-    private sortService: SortService
+    private readonly extensionService: ExtensionService,
+    private readonly filterService: FilterService,
+    private readonly pubSubService: PubSubService,
+    private readonly sharedService: SharedService,
+    private readonly sortService: SortService,
+    private readonly treeDataService: TreeDataService,
   ) { }
 
   /** Getter of SlickGrid DataView object */
   get _dataView(): SlickDataView {
-    return (this._grid?.getData && this._grid.getData()) as SlickDataView;
+    return this._grid?.getData?.() ?? {} as SlickDataView;
   }
 
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
-    return (this._grid?.getOptions) ? this._grid.getOptions() : {};
+    return this._grid?.getOptions?.() ?? {};
   }
 
   private get datasetIdPropName(): string {
@@ -149,11 +152,13 @@ export class GridStateService {
       pinning: { frozenColumn, frozenRow, frozenBottom },
     };
 
+    // optional Pagination
     const currentPagination = this.getCurrentPagination();
     if (currentPagination) {
       gridState.pagination = currentPagination;
     }
 
+    // optional Row Selection
     if (this.hasRowSelectionEnabled()) {
       const currentRowSelection = this.getCurrentRowSelections(args?.requestRefreshRowFilteredRow);
       if (currentRowSelection) {
@@ -161,6 +166,14 @@ export class GridStateService {
       }
     }
 
+    // optional Tree Data toggle items
+    if (this._gridOptions?.enableTreeData) {
+      const treeDataTreeToggleState = this.getCurrentTreeDataToggleState();
+      if (treeDataTreeToggleState) {
+        gridState.treeData = treeDataTreeToggleState;
+      }
+    }
+
     return gridState;
   }
 
@@ -241,7 +254,7 @@ export class GridStateService {
    * @return current filters
    */
   getCurrentFilters(): CurrentFilter[] | null {
-    if (this._gridOptions && this._gridOptions.backendServiceApi) {
+    if (this._gridOptions?.backendServiceApi) {
       const backendService = this._gridOptions.backendServiceApi.service;
       if (backendService?.getCurrentFilters) {
         return backendService.getCurrentFilters() as CurrentFilter[];
@@ -309,6 +322,17 @@ export class GridStateService {
     return null;
   }
 
+  /**
+   * Get the current list of Tree Data item(s) that got toggled in the grid
+   * @returns {Array<TreeToggledItem>} treeDataToggledItems - items that were toggled (array of `parentId` and `isCollapsed` flag)
+   */
+  getCurrentTreeDataToggleState(): Omit<TreeToggleStateChange, 'fromItemId'> | null {
+    if (this._gridOptions?.enableTreeData && this.treeDataService) {
+      return this.treeDataService.getCurrentToggleState();
+    }
+    return null;
+  }
+
   /** Check whether the row selection needs to be preserved */
   needToPreserveRowSelection(): boolean {
     let preservedRowSelection = false;
@@ -421,6 +445,20 @@ export class GridStateService {
         this.pubSubService.publish('onGridStateChanged', { change: { newValues: currentColumns, type: GridStateType.columns }, gridState: this.getCurrentGridState() });
       })
     );
+
+    // subscribe to Tree Data toggle items changes
+    this._subscriptions.push(
+      this.pubSubService.subscribe('onTreeItemToggled', (toggleChange: TreeToggleStateChange) => {
+        this.pubSubService.publish('onGridStateChanged', { change: { newValues: toggleChange, type: GridStateType.treeData }, gridState: this.getCurrentGridState() });
+      })
+    );
+
+    // subscribe to Tree Data full tree toggle changes
+    this._subscriptions.push(
+      this.pubSubService.subscribe('onTreeFullToggleEnd', (toggleChange: TreeToggleStateChange) => {
+        this.pubSubService.publish('onGridStateChanged', { change: { newValues: toggleChange, type: GridStateType.treeData }, gridState: this.getCurrentGridState() });
+      })
+    );
   }
 
   // --
diff --git a/packages/common/src/services/sort.service.ts b/packages/common/src/services/sort.service.ts
index fb7c9b9dd..3ecefe987 100644
--- a/packages/common/src/services/sort.service.ts
+++ b/packages/common/src/services/sort.service.ts
@@ -386,8 +386,7 @@ export class SortService {
       }
 
       if (isTreeDataEnabled && this.sharedService && Array.isArray(this.sharedService.hierarchicalDataset)) {
-        const hierarchicalDataset = this.sharedService.hierarchicalDataset;
-        const datasetSortResult = this.sortHierarchicalDataset(hierarchicalDataset, sortColumns);
+        const datasetSortResult = this.sortHierarchicalDataset(this.sharedService.hierarchicalDataset, sortColumns);
 
         // we could use the DataView sort but that would require re-sorting again (since the 2nd array that is currently in the DataView would have to be resorted against the 1st array that was sorting from tree sort)
         // it is simply much faster to just replace the entire dataset
diff --git a/packages/common/src/services/treeData.service.ts b/packages/common/src/services/treeData.service.ts
index a4a9f8388..b66eb975f 100644
--- a/packages/common/src/services/treeData.service.ts
+++ b/packages/common/src/services/treeData.service.ts
@@ -1,5 +1,21 @@
-import { Column, ColumnSort, GetSlickEventType, GridOption, OnClickEventArgs, SlickDataView, SlickEventData, SlickEventHandler, SlickGrid, SlickNamespace, TreeDataOption, } from '../interfaces/index';
-import { unflattenParentChildArrayToTree } from './utilities';
+import { Constants } from '../constants';
+import { ToggleStateChangeType, ToggleStateChangeTypeString } from '../enums/index';
+import {
+  Column,
+  ColumnSort,
+  GetSlickEventType,
+  GridOption,
+  OnClickEventArgs,
+  SlickDataView,
+  SlickEventData,
+  SlickEventHandler,
+  SlickGrid,
+  SlickNamespace,
+  TreeDataOption,
+  TreeToggledItem,
+  TreeToggleStateChange,
+} from '../interfaces/index';
+import { findItemInTreeStructure, unflattenParentChildArrayToTree } from './utilities';
 import { PubSubService } from './pubSub.service';
 import { SharedService } from './shared.service';
 import { SortService } from './sort.service';
@@ -8,7 +24,13 @@ import { SortService } from './sort.service';
 declare const Slick: SlickNamespace;
 
 export class TreeDataService {
-  private _collapsedTreeItems: { parentId: number | string; isCollapsed: boolean; }[] = [];
+  private _isLastFullToggleCollapsed = this.gridOptions?.treeDataOptions?.initiallyCollapsed ?? false;
+  private _lastToggleStateChange: Omit<TreeToggleStateChange, 'fromItemId'> = {
+    type: this.gridOptions?.treeDataOptions?.initiallyCollapsed ? 'full-collapse' : 'full-expand',
+    previousFullToggleType: this.gridOptions?.treeDataOptions?.initiallyCollapsed ? 'full-collapse' : 'full-expand',
+    toggledItems: null
+  };
+  private _currentToggledItems: TreeToggledItem[] = [];
   private _grid!: SlickGrid;
   private _eventHandler: SlickEventHandler;
 
@@ -16,6 +38,9 @@ export class TreeDataService {
     this._eventHandler = new Slick.EventHandler();
   }
 
+  set currentToggledItems(newToggledItems: TreeToggledItem[]) {
+    this._currentToggledItems = newToggledItems;
+  }
   get dataset(): any[] {
     return this.dataView?.getItems();
   }
@@ -26,7 +51,7 @@ export class TreeDataService {
 
   /** Getter of SlickGrid DataView object */
   get dataView(): SlickDataView {
-    return (this._grid?.getData && this._grid.getData()) as SlickDataView;
+    return this._grid?.getData?.() ?? {} as SlickDataView;
   }
 
   /** Getter of the SlickGrid Event Handler */
@@ -35,7 +60,11 @@ export class TreeDataService {
   }
 
   get gridOptions(): GridOption {
-    return this._grid?.getOptions() || {};
+    return this._grid?.getOptions?.() ?? {};
+  }
+
+  get treeDataOptions(): TreeDataOption {
+    return this.gridOptions.treeDataOptions as TreeDataOption;
   }
 
   dispose() {
@@ -74,6 +103,50 @@ export class TreeDataService {
     }
   }
 
+  /**
+   * Apply different tree toggle state changes by providing an array of parentIds that are designated as collapsed (or not).
+   * User will have to provide an array of `parentId` and `isCollapsed` boolean and the code will only apply the ones that are tagged as collapsed, everything else will be expanded
+   * @param {Array<TreeToggledItem>} treeToggledItems - array of parentId which are tagged as changed
+   */
+  applyToggledItemStateChanges(treeToggledItems: TreeToggledItem[], previousFullToggleType?: Exclude<ToggleStateChangeType, 'toggle'> | Exclude<ToggleStateChangeTypeString, 'toggle'>) {
+    if (Array.isArray(treeToggledItems)) {
+      const collapsedPropName = this.getTreeDataOptionPropName('collapsedPropName');
+      const hasChildrenPropName = this.getTreeDataOptionPropName('hasChildrenPropName');
+
+      // for the rows we identified as collapsed, we'll send them to the DataView with the new updated collapsed flag
+      // and we'll refresh the DataView to see the collapsing applied in the grid
+      this.dataView.beginUpdate(true);
+
+      // we first need to put back the previous full toggle state (whether it was a full collapse or expand) by collapsing/expanding everything depending on the last toggled that was called `isLastFullToggleCollapsed`
+      const previousFullToggle = previousFullToggleType ?? this._lastToggleStateChange.previousFullToggleType;
+      const shouldCollapseAll = previousFullToggle === 'full-collapse';
+      (this.dataView.getItems() || []).forEach((item: any) => {
+        // collapse/expand the item but only when it's a parent item with children
+        if (item[hasChildrenPropName]) {
+          item[collapsedPropName] = shouldCollapseAll;
+        }
+      });
+
+      // then we reapply only the ones that changed (provided as argument to the function)
+      for (const collapsedItem of treeToggledItems) {
+        const item = this.dataView.getItemById(collapsedItem.itemId);
+        this.updateToggledItem(item, collapsedItem.isCollapsed);
+      }
+
+      // close the update transaction & call a refresh which will trigger a re-render with filters applied (including expand/collapse)
+      this.dataView.endUpdate();
+      this.dataView.refresh();
+    }
+  }
+
+  /**
+   * Get the current toggle state that includes the type (toggle, full-expand, full-collapse) and toggled items (only applies when it's a parent toggle)
+   * @returns {TreeToggleStateChange} treeDataToggledItems - items that were toggled (array of `parentId` and `isCollapsed` flag)
+   */
+  getCurrentToggleState(): Omit<TreeToggleStateChange, 'fromItemId'> {
+    return this._lastToggleStateChange;
+  }
+
   getInitialSort(columnDefinitions: Column[], gridOptions: GridOption): ColumnSort {
     const treeDataOptions = gridOptions?.treeDataOptions;
     const initialColumnSorting = treeDataOptions?.initialSort ?? { columnId: treeDataOptions?.columnId ?? '', direction: 'ASC' };
@@ -86,6 +159,40 @@ export class TreeDataService {
     };
   }
 
+  /**
+   * Get the current list of Tree Data item(s) that got toggled in the grid (basically the parents that the user clicked on the toggle icon to expand/collapse the child)
+   * @returns {Array<TreeToggledItem>} treeDataToggledItems - items that were toggled (array of `parentId` and `isCollapsed` flag)
+   */
+  getToggledItems(): TreeToggledItem[] {
+    return this._currentToggledItems;
+  }
+
+  /** Find the associated property name from the Tree Data option when found or return a default property name that we defined internally */
+  getTreeDataOptionPropName(optionName: keyof TreeDataOption): string {
+    let propName = '';
+    switch (optionName) {
+      case 'childrenPropName':
+        propName = this.treeDataOptions?.childrenPropName ?? Constants.treeDataProperties.CHILDREN_PROP;
+        break;
+      case 'collapsedPropName':
+        propName = this.treeDataOptions?.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
+        break;
+      case 'hasChildrenPropName':
+        propName = this.treeDataOptions?.hasChildrenPropName ?? Constants.treeDataProperties.HAS_CHILDREN_PROP;
+        break;
+      case 'identifierPropName':
+        propName = this.treeDataOptions?.identifierPropName ?? this.gridOptions?.datasetIdPropertyName ?? 'id';
+        break;
+      case 'levelPropName':
+        propName = this.treeDataOptions?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
+        break;
+      case 'parentPropName':
+        propName = this.treeDataOptions?.parentPropName ?? Constants.treeDataProperties.PARENT_PROP;
+        break;
+    }
+    return propName;
+  }
+
   /**
    * Takes a flat dataset, converts it into a hierarchical dataset, sort it by recursion and finally return back the final and sorted flat array
    * @param {Array<Object>} flatDataset - parent/child flat dataset
@@ -120,30 +227,106 @@ export class TreeDataService {
     return unflattenParentChildArrayToTree(flatDataset, treeDataOptions);
   }
 
-  handleOnCellClick(event: SlickEventData, args: OnClickEventArgs) {
+  /**
+   * Takes a hierarchical (tree) input array and sort it (if an `initialSort` exist, it will use that to sort)
+   * @param {Array<Object>} hierarchicalDataset - inpu
+   * @returns {Object} sort result object that includes both the flat & tree data arrays
+   */
+  sortHierarchicalDataset<T>(hierarchicalDataset: T[], inputColumnSorts?: ColumnSort | ColumnSort[]) {
+    const columnSorts = inputColumnSorts ?? this.getInitialSort(this.sharedService.allColumns, this.gridOptions);
+    const finalColumnSorts = Array.isArray(columnSorts) ? columnSorts : [columnSorts];
+    return this.sortService.sortHierarchicalDataset(hierarchicalDataset, finalColumnSorts);
+  }
+
+  /**
+   * Toggle the collapsed values of all parent items (the ones with children), we can optionally provide a flag to force a collapse or expand
+   * @param {Boolean} collapsing - optionally force a collapse/expand (True => collapse all, False => expand all)
+   * @param {Boolean} shouldTriggerEvent - defaults to true, should we trigger an event? For example, we could disable this to avoid a Grid State change event.
+   * @returns {Promise<void>} - returns a void Promise, the reason we use a Promise is simply to make sure that when we add a spinner, it doesn't start/stop only at the end of the process
+   */
+  async toggleTreeDataCollapse(collapsing: boolean, shouldTriggerEvent = true): Promise<void> {
+    if (this.gridOptions?.enableTreeData) {
+      const hasChildrenPropName = this.getTreeDataOptionPropName('hasChildrenPropName');
+
+      // emit an event when full toggle starts (useful to show a spinner)
+      if (shouldTriggerEvent) {
+        await this.pubSubService.publish('onTreeFullToggleStart', { collapsing });
+      }
+
+      // do a bulk change data update to toggle all necessary parents (the ones with children) to the new collapsed flag value
+      this.dataView.beginUpdate(true);
+
+      // toggle the collapsed flag but only when it's a parent item with children
+      (this.dataView.getItems() || []).forEach((item: any) => {
+        if (item[hasChildrenPropName]) {
+          this.updateToggledItem(item, collapsing);
+        }
+      });
+
+      this.dataView.endUpdate();
+      this.dataView.refresh();
+      this._isLastFullToggleCollapsed = collapsing;
+    }
+
+    const toggleType = collapsing ? ToggleStateChangeType.fullCollapse : ToggleStateChangeType.fullExpand;
+
+    this._lastToggleStateChange = {
+      type: toggleType,
+      previousFullToggleType: toggleType,
+      toggledItems: null
+    } as TreeToggleStateChange;
+
+    // emit an event when full toggle ends
+    if (shouldTriggerEvent) {
+      this.pubSubService.publish('onTreeFullToggleEnd', this._lastToggleStateChange);
+    }
+  }
+
+  // --
+  // private functions
+  // ------------------
+
+  private handleOnCellClick(event: SlickEventData, args: OnClickEventArgs) {
     if (event && args) {
       const targetElm: any = event.target || {};
-      const treeDataOptions = this.gridOptions.treeDataOptions;
-      const collapsedPropName = treeDataOptions && treeDataOptions.collapsedPropName || '__collapsed';
       const idPropName = this.gridOptions.datasetIdPropertyName ?? 'id';
+      const collapsedPropName = this.getTreeDataOptionPropName('collapsedPropName');
+      const childrenPropName = this.getTreeDataOptionPropName('childrenPropName');
 
-      if (targetElm && targetElm.className) {
+      if (targetElm?.className) {
         const hasToggleClass = targetElm.className.indexOf('toggle') >= 0 || false;
         if (hasToggleClass) {
           const item = this.dataView.getItem(args.row);
           if (item) {
-            item[collapsedPropName] = !item[collapsedPropName] ? true : false; // toggle the collapsed flag
+            item[collapsedPropName] = !item[collapsedPropName]; // toggle the collapsed flag
             const isCollapsed = item[collapsedPropName];
-            const parentId = item[idPropName];
-            const parentFoundIdx = this._collapsedTreeItems.findIndex(treeChange => treeChange.parentId === parentId);
+            const itemId = item[idPropName];
+            const parentFoundIdx = this._currentToggledItems.findIndex(treeChange => treeChange.itemId === itemId);
             if (parentFoundIdx >= 0) {
-              this._collapsedTreeItems[parentFoundIdx].isCollapsed = isCollapsed;
+              this._currentToggledItems[parentFoundIdx].isCollapsed = isCollapsed;
             } else {
-              this._collapsedTreeItems.push({ parentId, isCollapsed });
+              this._currentToggledItems.push({ itemId, isCollapsed });
             }
-            this.pubSubService.publish('onTreeToggleStageChanged', { fromParentId: parentId, treeChanges: this._collapsedTreeItems });
-            this.dataView.updateItem(parentId, item);
+
+            this.dataView.updateItem(itemId, item);
+
+            // since we always keep 2 arrays as reference (flat + hierarchical)
+            // we also need to update the hierarchical array with the new toggle flag
+            const searchTreePredicate = (treeItemToSearch: any) => treeItemToSearch[idPropName] === itemId;
+            const treeItemFound = findItemInTreeStructure(this.sharedService.hierarchicalDataset || [], searchTreePredicate, childrenPropName);
+            if (treeItemFound) {
+              treeItemFound[collapsedPropName] = isCollapsed;
+            }
+
+            // and finally we can invalidate the grid to re-render the UI
             this._grid.invalidate();
+
+            this._lastToggleStateChange = {
+              type: isCollapsed ? ToggleStateChangeType.toggleCollapse : ToggleStateChangeType.toggleExpand,
+              previousFullToggleType: this._isLastFullToggleCollapsed ? 'full-collapse' : 'full-expand',
+              toggledItems: this._currentToggledItems
+            };
+            this.pubSubService.publish('onTreeItemToggled', { ...this._lastToggleStateChange, fromItemId: itemId } as TreeToggleStateChange);
           }
           event.stopImmediatePropagation();
         }
@@ -151,34 +334,22 @@ export class TreeDataService {
     }
   }
 
-  /**
-   * Takes a hierarchical (tree) input array and sort it (if an `initialSort` exist, it will use that to sort)
-   * @param {Array<Object>} hierarchicalDataset - inpu
-   * @returns {Object} sort result object that includes both the flat & tree data arrays
-   */
-  sortHierarchicalDataset<T>(hierarchicalDataset: T[], inputColumnSorts?: ColumnSort | ColumnSort[]) {
-    const columnSorts = inputColumnSorts ?? this.getInitialSort(this.sharedService.allColumns, this.gridOptions);
-    const finalColumnSorts = Array.isArray(columnSorts) ? columnSorts : [columnSorts];
-    return this.sortService.sortHierarchicalDataset(hierarchicalDataset, finalColumnSorts);
-  }
+  private updateToggledItem(item: any, isCollapsed: boolean) {
+    const dataViewIdIdentifier = this.gridOptions?.datasetIdPropertyName ?? 'id';
+    const childrenPropName = this.getTreeDataOptionPropName('childrenPropName');
+    const collapsedPropName = this.getTreeDataOptionPropName('collapsedPropName');
 
-  async toggleTreeDataCollapse(collapsing: boolean): Promise<boolean> {
-    // emit an event when filters are all cleared
-    await this.pubSubService.publish('onBeforeToggleTreeCollapse', { collapsing });
+    if (item) {
+      // update the flat dataset item
+      item[collapsedPropName] = isCollapsed;
+      this.dataView.updateItem(item[dataViewIdIdentifier], item);
 
-    if (this.gridOptions) {
-      const treeDataOptions = this.gridOptions.treeDataOptions;
-
-      if (this.gridOptions.enableTreeData) {
-        const items: any[] = this.dataView.getItems() || [];
-        const collapsedPropName = treeDataOptions && treeDataOptions.collapsedPropName || '__collapsed';
-        items.forEach((item: any) => item[collapsedPropName] = collapsing);
-        this.dataView.setItems(items);
-        this._grid.invalidate();
+      // also update the hierarchical tree item
+      const searchTreePredicate = (treeItemToSearch: any) => treeItemToSearch[dataViewIdIdentifier] === item[dataViewIdIdentifier];
+      const treeItemFound = findItemInTreeStructure(this.sharedService.hierarchicalDataset || [], searchTreePredicate, childrenPropName);
+      if (treeItemFound) {
+        treeItemFound[collapsedPropName] = isCollapsed;
       }
     }
-
-    this.pubSubService.publish('onTreeToggleAllRequested', { collapsing });
-    return true;
   }
 }
diff --git a/packages/common/src/services/utilities.ts b/packages/common/src/services/utilities.ts
index 7f3826acf..4545faaef 100644
--- a/packages/common/src/services/utilities.ts
+++ b/packages/common/src/services/utilities.ts
@@ -4,6 +4,7 @@ import * as moment_ from 'moment-mini';
 const DOMPurify = DOMPurify_; // patch to fix rollup to work
 const moment = (moment_ as any)['default'] || moment_; // patch to fix rollup "moment has no default export" issue, document here https://github.com/rollup/rollup/issues/670
 
+import { Constants } from '../constants';
 import { FieldType, OperatorString, OperatorType } from '../enums/index';
 import { EventSubscription, GridOption } from '../interfaces/index';
 import { Observable, RxJsFacade, Subject, Subscription } from './rxjsFacade';
@@ -76,14 +77,15 @@ export function castObservableToPromise<T>(rxjs: RxJsFacade, input: Promise<T> |
 /**
  * Convert a flat array (with "parentId" references) into a hierarchical (tree) dataset structure (where children are array(s) inside their parent objects)
  * @param flatArray input array (flat dataset)
- * @param options you can provide the following options:: "parentPropName" (defaults to "parent"), "childrenPropName" (defaults to "children") and "identifierPropName" (defaults to "id")
+ * @param options you can provide the following tree data options (which are all prop names, except 1 boolean flag, to use or else use their defaults):: collapsedPropName, childrenPropName, parentPropName, identifierPropName and levelPropName and initiallyCollapsed (boolean)
  * @return roots - hierarchical (tree) data view array
  */
-export function unflattenParentChildArrayToTree<P, T extends P & { [childrenPropName: string]: P[] }>(flatArray: P[], options?: { parentPropName?: string; childrenPropName?: string; identifierPropName?: string; levelPropName?: string; }): T[] {
-  const childrenPropName = options?.childrenPropName ?? 'children';
-  const parentPropName = options?.parentPropName ?? '__parentId';
+export function unflattenParentChildArrayToTree<P, T extends P & { [childrenPropName: string]: P[] }>(flatArray: P[], options?: { childrenPropName?: string; collapsedPropName?: string; identifierPropName?: string; levelPropName?: string; parentPropName?: string; initiallyCollapsed?: boolean; }): T[] {
   const identifierPropName = options?.identifierPropName ?? 'id';
-  const levelPropName = options?.levelPropName ?? '__treeLevel';
+  const childrenPropName = options?.childrenPropName ?? Constants.treeDataProperties.CHILDREN_PROP;
+  const parentPropName = options?.parentPropName ?? Constants.treeDataProperties.PARENT_PROP;
+  const levelPropName = options?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
+  const collapsedPropName = options?.collapsedPropName ?? Constants.treeDataProperties.COLLAPSED_PROP;
   const inputArray: P[] = flatArray || [];
   const roots: T[] = []; // items without parent which at the root
 
@@ -96,15 +98,16 @@ export function unflattenParentChildArrayToTree<P, T extends P & { [childrenProp
   Object.keys(all).forEach((id) => {
     const item = all[id];
     if (!(parentPropName in item) || item[parentPropName] === null || item[parentPropName] === undefined || item[parentPropName] === '') {
-      // delete item[parentPropName];
       roots.push(item);
     } else if (item[parentPropName] in all) {
       const p = all[item[parentPropName]];
       if (!(childrenPropName in p)) {
         p[childrenPropName] = [];
       }
-      // delete item[parentPropName];
       p[childrenPropName].push(item);
+      if (p[collapsedPropName] === undefined) {
+        p[collapsedPropName] = options?.initiallyCollapsed ?? false;
+      }
     }
   });
 
@@ -123,7 +126,7 @@ export function unflattenParentChildArrayToTree<P, T extends P & { [childrenProp
  * @param {Number} [treeLevel] - current tree level
  */
 export function addTreeLevelByMutation<T>(treeArray: T[], options: { childrenPropName: string; levelPropName: string; }, treeLevel = 0) {
-  const childrenPropName = (options?.childrenPropName ?? 'children') as keyof T;
+  const childrenPropName = (options?.childrenPropName ?? Constants.treeDataProperties.CHILDREN_PROP) as keyof T;
 
   if (Array.isArray(treeArray)) {
     for (const item of treeArray) {
@@ -145,11 +148,12 @@ export function addTreeLevelByMutation<T>(treeArray: T[], options: { childrenPro
  * @param {Object} options - you can provide "childrenPropName" (defaults to "children")
  * @return {Array<Object>} output - Parent/Child array
  */
-export function flattenToParentChildArray<T>(treeArray: T[], options?: { parentPropName?: string; childrenPropName?: string; identifierPropName?: string; shouldAddTreeLevelNumber?: boolean; levelPropName?: string; }) {
-  const childrenPropName = (options?.childrenPropName ?? 'children') as keyof T & string;
+export function flattenToParentChildArray<T>(treeArray: T[], options?: { parentPropName?: string; childrenPropName?: string; hasChildrenPropName?: string; identifierPropName?: string; shouldAddTreeLevelNumber?: boolean; levelPropName?: string; }) {
   const identifierPropName = (options?.identifierPropName ?? 'id') as keyof T & string;
-  const parentPropName = (options?.parentPropName ?? '__parentId') as keyof T & string;
-  const levelPropName = options?.levelPropName ?? '__treeLevel';
+  const childrenPropName = (options?.childrenPropName ?? Constants.treeDataProperties.CHILDREN_PROP) as keyof T & string;
+  const hasChildrenPropName = (options?.hasChildrenPropName ?? Constants.treeDataProperties.HAS_CHILDREN_PROP) as keyof T & string;
+  const parentPropName = (options?.parentPropName ?? Constants.treeDataProperties.PARENT_PROP) as keyof T & string;
+  const levelPropName = options?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
   type FlatParentChildArray = Omit<T, keyof typeof childrenPropName>;
 
   if (options?.shouldAddTreeLevelNumber) {
@@ -163,6 +167,7 @@ export function flattenToParentChildArray<T>(treeArray: T[], options?: { parentP
       return {
         [identifierPropName]: node[identifierPropName],
         [parentPropName]: parentNode !== undefined ? parentNode[identifierPropName] : null,
+        [hasChildrenPropName]: !!node[childrenPropName],
         ...objectWithoutKey(node, childrenPropName as keyof T) // reuse the entire object except the children array property
       } as unknown as FlatParentChildArray;
     }
@@ -261,9 +266,9 @@ export function findItemInHierarchicalStructure<T = any>(treeArray: T[], predica
 
 /**
  * Find an item from a tree (hierarchical) view structure (a parent that can have children array which themseleves can children and so on)
- * @param treeArray
- * @param predicate
- * @param childrenPropertyName
+ * @param {Array<Object>} treeArray - hierarchical tree dataset
+ * @param {Function} predicate - search predicate to find the item in the hierarchical tree structure
+ * @param {String} childrenPropertyName - children property name to use in the tree (defaults to "children")
  */
 export function findItemInTreeStructure<T = any>(treeArray: T[], predicate: (item: T) => boolean, childrenPropertyName: string): T | undefined {
   if (!childrenPropertyName) {
diff --git a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
index 2b4e39556..2b87fe1b7 100644
--- a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
+++ b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
@@ -392,7 +392,7 @@ export class SlickVanillaGridBundle {
       this.translaterService,
     );
 
-    this.gridStateService = services?.gridStateService ?? new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService);
+    this.gridStateService = services?.gridStateService ?? new GridStateService(this.extensionService, this.filterService, this._eventPubSubService, this.sharedService, this.sortService, this.treeDataService);
     this.gridService = services?.gridService ?? new GridService(this.gridStateService, this.filterService, this._eventPubSubService, this.paginationService, this.sharedService, this.sortService, this.treeDataService);
     this.groupingService = services?.groupingAndColspanService ?? new GroupingAndColspanService(this.extensionUtility, this.extensionService, this._eventPubSubService);
 
@@ -1251,8 +1251,10 @@ export class SlickVanillaGridBundle {
   private loadFilterPresetsWhenDatasetInitialized() {
     if (this.gridOptions && !this.customDataView) {
       // if user entered some Filter "presets", we need to reflect them all in the DOM
-      if (this.gridOptions.presets && Array.isArray(this.gridOptions.presets.filters)) {
-        this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets.filters);
+      // also note that a presets of Tree Data Toggling will also call this method because Tree Data toggling does work with data filtering
+      // (collapsing a parent will basically use Filter for hidding (aka collapsing) away the child underneat it)
+      if (this.gridOptions.presets && (Array.isArray(this.gridOptions.presets.filters) || Array.isArray(this.gridOptions.presets?.treeData?.toggledItems))) {
+        this.filterService.populateColumnFilterSearchTermPresets(this.gridOptions.presets?.filters || []);
       }
     }
   }
diff --git a/test/cypress/integration/example05.spec.js b/test/cypress/integration/example05.spec.js
index 0eb44edb6..60288f9b9 100644
--- a/test/cypress/integration/example05.spec.js
+++ b/test/cypress/integration/example05.spec.js
@@ -17,6 +17,16 @@ describe('Example 05 - Tree Data (from a flat dataset with parentId references)'
       .each(($child, index) => expect($child.text()).to.eq(titles[index]));
   });
 
+  it('should expect all rows to be collapsed on first page load', () => {
+    cy.get('.grid5')
+      .find('.slick-group-toggle.expanded')
+      .should('have.length', 0);
+
+    cy.get('.grid5')
+      .find('.slick-group-toggle.collapsed')
+      .should(($rows) => expect($rows).to.have.length.greaterThan(0));
+  });
+
   it('should have a Grid Preset Filter on 3rd column "% Complete" and expect all rows to be filtered as well', () => {
     cy.get('.input-group-text.rangeOutput_percentComplete')
       .contains('25');
@@ -26,31 +36,31 @@ describe('Example 05 - Tree Data (from a flat dataset with parentId references)'
       .contains('>=');
   });
 
-  it('should collapsed all rows from "Collapse All" button', () => {
-    cy.get('[data-test=collapse-all-btn]')
-      .contains('Collapse All')
+  it('should expand all rows from "Expand All" button', () => {
+    cy.get('[data-test=expand-all-btn]')
+      .contains('Expand All')
       .click();
 
     cy.get('.grid5')
-      .find('.slick-group-toggle.expanded')
+      .find('.slick-group-toggle.collapsed')
       .should('have.length', 0);
 
     cy.get('.grid5')
-      .find('.slick-group-toggle.collapsed')
+      .find('.slick-group-toggle.expanded')
       .should(($rows) => expect($rows).to.have.length.greaterThan(0));
   });
 
-  it('should expand all rows from "Expand All" button', () => {
-    cy.get('[data-test=expand-all-btn]')
-      .contains('Expand All')
+  it('should collapsed all rows from "Collapse All" button', () => {
+    cy.get('[data-test=collapse-all-btn]')
+      .contains('Collapse All')
       .click();
 
     cy.get('.grid5')
-      .find('.slick-group-toggle.collapsed')
+      .find('.slick-group-toggle.expanded')
       .should('have.length', 0);
 
     cy.get('.grid5')
-      .find('.slick-group-toggle.expanded')
+      .find('.slick-group-toggle.collapsed')
       .should(($rows) => expect($rows).to.have.length.greaterThan(0));
   });
 
@@ -224,4 +234,71 @@ describe('Example 05 - Tree Data (from a flat dataset with parentId references)'
       .get('.slick-cell')
       .contains(/^((?!Task 500).)*$/);
   });
+
+  it('should open the Grid Menu "Clear all Filters" command', () => {
+    cy.get('.grid5')
+      .find('button.slick-gridmenu-button')
+      .trigger('click')
+      .click();
+
+    let gridUid = '';
+
+    cy.get('.grid5 .slickgrid-container')
+      .should(($grid) => {
+        const classes = $grid.prop('className').split(' ');
+        gridUid = classes.find(className => /slickgrid_.*/.test(className));
+        expect(gridUid).to.not.be.null;
+      })
+      .then(() => {
+        cy.get(`.slick-gridmenu.${gridUid}`)
+          .find('.slick-gridmenu-item:nth(0)')
+          .find('span')
+          .contains('Clear all Filters')
+          .click();
+      });
+
+    cy.get('.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top');
+  });
+
+  it('should be able to open "Task 1" and "Task 3" parents', () => {
+    /*
+      we should find this structure
+      Task 0
+        Task 1
+          Task 2
+          Task 3
+            Task 4
+        ...
+    */
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true });
+
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).click({ force: true });
+  });
+
+  it('should be able to click on the "Collapse All (wihout event)" button', () => {
+    cy.get('[data-test=collapse-all-noevent-btn]')
+      .contains('Collapse All (without triggering event)')
+      .click();
+  });
+
+  it('should be able to click on the "Reapply Previous Toggled Items" button and expect "Task 1" and "Task 3" parents to become open (via Grid State change) while every other parents remains collapsed', () => {
+    cy.get('[data-test=reapply-toggled-items-btn]')
+      .contains('Reapply Previous Toggled Items')
+      .click();
+
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0)`).should('contain', 'Task 1');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(0)`).should('contain', 'Task 2');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0)`).should('contain', 'Task 3');
+    cy.get(`.grid5 [style="top:${GRID_ROW_HEIGHT * 3}px"] > .slick-cell:nth(0) .slick-group-toggle.expanded`).should('have.length', 1);
+
+    cy.get(`.grid5 .slick-group-toggle.expanded`).should('have.length', 2);
+  });
 });
diff --git a/test/cypress/integration/example06.spec.js b/test/cypress/integration/example06.spec.js
index 6396b6d12..f7355d739 100644
--- a/test/cypress/integration/example06.spec.js
+++ b/test/cypress/integration/example06.spec.js
@@ -1,9 +1,13 @@
 /// <reference types="cypress" />
 
+const { it } = require('mocha');
+
 describe('Example 06 - Tree Data (from a Hierarchical Dataset)', { retries: 1 }, () => {
+  const GRID_ROW_HEIGHT = 45;
   const titles = ['Files', 'Date Modified', 'Size'];
   // const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf', 'txt', 'todo.txt', 'xls', 'compilation.xls', 'music', 'mp3', 'pop', 'song.mp3', 'theme.mp3', 'rock', 'soft.mp3', 'something.txt'];
   // const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt', 'pdf', 'phone-bill.pdf', 'map2.pdf', 'map.pdf', 'internet-bill.pdf', 'misc', 'todo.txt', 'bucket-list.txt'];
+  const defaultGridPresetWithoutPdfDocs = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'txt', 'todo.txt', 'xls', 'compilation.xls'];
   const defaultSortAscList = ['bucket-list.txt', 'documents', 'misc', 'todo.txt', 'pdf', 'internet-bill.pdf', 'map.pdf', 'map2.pdf', 'phone-bill.pdf'];
   const defaultSortDescList = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt'];
   const defaultSortDescListWithExtraSongs = ['something.txt', 'music', 'mp3', 'rock', 'soft.mp3', 'pop', 'theme.mp3', 'song.mp3', 'pop-122.mp3', 'pop-121.mp3', 'documents', 'xls', 'compilation.xls', 'txt', 'todo.txt'];
@@ -21,17 +25,33 @@ describe('Example 06 - Tree Data (from a Hierarchical Dataset)', { retries: 1 },
       .each(($child, index) => expect($child.text()).to.eq(titles[index]));
   });
 
+  it('should expect the "pdf" folder to be closed by the collapsed items grid preset', () => {
+    cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0)`).should('contain', 'pdf');
+    cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`).should('have.length', 1);
+
+    defaultGridPresetWithoutPdfDocs.forEach((_colName, rowIdx) => {
+      if (rowIdx > defaultGridPresetWithoutPdfDocs.length - 1) {
+        return;
+      }
+      cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultGridPresetWithoutPdfDocs[rowIdx]);
+    });
+  });
+
+  it('should expand "pdf" folder and expect all folders to be expanded', () => {
+    cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * 4}px"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`)
+      .click();
+
+    cy.get('.slick-viewport-top.slick-viewport-left')
+      .scrollTo('top', { force: true });
+  });
+
   it('should have default Files list', () => {
-    cy.get('.grid6')
-      .find('.slick-row')
-      .each(($row, index) => {
-        if (index > defaultSortAscList.length - 1) {
-          return;
-        }
-        cy.wrap($row).children('.slick-cell')
-          .first()
-          .should('contain', defaultSortAscList[index]);
-      });
+    defaultSortAscList.forEach((_colName, rowIdx) => {
+      if (rowIdx > defaultSortAscList.length - 1) {
+        return;
+      }
+      cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
+    });
   });
 
   it('should be able to add 2 new pop songs into the Music folder', () => {
@@ -127,32 +147,24 @@ describe('Example 06 - Tree Data (from a Hierarchical Dataset)', { retries: 1 },
       .contains('Clear all Filters')
       .click();
 
-    cy.get('.grid6')
-      .find('.slick-row')
-      .each(($row, index) => {
-        if (index > defaultSortAscList.length - 1) {
-          return;
-        }
-        cy.wrap($row).children('.slick-cell')
-          .first()
-          .should('contain', defaultSortAscList[index]);
-      });
+    defaultSortAscList.forEach((_colName, rowIdx) => {
+      if (rowIdx > defaultSortAscList.length - 1) {
+        return;
+      }
+      cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortAscList[rowIdx]);
+    });
   });
 
   it('should click on "Files" column to sort descending', () => {
     cy.get('.slick-header-columns .slick-header-column:nth(0)')
       .click();
 
-    cy.get('.grid6')
-      .find('.slick-row')
-      .each(($row, index) => {
-        if (index > defaultSortDescListWithExtraSongs.length - 1) {
-          return;
-        }
-        cy.wrap($row).children('.slick-cell')
-          .first()
-          .should('contain', defaultSortDescListWithExtraSongs[index]);
-      });
+    defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
+      if (rowIdx > defaultSortDescListWithExtraSongs.length - 1) {
+        return;
+      }
+      cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
+    });
   });
 
   it('should filter the Files by the input search string and expect 4 rows and 1st column to have ', () => {
@@ -177,16 +189,12 @@ describe('Example 06 - Tree Data (from a Hierarchical Dataset)', { retries: 1 },
     cy.get('[data-test=clear-search-string]')
       .click();
 
-    cy.get('.grid6')
-      .find('.slick-row')
-      .each(($row, index) => {
-        if (index > defaultSortAscList.length - 1) {
-          return;
-        }
-        cy.wrap($row).children('.slick-cell')
-          .first()
-          .should('contain', defaultSortDescListWithExtraSongs[index]);
-      });
+    defaultSortDescListWithExtraSongs.forEach((_colName, rowIdx) => {
+      if (rowIdx > defaultSortDescListWithExtraSongs.length - 1) {
+        return;
+      }
+      cy.get(`.grid6 [style="top:${GRID_ROW_HEIGHT * rowIdx}px"] > .slick-cell:nth(0)`).should('contain', defaultSortDescListWithExtraSongs[rowIdx]);
+    });
   });
 
   it('should be able to add a 3rd new pop song into the Music folder and see it show up in the UI', () => {