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

How to send treeview data back to controller


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?




3 Replies

HP Harikrishnan P Syncfusion Team 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,



RC Randy Craven 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!


HP Harikrishnan P Syncfusion Team 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.



Live Chat Icon For mobile
Up arrow icon