fix: initiallyCollapsed should work with hierarchical tree dataset (#2083)

ghiscoding · web-flow · commit e676246d0f13 · 2025-07-29T23:35:06.000-04:00
* fix: `initiallyCollapsed` should work with hierarchical tree dataset
diff --git a/demos/aurelia/src/examples/slickgrid/example28.ts b/demos/aurelia/src/examples/slickgrid/example28.ts
@@ -145,6 +145,7 @@ export class Example28 {
         columnId: 'file',
         childrenPropName: 'files',
         excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false
+        // initiallyCollapsed: true,
 
         // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
         // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
diff --git a/demos/react/src/examples/slickgrid/Example28.tsx b/demos/react/src/examples/slickgrid/Example28.tsx
@@ -146,6 +146,7 @@ const Example28: React.FC = () => {
         columnId: 'file',
         childrenPropName: 'files',
         excludeChildrenWhenFilteringTree: isExcludingChildWhenFilteringRef.current, // defaults to false
+        // initiallyCollapsed: true,
 
         // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
         // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
diff --git a/demos/vanilla/src/examples/example06.ts b/demos/vanilla/src/examples/example06.ts
@@ -46,6 +46,7 @@ export default class Example06 {
       undefined,
       this.datasetHierarchical
     );
+    // this.sgb.datasetHierarchical = this.datasetHierarchical;
     document.body.classList.add('salesforce-theme');
   }
 
@@ -166,6 +167,7 @@ export default class Example06 {
         columnId: 'file',
         childrenPropName: 'files',
         excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false
+        // initiallyCollapsed: true,
 
         // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
         // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
diff --git a/demos/vue/src/components/Example28.vue b/demos/vue/src/components/Example28.vue
@@ -171,6 +171,7 @@ function defineGrid() {
       columnId: 'file',
       childrenPropName: 'files',
       excludeChildrenWhenFilteringTree: isExcludingChildWhenFiltering.value, // defaults to false
+      // initiallyCollapsed: true,
 
       // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
       // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
diff --git a/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts b/frameworks/angular-slickgrid/src/demos/examples/example28.component.ts
@@ -150,6 +150,7 @@ export class Example28Component implements OnInit {
         columnId: 'file',
         childrenPropName: 'files',
         excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false
+        // initiallyCollapsed: true,
 
         // skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
         // (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
diff --git a/frameworks/angular-slickgrid/src/library/components/__tests__/angular-slickgrid.component.spec.ts b/frameworks/angular-slickgrid/src/library/components/__tests__/angular-slickgrid.component.spec.ts
@@ -206,6 +206,7 @@ const treeDataServiceStub = {
   convertFlatParentChildToTreeDatasetAndSort: vi.fn(),
   dispose: vi.fn(),
   handleOnCellClick: vi.fn(),
+  initHierarchicalTree: vi.fn(),
   sortHierarchicalDataset: vi.fn(),
   toggleTreeDataCollapse: vi.fn(),
 } as unknown as TreeDataService;
diff --git a/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts b/frameworks/angular-slickgrid/src/library/components/angular-slickgrid.component.ts
@@ -237,6 +237,7 @@ export class AngularSlickgridComponent<TData = any> implements AfterViewInit, On
     // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
     if (newHierarchicalDataset && this.slickGrid && this.sortService?.processTreeDataInitialSort) {
       this.sortService.processTreeDataInitialSort();
+      this.treeDataService.initHierarchicalTree();
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
diff --git a/frameworks/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts b/frameworks/aurelia-slickgrid/src/custom-elements/aurelia-slickgrid.ts
@@ -678,6 +678,7 @@ export class AureliaSlickgridCustomElement {
     // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
     if (newHierarchicalDataset && this.grid && this.sortService?.processTreeDataInitialSort) {
       this.sortService.processTreeDataInitialSort();
+      this.treeDataService.initHierarchicalTree();
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
diff --git a/frameworks/slickgrid-react/src/components/slickgrid-react.tsx b/frameworks/slickgrid-react/src/components/slickgrid-react.tsx
@@ -231,6 +231,7 @@ export class SlickgridReact<TData = any> extends React.Component<SlickgridReactP
     if (this.dataView && newHierarchicalDataset && this.grid && this.sortService?.processTreeDataInitialSort) {
       this.dataView.setItems([], this._options?.datasetIdPropertyName ?? 'id');
       this.sortService.processTreeDataInitialSort();
+      this.treeDataService.initHierarchicalTree();
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
diff --git a/frameworks/slickgrid-vue/src/components/SlickgridVue.vue b/frameworks/slickgrid-vue/src/components/SlickgridVue.vue
@@ -257,6 +257,7 @@ watch(
     if (dataview && newHierarchicalDataset && grid && sortService?.processTreeDataInitialSort) {
       dataview.setItems([], _gridOptions.value?.datasetIdPropertyName ?? 'id');
       sortService.processTreeDataInitialSort();
+      treeDataService.initHierarchicalTree();
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
diff --git a/packages/common/src/services/__tests__/treeData.service.spec.ts b/packages/common/src/services/__tests__/treeData.service.spec.ts
@@ -827,4 +827,56 @@ describe('TreeData Service', () => {
       expect(sortHierarchySpy).toHaveBeenCalledWith(mockHierarchical, [mockColumnSort]);
     });
   });
+
+  describe('hierarchical dataset', () => {
+    beforeEach(() => {
+      vi.clearAllMocks();
+      gridOptionsMock.treeDataOptions = { columnId: 'file', parentPropName: 'parentId', childrenPropName: 'files', initiallyCollapsed: false };
+      vi.clearAllMocks();
+    });
+
+    it('should initially collapse all hierarchical items when "initiallyCollapsed" is enabled', async () => {
+      const mockHierarchical = [
+        {
+          id: 0,
+          file: 'documents',
+          files: [
+            { id: 2, file: 'todo.txt', size: 2.3 },
+            {
+              id: 1,
+              file: 'vacations',
+              files: [
+                { id: 2, file: 'todo.txt', size: 2.3 },
+                { id: 1, file: 'vacation.txt', size: 1.2 },
+              ],
+            },
+          ],
+        },
+      ];
+      gridOptionsMock.treeDataOptions!.initiallyCollapsed = true;
+      vi.spyOn(SharedService.prototype, 'hierarchicalDataset', 'get').mockReturnValueOnce(mockHierarchical).mockReturnValueOnce(mockHierarchical);
+
+      service.init(gridStub);
+
+      expect(service.datasetHierarchical).toEqual([
+        {
+          __collapsed: true,
+          id: 0,
+          file: 'documents',
+          files: [
+            { id: 2, file: 'todo.txt', size: 2.3 },
+            {
+              __collapsed: true,
+              id: 1,
+              file: 'vacations',
+              files: [
+                { id: 2, file: 'todo.txt', size: 2.3 },
+                { id: 1, file: 'vacation.txt', size: 1.2 },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+  });
 });
diff --git a/packages/common/src/services/treeData.service.ts b/packages/common/src/services/treeData.service.ts
@@ -1,6 +1,5 @@
 import type { BasePubSubService, EventSubscription } from '@slickgrid-universal/event-pub-sub';
 
-import { Constants } from '../constants.js';
 import { ToggleStateChangeType, type ToggleStateChangeTypeString } from '../enums/index.js';
 import type {
   Column,
@@ -115,6 +114,9 @@ export class TreeDataService {
       }
     }
 
+    // initialize anything related to hierarchical tree (e.g. `initiallyCollapsed`)
+    this.initHierarchicalTree();
+
     // subscribe to the SlickGrid event and call the backend execution
     this._eventHandler.subscribe(grid.onClick, this.handleOnCellClick.bind(this));
 
@@ -134,6 +136,32 @@ export class TreeDataService {
     });
   }
 
+  /** init the hierarchical tree when necessary (e.g. `initiallyCollapsed` requires to collapse all items) */
+  initHierarchicalTree(): void {
+    if (this.gridOptions?.treeDataOptions?.initiallyCollapsed) {
+      const collapsedPropName = getTreeDataOptionPropName(this.treeDataOptions, 'collapsedPropName');
+      const childrenPropName = getTreeDataOptionPropName(this.treeDataOptions, 'childrenPropName');
+      this.toggleAllHierarchicalTree(this.datasetHierarchical || [], true, childrenPropName, collapsedPropName);
+    }
+  }
+
+  /**
+   * Toggle all items of a hierarchical (tree) dataset, user must provide the children & collapsed property names
+   * NOTE: this does NOT change or update the flat dataset, it only changes the collapsed flag in the hierarchical tree only.
+   * @param {Array<any>} hierarchicalData - hierarchical data to collapse/expand
+   * @param {Boolean} collapsing - optionally force a collapse/expand (True => collapse all, False => expand all)
+   * @param {String} childrenPropName - name of the property that holds the children array (defaults to "children")
+   * @param {String} collapsedPropName - name of the property that holds the collapsed state (defaults to "__collapsed")
+   */
+  toggleAllHierarchicalTree(hierarchicalData: any[], collapsing: boolean, childrenPropName: string, collapsedPropName: string): void {
+    hierarchicalData.forEach((item) => {
+      if (childrenPropName in item) {
+        item[collapsedPropName] = collapsing;
+        this.toggleAllHierarchicalTree(item[childrenPropName], collapsing, childrenPropName, collapsedPropName);
+      }
+    });
+  }
+
   /**
    * Apply different tree toggle state changes (to ALL rows, the entire dataset) 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
@@ -342,8 +370,8 @@ export class TreeDataService {
    */
   recalculateTreeTotals(gridOptions: GridOption): void {
     const treeDataOptions = gridOptions.treeDataOptions;
-    const childrenPropName = treeDataOptions?.childrenPropName ?? Constants.treeDataProperties.CHILDREN_PROP;
-    const levelPropName = treeDataOptions?.levelPropName ?? Constants.treeDataProperties.TREE_LEVEL_PROP;
+    const childrenPropName = getTreeDataOptionPropName(this.treeDataOptions, 'childrenPropName');
+    const levelPropName = getTreeDataOptionPropName(this.treeDataOptions, 'levelPropName');
 
     if (treeDataOptions?.aggregators) {
       treeDataOptions.aggregators.forEach((aggregator) => {
diff --git a/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts b/packages/vanilla-bundle/src/components/__tests__/slick-vanilla-grid.spec.ts
@@ -194,6 +194,7 @@ const treeDataServiceStub = {
   convertFlatParentChildToTreeDatasetAndSort: vi.fn(),
   dispose: vi.fn(),
   handleOnCellClick: vi.fn(),
+  initHierarchicalTree: vi.fn(),
   sortHierarchicalDataset: vi.fn(),
   toggleTreeDataCollapse: vi.fn(),
 } as unknown as TreeDataService;
diff --git a/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts b/packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts
@@ -193,6 +193,7 @@ export class SlickVanillaGridBundle<TData = any> {
     // when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
     if (this.dataView && newHierarchicalDataset && this.slickGrid && this.sortService?.processTreeDataInitialSort) {
       this.sortService.processTreeDataInitialSort();
+      this.treeDataService.initHierarchicalTree();
 
       // we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
       // however we need to queue our process until the flat dataset is ready, so we can queue a microtask to execute the DataView refresh only after everything is ready
