How to send treeview data back to controller

[Randy Craven]

Hello,

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?

thanks,

Randy

}

[Harikrishnan P]

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.

 

[Controller]       

 

[HttpPost]

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

                    </div>);

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

 

 

JavaScript code

<script>

    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

            for(data=0;data<checkednodes.length;data++){

                for(source=0;source<array.length;source++){

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

                        JSON1.push(array[source]);

                    }

                }

            }

            var dataToSend = JSON.stringify(JSON1);

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

            $.ajax({

                url: '/Treeview/SaveData',

                //contentType: 'application/json',

                type: 'POST',

                data: {"str":dataToSend},

                dataType: 'json'

            }).

            success(function (result) {

                //Deserialized JSON result is obtained here

                console.log(result);

            }).

            error(function (xhr, status) {

                console.log(status);

            })

    }

</script>

 

Please let us know if you have further queries,

Regards

HariKrishnan

[Randy Craven]

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!

Randy

[Harikrishnan P]

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.

Regards,

HariKrishnan