Hi,
I'm having trouble handling the selection of tree nodes in an IgxTreeComponent with cascading selection. My use case is individually setting the [selected] input on each node according to their data matching a certain condition. Something like
@let groups = signals();@let selected = selectedSignals();<igx-tree class="signal-selector__tree" (nodeSelection)="onSelectionChanged($event)" selection="Cascading"> @for (group of groups; track group.id) { <igx-tree-node [expanded]="true"> <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: group }" /> @for (sgn of group.signals; track sgn.uid) { <igx-tree-node [data]="sgn" [selected]="selected.includes(sgn.uid)"> <ng-container *ngTemplateOutlet="signalTemplate; context: { $implicit: sgn }" /> </igx-tree-node> } ......
This results in something like
I.e., the node itself correctly gets the selected status. The checkbox it contains does not. Directly having [selected]="true" yields the same result.
If I try to first render the nodes and then manually setting their selected status, by debugging I come across this statement:
Which always resolves to args.oldSelection, since the array itself is always defined.
I'm experiencing this with IgniteUI for Angular 18.1.2, although the code involved in this functionality seems to be the same in the 19.0.x version.
Any help with this will be much appreciated.
Hello Cesar,
Thank you for sharing the issue you are facing. I’ve created a sample to replicate your use case, where the selection of tree nodes is conditionally controlled using the [selected] property.
[selected]
In the provided sample, I’ve implemented a cascading selection setup using the igx-tree. Nodes are dynamically marked as selected based on a specific condition within the isSelectedNode method. For instance, in this example, nodes with the Name property equal to "Report 2017" are selected by default. During testing, I was unable to reproduce the behavior you described, where the selection state of the checkbox does not align with the node's [selected] property. The checkboxes in my sample correctly reflect the selection status as expected.
igx-tree
isSelectedNode
Name
"Report 2017"
I kindly request that you review and test the attached sample in your environment. If the issue persists on your end, it would be extremely helpful if you could fork the sample, recreate the issue, and share the modified version with us. This will allow us to investigate further and provide a more targeted resolution.
Here is the sample on StackBlitz.Best Regards,Arkan Ahmedov,Infragistics
Sorry, after the "This results in something like" sentence there should be a screenshot that somehow failed to be inserted: