Option to prevent node selection change on expand/collapse in igx-tree

[HByte7]

Is your feature request related to a problem?

I want to use the "Ignite UI for Angular Tree Component" for navigation purposes in my application. The tree is located on the left hand of the application. Depending on the selected node the view on the right hand side will be changed with related content (e.g. may be a grid view or a formular view). As a user and developer I want in this scenario to expand/collapse visible nodes by clicking the expand/collapse icon (igx-tree-node__toggle-button) without but changing the current selection - like in a file explorer or like the "Ignite UI for jQuery Tree Control" (example on the top of https://www.igniteui.com/tree/overview)

The current situation is that when the user clicks on the expand/collapse icon, the corresponding node is selected, which causes a change in the view and content on the right-hand side of my application. This changing disrupts the user experience in my application.

Describe the solution you'd like

I would like to have an additional option to control the behavior. If this option is set, clicking the expand/collapse symbol should expand/collapse the associated node without changing the current selection.

Describe alternatives you've considered

I don't have any alternatives by using Ignite UI for Angular.

Additional context

%

[IvanKitanov17]

Hello @HByte7,

The sample in the overview does not have selection, since by default the selection property is set to none, I have also tested this with the BiState and Cascading selection and with both, the node is only selected when the user clicks on the checkbox and is not selected when they click on the expand/collapse indicator of the node.

In addition to this, could you let me know if you are referring to the activation behavior instead, which changes once the user clicks on a node, it also changes when they are clicking on the expand/collapse indicator or the checkbox (if selection is enabled), however this is expected since they both are part of the node.

Could you let me know how are you loading the content on the right side of your page, do you use any event such as activeNodeChanged, nodeSelection or click event of the specific node?

[HByte7]

Hello @IvanKitanov17,

Thanks for your reply. I don't use checkbox or BiState feature of igx-tree. I load the context on the right side when the (activeNodeChanged) event raised. The event (nodeSelection) didn't raise.

May be it's a wrong understanding of "active" and "selection" in combination without using checkbox - currently I'm orientating myself on features at Ignite for jQuery Tree-Control from my previous projects.

I already asked regarding this behavior in the support forum and it was suggested to open a feature request here.

THX

[IvanKitanov17]

Hello @HByte7,

I've went through the forum post and I saw that a workaround was suggested, I also simplified the solution which you can find here.

Could you test it and let me know if the workaround meets your requirements?

[HByte7]

Hello @IvanKitanov17,

Thanks for the updated sample.

I tested it and I come up with two points.

It looks like, that after some particular click sequences the logic runs not sync anymore. When I use the following (very slow) click sequence after start of the sample I got the following events (dump on console)

Click Animations -> OK Right Event "Node was clicked" Expand Animations -> FAIL No Event message dumpend Click ease-in -> FAIL Wrong Event "Node was expanded/collpased.."

Furthermore, if an entry is displayed selected (background is light grey) and I then expand another node, the previously selected entry is no longer displayed selected (background is white again) (Expand Elevation, Click igx-elevation -> is light grey, Expand Animations -> igx-elevation goes back to white)

THX

[IvanKitanov17]

Hello @HByte7,

Thank you for bringing up this scenario.

To address your feedback, I have implemented the nodeExpanded and nodeCollapsed events, ensuring the flag updates accurately. This adjustment allows the activation event to reflect the correct flag value. You can access the updated sample here.

Regarding your second point, I’d like to clarify the distinction between selection and activation. You observed that expanding a different node causes the previously active node to no longer appear selected. This behavior is actually intentional and can be considered part of the design. In our setup, only one element is "active" at any time, in contrast to selection, where multiple nodes can be selected simultaneously. When a user expands or collapses another node, the active node is updated accordingly, with the CSS class highlighting the latest active node.

Thank you again for your valuable feedback!