Skip to content

feat(TreeData): add maxVisibleDepth option + runtime API#2591

Open
ghiscoding wants to merge 3 commits into
masterfrom
feat/tree-data-max-depth
Open

feat(TreeData): add maxVisibleDepth option + runtime API#2591
ghiscoding wants to merge 3 commits into
masterfrom
feat/tree-data-max-depth

Conversation

@ghiscoding

@ghiscoding ghiscoding commented May 20, 2026

Copy link
Copy Markdown
Owner

closes #2373

vibe coded with copilot using GPT-5 mini

Adds a new treeDataOptions.maxVisibleDepth setting to limit how deep tree nodes are shown (nodes deeper than the value are hidden, not removed). Adds runtime API methods setMaxVisibleDepth(n) and clearMaxVisibleDepth() so apps can update or clear the limit at runtime. Updates demos and docs across frameworks and adds simple Set/Clear controls to the Example05/Example27 demos.

msedge_gcKnmRy7Ah

@ghiscoding ghiscoding requested a review from zewa666 May 20, 2026 23:04
@codecov

codecov Bot commented May 20, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (4b7dd59) to head (939a1b2).
⚠️ Report is 22 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff            @@
##           master    #2591    +/-   ##
========================================
  Coverage   100.0%   100.0%            
========================================
  Files         197      199     +2     
  Lines       25355    25186   -169     
  Branches     8961     8914    -47     
========================================
- Hits        25355    25186   -169     
Flag Coverage Δ
angular 100.0% <ø> (ø)
universal 100.0% <100.0%> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@pkg-pr-new

pkg-pr-new Bot commented May 20, 2026

Copy link
Copy Markdown
angular-slickgrid

npm i https://pkg.pr.new/angular-slickgrid@2591

aurelia-slickgrid

npm i https://pkg.pr.new/aurelia-slickgrid@2591

slickgrid-react

npm i https://pkg.pr.new/slickgrid-react@2591

slickgrid-vue

npm i https://pkg.pr.new/slickgrid-vue@2591

@slickgrid-universal/angular-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/angular-row-detail-plugin@2591

@slickgrid-universal/aurelia-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/aurelia-row-detail-plugin@2591

@slickgrid-universal/react-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/react-row-detail-plugin@2591

@slickgrid-universal/vue-row-detail-plugin

npm i https://pkg.pr.new/@slickgrid-universal/vue-row-detail-plugin@2591

@slickgrid-universal/binding

npm i https://pkg.pr.new/@slickgrid-universal/binding@2591

@slickgrid-universal/common

npm i https://pkg.pr.new/@slickgrid-universal/common@2591

@slickgrid-universal/composite-editor-component

npm i https://pkg.pr.new/@slickgrid-universal/composite-editor-component@2591

@slickgrid-universal/custom-footer-component

npm i https://pkg.pr.new/@slickgrid-universal/custom-footer-component@2591

@slickgrid-universal/custom-tooltip-plugin

npm i https://pkg.pr.new/@slickgrid-universal/custom-tooltip-plugin@2591

@slickgrid-universal/empty-warning-component

npm i https://pkg.pr.new/@slickgrid-universal/empty-warning-component@2591

@slickgrid-universal/event-pub-sub

npm i https://pkg.pr.new/@slickgrid-universal/event-pub-sub@2591

@slickgrid-universal/excel-export

npm i https://pkg.pr.new/@slickgrid-universal/excel-export@2591

@slickgrid-universal/graphql

npm i https://pkg.pr.new/@slickgrid-universal/graphql@2591

@slickgrid-universal/odata

npm i https://pkg.pr.new/@slickgrid-universal/odata@2591

@slickgrid-universal/pagination-component

npm i https://pkg.pr.new/@slickgrid-universal/pagination-component@2591

@slickgrid-universal/pdf-export

npm i https://pkg.pr.new/@slickgrid-universal/pdf-export@2591

@slickgrid-universal/row-detail-view-plugin

npm i https://pkg.pr.new/@slickgrid-universal/row-detail-view-plugin@2591

@slickgrid-universal/rxjs-observable

npm i https://pkg.pr.new/@slickgrid-universal/rxjs-observable@2591

@slickgrid-universal/sql

npm i https://pkg.pr.new/@slickgrid-universal/sql@2591

@slickgrid-universal/text-export

npm i https://pkg.pr.new/@slickgrid-universal/text-export@2591

@slickgrid-universal/utils

npm i https://pkg.pr.new/@slickgrid-universal/utils@2591

@slickgrid-universal/vanilla-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-bundle@2591

@slickgrid-universal/vanilla-force-bundle

npm i https://pkg.pr.new/@slickgrid-universal/vanilla-force-bundle@2591

commit: 939a1b2

@ghiscoding

ghiscoding commented May 20, 2026

Copy link
Copy Markdown
Owner Author

@zewa666 this should address your feature request from issue #2373

at first it only added the tree data options and modified the Filter Service, but then it required more work for the end user to change it afterward. So I added 2 functions to set/clear the max depth via the Tree Data Service, which makes it much easier for the end user to change it at anytime.

Let me know if that covers it all, a big part of it was done by copilot

it's always a bit longer to review a PR now that we have all frameworks in here haha 😅 but it's good to have the same code change spread across all framework demos.... anyway if you could just review the 2 Services changes, that'd be great, thanks

...oh I forgot to test the export, which is a manual process, but I expect it to work since it's WYSIWYG but will check tomorrow nonetheless

EDIT

tested the export and it works as intended which isn't surprising since it's WYSIWYG

@zewa666

zewa666 commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

this is exactly what I had in mind with my first shot. it looks great and achieves exactly whats needed for huge nested treeviews.

one thing I noticed though is that the setting could be added to state changes so that they survive a refresh if persisted in localstorage

aside from that lgtm

@ghiscoding

ghiscoding commented Jun 9, 2026

Copy link
Copy Markdown
Owner Author

one thing I noticed though is that the setting could be added to state changes so that they survive a refresh if persisted in localstorage

@zewa666 you mean as a Grid State? That would require a few more changes (add it to Grid State, create an event to save it whenever it changes and do this in all frameworks implementation, re-apply on grid load as Grid Presets, ...), is that really expected to change that often compared to what you originally set in the grid options?

this.gridOptions = { 
  treeDataOptions: {
    maxVisibleDepth: 2,
  }
}

personally I think this might be better for the end user (you) to do it themselves since I'm assuming that this tree depth would be used pretty rarely isn't it (maybe just you haha)?. Perhaps I could add a PubSub event when it changes though so you can hook a save?

@zewa666

zewa666 commented Jun 9, 2026

Copy link
Copy Markdown
Collaborator

sry I was unclear, yeah exactly the additional pub sub event would be what I'd look for. I did the same for when columns get toggled visibility through the menu. that would help a lot

@ghiscoding

ghiscoding commented Jun 10, 2026

Copy link
Copy Markdown
Owner Author

done, I added onTreeMaxVisibleDepthChanged with a depth number argument or undefined when calling the clear function... is that ready for a merge now?

Side note, PR #2601 is also another awesome perf improvement for Tree Data thanks to AI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Set max visible depth of treeview

2 participants