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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to get a selected node on treeview?

Thread ID:

Created:

Updated:

Platform:

Replies:

147617 Sep 17,2019 01:49 PM UTC Sep 18,2019 10:15 AM UTC ASP.NET Core - EJ 2 1
loading
Tags: TreeView
Peter Barasits
Asked On September 17, 2019 01:49 PM UTC

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?

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon