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

How to get a selected node on treeview?

Hi,

I need the selected node value, and pass the value partial view model.

Example:
<div class="table">
<div class="row">
<div class="col-4">
<ejs-treeview id="treedata">
<e-treeview-fields dataSource="@ViewBag.DataSource"
expanded="HasChildren"
id="DirectoryName"
parentID="ParentDirectoryName"
hasChildren="HasChildren"
text="DirectoryName">
</e-treeview-fields>
</ejs-treeview>
</div>
<div class="col-8">
@await Html.PartialAsync("Details", @treedata.SelectedItem)
</div>
</div>
</div>

What should I write instead of @treedata.SelectedItem?

1 Reply

AB Ashokkumar Balasubramanian Syncfusion Team September 18, 2019 10:15 AM UTC

Hi Peter Barasits, 
 
Good day to you. 
 
We have validated your requirement and code snippets shared. We could not get the selectedNodes as per your code snippet since your code trying to access the selected nodes before the control rendered and it always returns selected node as null in that case. So, we suggest you use the following approach to access the selected nodes. Here, we have used the AJAX call to pass the selected nodes from the view to the controller part initially. Then we have passed the selected nodes from the controller to the partial page. Please refer to the following code snippet. 
 
// view part 
 
<ejs-treeview id="treedata" created="onSelect" nodeSelected="onSelect" > 
    <e-treeview-fields dataSource="ViewBag.data" id="id" selected="Selected" parentId="pid" text="name" hasChildren="HasChild" expanded="Expanded"></e-treeview-fields> 
</ejs-treeview> 
<div id="nodeDetails"></div> 
 
// Trigges on a nodeSelection 
    function onSelect() {  
        var dataToSend = this.selectedNodes[0] 
        $.ajax({ 
            url: '/Home/Update', 
            type: 'POST', 
            data: { "str": dataToSend }, 
            success: function (result) { 
                 $('#nodeDetails').html(result); 
            }, 
            error: function(xhr, status) { 
                console.log(status); 
            } 
        }) 
    } 
 
//Controller part 
public ActionResult Update(string str) 
        { 
            ViewBag.node = str; 
            return PartialView("Details"); 
        } 
 
 
Kindly check the above sample and get back to us if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Live Chat Icon For mobile
Up arrow icon