feat(TreeData): add maxVisibleDepth option + runtime API

demos/aurelia/src/examples/slickgrid/example27.html

@@ -105,6 +105,35 @@ <h2>
       <span>Log Hierarchical Structure</span>
     </button>
   </div>
+  <div class="d-inline-block ms-2 mt-2">
+    <div class="input-group input-group-sm mb-0">
+      <input
+        id="maxVisibleDepthInput"
+        class="form-control"
+        type="number"
+        placeholder="Max Visible Depth (e.g. 1)"
+        aria-label="Max Visible Depth"
+      />
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="set-max-visible-depth-btn"
+        type="button"
+        click.trigger="setMaxVisibleDepthFromInput()"
+      >
+        <span class="mdi mdi-check" aria-hidden="true"></span>
+        Set
+      </button>
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="clear-max-visible-depth-btn"
+        type="button"
+        click.trigger="clearMaxVisibleDepth()"
+      >
+        <span class="mdi mdi-close" aria-hidden="true"></span>
+        Clear
+      </button>
+    </div>
+  </div>
 </div>
 
 <br />

demos/aurelia/src/examples/slickgrid/example27.scss

@@ -8,3 +8,10 @@
     gap: 4px;
   }
 }
+
+/* limit the demo maxVisibleDepth input size */
+#maxVisibleDepthInput {
+  height: 22px;
+  width: 100%;
+  max-width: 150px;
+}

demos/aurelia/src/examples/slickgrid/example27.ts

@@ -121,6 +121,9 @@ export class Example27 {
         indentMarginLeft: 15,
         initiallyCollapsed: true,
 
+        // when `maxVisibleDepth` is defined, any tree node with a level greater than this number will be hidden from the grid display (but not removed from the dataset)
+        // maxVisibleDepth: 2,
+
         // 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)
         // initialSort: {
@@ -379,4 +382,18 @@ export class Example27 {
     document.querySelector('.subtitle')?.classList[action]('hidden');
     this.aureliaGrid.resizerService.resizeGrid(0);
   }
+
+  setMaxVisibleDepthFromInput() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (!input) return;
+    const value = parseInt(input.value, 10);
+    const maxVisibleDepth = Number.isFinite(value) ? value : undefined;
+    this.aureliaGrid.treeDataService.setMaxVisibleDepth(maxVisibleDepth as number | undefined);
+  }
+
+  clearMaxVisibleDepth() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (input) input.value = '';
+    this.aureliaGrid.treeDataService.clearMaxVisibleDepth();
+  }
 }

demos/aurelia/test/cypress/e2e/example27.cy.ts

@@ -234,6 +234,48 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)'
     });
   });
 
