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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Two way data binding for TreeView

Thread ID:

Created:

Updated:

Platform:

Replies:

121101 Nov 10,2015 09:45 PM UTC Nov 11,2015 07:37 PM UTC ASP.NET MVC 1
loading
Tags: TreeView
Jonathan Byrne
Asked On November 10, 2015 09:45 PM UTC

I am struggling to get two way data binding working for the MVC TreeView control.  I can get the TreeView to display the data from the model correctly but I can't get the model to update with the selected nodes when the form is submitted. 

I have checked the actual HTTP headers and the POST does include the selected node information but the model is not being updated.  All of the examples I can find are only for displaying data, not receiving data back.


Prasanth Palani [Syncfusion]
Replied On November 11, 2015 07:37 PM UTC

Hi Jonathan,

Query: I am struggling to get two way data binding working for the MVC TreeView control.  I can get the TreeView to display the data from the model correctly but I can't get the model to update with the selected nodes when the form is submitted.

I have analyzed your query and I have prepared a simple sample for achieve your requirements. Please get the sample from the below link,

Sample: TreeView sample in MVC

In given sample we have bind the nodeSelect event to TreeView control for node selection. Here we are passing AJAX Request to controller to get the index of the selected node. Then we can update the model for the selected nodes.
Please refer the below the code snippet,

[VIEW]


@Html.EJ().TreeView("tree").TreeViewFields(s => s.Datasource((IEnumerable<MvcApplication1.Models.loadondemand>)ViewBag.datasource).Id("id").ParentId("pid").Text("name").HasChild("hasChild").Expanded("expanded")).ClientSideEvents(e=>e.NodeSelect("selectNode"))



<script>

function selectNode() {

        treeObj = $("#tree").data("ejTreeView");

        var selectedNode = treeObj.getSelectedNodeIndex();

        $.ajax({

            url: "/TreeView/getselctednode",

            type: "post",

            data: { 'selectednode': selectedNode }

        })

    }

</script>


[Controller]


[HttpPost]

        public ActionResult getselctednode(string selectednode)

        {

            // Give your code to model update for the selected nodes.

            return View();

        }



Please attach the screenshot and provide more information about your requirement if we misunderstood your query and provided solution does not meets your requirement. We will be happy to help you.

Regards,
Prasanth P

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.

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

;