Hello,

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

1. HTML Template: Define your igx-tree component and a button to trigger the reset functionality. Make sure to set the initial selection mode.

<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

1. deselectAll() Method: This method is used to clear the current selection in the tree. It effectively deselects all selected nodes, including both root and sub-tree nodes.
2. Changing selection Property: By setting the selection property to None and then back to Cascading, you ensure that the tree's selection state is fully reset. This sequence guarantees that all previously selected nodes are cleared, and the tree is ready for fresh selections.
3. HTML and TypeScript Integration: The provided example integrates these steps into a simple Angular component, allowing you to reset the tree’s selection when a button is clicked.

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.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics