We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ExpandAll not working. How can I programatically expand a tree node in Vue?

Im trying to expand a specific node in the treeview.  This is the code Im using but I cant seem to expand the node prgramatically.  Does anybody have an example of how to do this with Vue? Thanks.


console.log('get tree data')
let node = this.$refs.treeview.getNode('sec_1')
console.log('expanding node ' + node.id)

get tree data
{id: "sec_1", text: "section1", parentID: null, selected: false, expanded: false, …}expanded: falsehasChildren: trueid: "sec_1"isChecked: nullparentID: nullselected: falsetext: "section1" notexpanding node sec_1

1 Reply

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 4, 2019 05:37 PM UTC

Hi Adam, 
Thank you for contacting Syncfusion support. 
We have validated your query. You can programmatically expand a node via any of the following methods 
1.       Using expandAll method 
2.       Using expandedNodes property 
3.       By mapping expanded: true while field declaration 
We have prepared a sample to expand nodes programmatically in the nodeClicked event of the TreeView. 
Code Example 
nodeClicked: function(args) { 
    var node = this.$refs.tree1.getNode(args.node); 
    //expand the nodes 
    console.log("expanding node " + node.id); 
    // uncomment this to expand the selected node alone 
    // this.$refs.tree1.expandedNodes = [node.id] 
Could you please check the above sample and get back to us if you need any further assistance? 
Vinoth Kumar S 

Live Chat Icon For mobile
Up arrow icon