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

How to send treeview data back to controller

Thread ID:





117263 Sep 18,2014 05:47 PM UTC Sep 22,2014 04:04 AM UTC ASP.NET MVC 3
Tags: TreeView
Randy Craven
Asked On September 18, 2014 05:47 PM UTC


I am using a treeview with an ejDialog.  When the dialog is closed, I would like to send the treeview model (or just the checked nodes) back to the controller using Ajax.  So, the data going to the controller will be json.

I'm using a simple class to populate the treeview:

public class MyClass {

public int Id { get; set; }

public int Pid { get; set; }

public bool HasChildren { get; set; }

public bool Expanded { get; set; }

public string Name { get; set; }

public bool IsChecked { get; set; }


What I need is to serialize the treeview nodes (all nodes or just the checked ones) so that they can be deserialized in the controller as List<MyClass>.

What is the best way to do this and is there any sample code available?




Harikrishnan P [Syncfusion]
Replied On September 19, 2014 06:07 PM UTC

Hi Randy,

Thanks for using Syncfusion products.

Currently, there is no sample for your requirement (“serialize the treeview nodes (all nodes or just the checked ones) so that they can be deserialized in the controller as List<MyClass>”). We have prepared a sample based on your requirement. Please find the sample from the following location

Sample Location: Treeview Sample

In the above sample in the Dialog “close” event, we need to get the nodes that are checked using the “getCheckedNodes()” method. Then compare the “id” of the each checked nodes with the data source of the treeview and push the matching object into a JSON array.

We can store the datasourc for the treeview in “ViewBag” and it can be accessed script side by encoding the <List> values into an array.

Pass the JSON object to the controller using AJAX and deserialize the string into class as shown below.





        public JsonResult SaveData(string str)


            JavaScriptSerializer js = new JavaScriptSerializer();

            data = js.Deserialize<List<MyClass>>(str);

            return Json(data, JsonRequestBehavior.AllowGet);





View code:


@{Html.EJ().Dialog("basicDialog").Title("Audi-Q3 Drive").Items(data =>


                       data.ContentTemplate(@<div style="width: 250px">

                        @Html.EJ().TreeView("tree").ShowCheckbox(true).ClientSideEvents(e => e.NodeCheck("onCheck")).TreeViewFields(s => s.Datasource((IEnumerable<loadondemand>)Model).Id("id").ParentId("pid").Text("name").HasChild("hasChild").Expanded("expanded"))


                   }).Width(550).Position(p => p.XValue("450").YValue("50")).ClientSideEvents(evt => evt.Close("onDialogClose")).Render();}



JavaScript code


    var treeobj,data,source;

    var JSON1 = [];

    function onDialogClose(args) {

        //Object for the Treeview created

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

        //Checked nodes are obtained using the public method, "getCheckedNodes"

        var checkednodes = treeobj.getCheckedNodes();

        var array = @Html.Raw(Json.Encode(

((IEnumerable<loadondemand>)ViewBag.datasource).Select(node => new


    pid = node.pid,

    name = node.name,

    hasChild =node.hasChild,

    id = node.id




            //Compare the checked nodes "id" with the datasource



                    if(checkednodes[data].id == array[source].id){





            var dataToSend = JSON.stringify(JSON1);

        //AJAX request to send the data to the controller.


                url: '/Treeview/SaveData',

                //contentType: 'application/json',

                type: 'POST',

                data: {"str":dataToSend},

                dataType: 'json'


            success(function (result) {

                //Deserialized JSON result is obtained here



            error(function (xhr, status) {






Please let us know if you have further queries,



Randy Craven
Replied On September 20, 2014 05:49 PM UTC

Thank you, HariKrishnan, this is what I needed.

I'm glad I posted a forum question because I never would have figured this out by myself!


Harikrishnan P [Syncfusion]
Replied On September 22, 2014 04:04 AM UTC

Hi Randy,

We are glad to hear that the provided solution helps for you. Please get back to us if you would require any further assistance.




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