feat: add Grouping/TreeData option to toggleOnNodeTitle

[ghiscoding]

add a new option named toggleByCellClick toggleOnNodeTitle that allows clicking on the Tree Data and/or Grouping node title to toggle it. This can be helpful since some user, like me, might find the toggle icon a little too small to click. The new option won't be enabled by default and will keep the same original behavior (not everyone would want this, hence its default disabled state)

• Tree Data: gridOptions = { treeDataOptions: { toggleOnNodeTitle: true, }}
• Grouping: gridOptions = { groupItemMetadataOption: { toggleOnNodeTitle: true, }}

TODO

• Not sure if I should revisit this and maybe change it to toggleOnNodeTitle since cell click might interfere with other processes like inline cell editing
  • yup this is better since that won't conflict with inline editing
• forgot to add docs for the new option in both Tree Data and Grouping docs

Screencast_20260427_222730.webm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.0%. Comparing base (15874a9) to head (0bdbdb8).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2552   +/-   ##
=======================================
  Coverage   100.0%   100.0%           
=======================================
  Files         196      196           
  Lines       24959    24973   +14     
  Branches     8812     8821    +9     
=======================================
+ Hits        24959    24973   +14     

Flag	Coverage Δ
angular	100.0% <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 Sentry.
📢 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]

angular-slickgrid

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

aurelia-slickgrid

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

slickgrid-react

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

slickgrid-vue

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

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

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

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

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

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

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

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

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

@slickgrid-universal/binding

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

@slickgrid-universal/common

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

@slickgrid-universal/composite-editor-component

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

@slickgrid-universal/custom-footer-component

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

@slickgrid-universal/custom-tooltip-plugin

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

@slickgrid-universal/empty-warning-component

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

@slickgrid-universal/event-pub-sub

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

@slickgrid-universal/excel-export

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

@slickgrid-universal/graphql

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

@slickgrid-universal/odata

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

@slickgrid-universal/pagination-component

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

@slickgrid-universal/pdf-export

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

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

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

@slickgrid-universal/rxjs-observable

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

@slickgrid-universal/sql

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

@slickgrid-universal/text-export

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

@slickgrid-universal/utils

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

@slickgrid-universal/vanilla-bundle

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

@slickgrid-universal/vanilla-force-bundle

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

commit: 0bdbdb8

[ghiscoding]

cc @zewa666 any feedback before I merge this one?

[zewa666]

hey there, I remember we had this thingy where a PR would create a demo site built with that commit in a sandbox for testing. Is that still a thing?

Things I'd like to test would be:

• Wheter selecting the title would cause toggling
• Behavior of the spacebar key on the cell with CellNavigation
• Marking multiple cells, starting with the title cell

[ghiscoding]

hey there, I remember we had this thingy where a PR would create a demo site built with that commit in a sandbox for testing. Is that still a thing?

@zewa666 sadly not anymore because Stackblitz is stuck at pnpm 8 and fails for pnpm 9+ (pnpm 11 came out today), which is why I removed the broken button (the other buttons I have in all readmes are ok because I use npm in all demo repos). That's why I added a video above

Things I'd like to test would be:

1 Wheter selecting the title would cause toggling
2 Behavior of the spacebar key on the cell with CellNavigation
3 Marking multiple cells, starting with the title cell

1. it's through the toggle icon and/or title but only when you enable the new option (I defaulted it to false since not everyone would want it I think). My initial PR was on the cell click but decided to change it to title only since clicking is also used for inline editing and a cell can be much wider than the node title, so I limited it to the icon + title (again only when enabled). It simply looks for .slick-[group|tree]-toggle and .slick-[group|tree]-title
2. you can use spacebar or left/right arrows, that was done last month in PR fix(a11y): use spacebar or arrow left/right to open/close Tree/Grouping #2448
3. not really sure what you mean, this PR is just about widening the area to toggle the Tree or Grouping, they both have their own config (same name but in different grid option prop location, I updated description above to show how to use them)

[zewa666]

the reason was that if I start any of the mentioned actions, as a side effect a toggling could happen

[ghiscoding]

@zewa666 I still don't see how unless you mean that PR #2448 has negative side effect? But my PR is not related to that at all and is also optional so I don't see how that could impact users. However, I did see that inline editor could have been a concern, so I did change PR to avoid conflicting with inline editing and limited my approach to only group/tree title (which I assume is what most users will want and expect, I personally want this and so I'll enable this as a global setting in my project)

[github-actions]

🎉 This pull request is included in version 10.6.0 📦
🔗 The release notes are available at: GitHub Release 🚀