Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Renukadevi B
45
Reset for IGX Tree
posted

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.

Parents
  • 460
    Offline posted

    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

Reply Children