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
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Two way data binding for TreeView

Two way data binding for TreeView

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.


1 Reply
PP Prasanth Palani Syncfusion Team 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

Loader.
Up arrow icon