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
Hernan Cantori
130
igx-tree-node selection through API
posted

Could you please provide an example for igx-tree, where node selection is done through API? I´m succesfully loading the component with data, but I´m not able to mark as selected a specific node.

I tried to play around with the "load on demand" demo but it is not working.

www.infragistics.com/.../tree

Thanks.

  • 640
    Offline posted

    Hello Hernan,

    Thank you for posting in our community.

    To select node of IgxTree through API you have to get its reference. This could be achieved with findNodes() method of the IgxTree:
     

            const comparer: IgxTreeSearchResolver = (
            data: any,
            node: IgxTreeNode<any>
        ) => {
            return node.data.Name.includes('igx');
        };

        const selectedNodes: IgxTreeNode<any>[] = this.tree.findNodes(
            null,
            comparer
        );
        selectedNodes.map(node => (node.selected = true));

    When using findNodes w/o a comparer, make sure all nodes have data passed.

    Nodes also can be gotten from tree.nodes QueryList:

    const selectedNode = this.tree.nodes.toArray()[index];
 selectedNode.selected = true;

    I created a small sample illustrating my approach for your reference. Please test it on your side and let me know whether you find it helpful.

    Additionally, on my side, the Load on demand demo is working properly. Is this issue reproducible in all browser or only at any specific ones?

    Please let me know if you have any further questions and concerns.

    Regards,

    Viktor Kombov

    Entry Level Software Developer

    Infragistics, Inc.