Hi Everyone,
I need to reset igx tree,
Im having add and view page in same component with tab navigation,
Here i add the items using igx tree, then dynamically moving tab to view page, after coming to add page already selected ones are retaining.
so i need to reset the igx tree,
i tried deselectall() -> its only working for if i selected root tree, i won't work if i selected sub tree,
kindly help me to find out this issue.
Thanks in advance.
Hello,
I am glad that you find my suggestion helpful.
Thank you for using Infragistics components.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Hi, Thank you so much,
This is very helpful.
I have been looking into your question and thank you for your query about resetting the igx-tree component in your application. To ensure that the tree's selection is fully reset, including both root and sub-tree nodes, you can use the deselectAll() method followed by resetting the selection property. This approach guarantees that all selections are properly cleared and the tree is reset to its initial state.
Steps to Reset the igx-tree Component
<div class="sample-wrapper"> <igx-tree #tree selection="Cascading"> <igx-tree-node *ngFor="let type of data"> {{ type.Name }} <igx-tree-node *ngFor="let value of type.Children"> {{ value.Name }} </igx-tree-node> </igx-tree-node> </igx-tree> <button igxButton="contained" (click)="resetSelection()">Reset selection</button> </div>
TypeScript Component: Use the ViewChild decorator to get a reference to the igx-tree component. Define the data and implement the resetSelection method to reset the selection.
@ViewChild('tree', { static: true }) public tree: IgxTreeComponent; public resetSelection() { this.tree.deselectAll(); this.tree.selection = 'None'; this.tree.selection = 'Cascading'; }
Explanation
This approach should resolve the issue you're experiencing with resetting the igx-tree component. If you have any further questions or need additional assistance, please feel free to reach out.
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.
If you require any further assistance on the matter, please let me know.