How to get a selected node on treeview?

[Peter Barasits]

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]

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"); 

        } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/147617/ze/TreeViewDemo-2083547325  

 

Kindly check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Ashokkumar B.