+  it('deterministic: hide Task 1 children with maxVisibleDepth=1 and restore on clear', () => {
+    // Task 1 was just expanded by the previous test; now ensure children exist
+    cy.get('[data-row="1"] > .slick-cell:nth(0) .slick-tree-title').should('contain', 'Task 1');
+
+    // ensure level-2 children exist; if not, expand Task 1 and re-check
+    cy.get('.slick-tree-title[level=2]')
+      .its('length')
+      .then((len) => {
+        if (len === 0) {
+          cy.get(
+            `.grid5 [style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`
+          ).click({ force: true });
+          cy.get('.grid5').find('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+        } else {
+          expect(len).to.be.greaterThan(0);
+        }
+      });
+
+    // apply maxVisibleDepth=1
+    cy.get('#maxVisibleDepthInput').clear().type('1');
+    cy.get('[data-test=set-max-visible-depth-btn]').click();
+
+    // children (level=2) should be hidden
+    cy.get('.slick-tree-title[level=2]').should('have.length', 0);
+
+    // clear the maxVisibleDepth and expect children to reappear
+    cy.get('[data-test=clear-max-visible-depth-btn]').click();
+    cy.get('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+  });
+
+  it('should set max visible depth via demo input and hide deeper nodes', () => {
+    // ensure there are level-2 items before applying maxVisibleDepth
+    cy.get('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+
+    // set max visible depth to 1 and apply
+    cy.get('#maxVisibleDepthInput').clear().type('1');
+    cy.get('[data-test=set-max-visible-depth-btn]').click();
+
+    // after applying, level-2 items should be hidden
+    cy.get('.slick-tree-title[level=2]').should('have.length', 0);
+  });
+
   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();
   });

demos/react/src/examples/slickgrid/Example27.tsx

@@ -126,6 +126,9 @@ const Example27: React.FC = () => {
         indentMarginLeft: 15,
         initiallyCollapsed: true,
 
+        // when `maxVisibleDepth` is defined, any tree node with a level greater than this number will be hidden from the grid display (but not removed from the dataset)
+        // maxVisibleDepth: 2,
+
         // 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)
         // initialSort: {
@@ -347,6 +350,20 @@ const Example27: React.FC = () => {
     }
   }
 
+  function setMaxVisibleDepthFromInput() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (!input) return;
+    const value = parseInt(input.value, 10);
+    const maxVisibleDepth = Number.isFinite(value) ? value : undefined;
+    reactGridRef.current?.treeDataService.setMaxVisibleDepth(maxVisibleDepth as number | undefined);
+  }
+
+  function clearMaxVisibleDepth() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (input) input.value = '';
+    reactGridRef.current?.treeDataService.clearMaxVisibleDepth();
+  }
+
   function reapplyToggledItems() {
     reactGridRef.current?.treeDataService.applyToggledItemStateChanges(treeToggleItems);
   }
@@ -471,6 +488,35 @@ const Example27: React.FC = () => {
           <button onClick={() => logHierarchicalStructure()} className="btn btn-outline-secondary btn-xs btn-icon ms-1">
             <span>Log Hierarchical Structure</span>
           </button>
+          <div className="d-inline-block ms-2 mt-2">
+            <div className="input-group input-group-sm mb-0">
+              <input
+                id="maxVisibleDepthInput"
+                className="form-control"
+                type="number"
+                placeholder="Max Visible Depth (e.g. 1)"
+                aria-label="Max Visible Depth"
+              />
+              <button
+                className="btn btn-outline-secondary btn-xs btn-icon"
+                data-test="set-max-visible-depth-btn"
+                type="button"
+                onClick={() => setMaxVisibleDepthFromInput()}
+              >
+                <span className="mdi mdi-check" aria-hidden="true"></span>
+                Set
+              </button>
+              <button
+                className="btn btn-outline-secondary btn-xs btn-icon"
+                data-test="clear-max-visible-depth-btn"
+                type="button"
+                onClick={() => clearMaxVisibleDepth()}
+              >
+                <span className="mdi mdi-close" aria-hidden="true"></span>
+                Clear
+              </button>
+            </div>
+          </div>
         </div>
       </div>
 

demos/react/src/examples/slickgrid/example27.scss

@@ -1,9 +1,16 @@
 // @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
 
 .icon {
-    align-items: center;
-    display: inline-flex;
-    justify-content: center;
-    height: 1.5rem;
-    width: 1.5rem;
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+/* limit the demo maxVisibleDepth input size */
+#maxVisibleDepthInput {
+  height: 22px;
+  width: 100%;
+  max-width: 150px;
 }

demos/react/test/cypress/e2e/example27.cy.ts

@@ -231,6 +231,48 @@ describe('Example 27 - Tree Data (from a flat dataset with parentId references)'
     });
   });
 
