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!

[HByte7]

Hello @IvanKitanov17,

Thanks for the updates workarround and after some simple tests it looks well. But I will do some intensive test in this week. For a better trace I will add some more console log's in your example ;-)

Regarding the topic of higlighting the background: I understand the difference between selection and activation. And I also understand the current design behavoir of activation.

Unfortunately, and against the design behavoir, my intention would be that the pure expanding/collpasing not lead to an activation of the node This is due to the requirement for navigation. The user only wants to expand/collpase something briefly, but does not want to see any changes in the background color (activation) of the nodes in the tree.

If this behavior is by design and if it's not changable with a may future addtional "option", so maybe is it possible based on your example a) change the css-style of background "activation" to "transparent" -> the user doesn't see anymore the activation indicator b) if "activation" event raised select! the activated node by code and deselect the previous one (if there is one). c) configure a css style of backgound for a "selected" In my use case I don't need the function of any node selection for the user/application.

It's just an idea but I don't know if this is possible or realistic because I'm not an expert of creating componentes. But could this be a workarround?

THX

[IvanKitanov17]

Hello @HByte7,

Thank you for providing details and ideas for the workaround. I have reviewed your comment and I have updated the sample with the first suggestion you made, so that the activation does not cause any stylistic changes, removing the background, border and box-shadow. The changes are only in the tree-basic-sample.component.scss file, where the following css has been added:

::ng-deep .igx-tree-node__wrapper--active { background-color: transparent !important; border: none !important; box-shadow: none !important; }

You can find the sample here.

I hope that it satisfies your requirements.