+  it('deterministic: hide Task 1 children with maxVisibleDepth=1 and restore on clear', () => {
+    // Task 1 was just expanded by the previous test; now ensure children exist
+    cy.get('[data-row="1"] > .slick-cell:nth(0) .slick-tree-title').should('contain', 'Task 1');
+
+    // ensure level-2 children exist; if not, expand Task 1 and re-check
+    cy.get('.slick-tree-title[level=2]')
+      .its('length')
+      .then((len) => {
+        if (len === 0) {
+          cy.get(
+            `.grid5 [style="transform: translateY(${GRID_ROW_HEIGHT * 1}px);"] > .slick-cell:nth(0) .slick-group-toggle.collapsed`
+          ).click({ force: true });
+          cy.get('.grid5').find('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+        } else {
+          expect(len).to.be.greaterThan(0);
+        }
+      });
+
+    // apply maxVisibleDepth=1
+    cy.get('#maxVisibleDepthInput').clear().type('1');
+    cy.get('[data-test=set-max-visible-depth-btn]').click();
+
+    // children (level=2) should be hidden
+    cy.get('.slick-tree-title[level=2]').should('have.length', 0);
+
+    // clear the maxVisibleDepth and expect children to reappear
+    cy.get('[data-test=clear-max-visible-depth-btn]').click();
+    cy.get('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+  });
+
+  it('should set max visible depth via demo input and hide deeper nodes', () => {
+    // ensure there are level-2 items before applying maxVisibleDepth
+    cy.get('.slick-tree-title[level=2]').its('length').should('be.greaterThan', 0);
+
+    // set max visible depth to 1 and apply
+    cy.get('#maxVisibleDepthInput').clear().type('1');
+    cy.get('[data-test=set-max-visible-depth-btn]').click();
+
+    // after applying, level-2 items should be hidden
+    cy.get('.slick-tree-title[level=2]').should('have.length', 0);
+  });
+
   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();
   });

demos/vanilla/src/examples/example05.html

@@ -73,6 +73,25 @@ <h6 class="italic content example-details">
         <span>Log Hierarchical Structure</span>
       </button>
     </div>
+    <div class="row mb-1">
+      <div class="field has-addons">
+        <p class="control">
+          <input id="maxVisibleDepthInput" class="input is-small" type="number" placeholder="Max Visible Depth (e.g. 1)" />
+        </p>
+        <p class="control">
+          <button onclick.trigger="setMaxVisibleDepthFromInput()" class="button is-small is-primary" data-test="set-max-visible-depth-btn">
+            <span class="mdi mdi-check" aria-hidden="true"></span>
+            <span style="margin-left: 6px">Set Depth</span>
+          </button>
+        </p>
+        <p class="control">
+          <button onclick.trigger="clearMaxVisibleDepth()" class="button is-small" data-test="clear-max-visible-depth-btn">
+            <span class="mdi mdi-close" aria-hidden="true"></span>
+            <span style="margin-left: 6px">Clear</span>
+          </button>
+        </p>
+      </div>
+    </div>
   </div>
 </div>
 

demos/vanilla/src/examples/example05.scss

@@ -5,4 +5,10 @@
   .slick-cell {
     column-gap: 4px;
   }
-}
+}
+
+/* limit the demo maxVisibleDepth input size */
+#maxVisibleDepthInput {
+  width: 100%;
+  max-width: 150px;
+}

demos/vanilla/src/examples/example05.ts

@@ -280,6 +280,9 @@ export default class Example05 {
         indentMarginLeft: 15,
         initiallyCollapsed: true,
 
+        // when `maxVisibleDepth` is defined, any tree node with a level greater than this number will be hidden from the grid display (but not removed from the dataset)
+        // maxVisibleDepth: 2,
+
         // 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)
         // initialSort: {
@@ -398,6 +401,20 @@ export default class Example05 {
     this.sgb.filterService.updateFilters([{ columnId: 'percentComplete', operator: '<', searchTerms: [40] }]);
   }
 
+  setMaxVisibleDepthFromInput() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (!input) return;
+    const value = parseInt(input.value, 10);
+    const maxVisibleDepth = Number.isFinite(value) ? value : undefined;
+    this.sgb.treeDataService.setMaxVisibleDepth(maxVisibleDepth as number | undefined);
+  }
+
+  clearMaxVisibleDepth() {
+    const input = document.querySelector('#maxVisibleDepthInput') as HTMLInputElement;
+    if (input) input.value = '';
+    this.sgb.treeDataService.clearMaxVisibleDepth();
+  }
+
   logHierarchicalStructure() {
     console.log('hierarchical array', this.sgb.treeDataService.datasetHierarchical);
   }