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.

How to send treeview data back to controller

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 [Syncfusion]
Replied On September 19, 2014 02:07 PM

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
Replied On September 20, 2014 01:49 PM

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 [Syncfusion]
Replied On September 22, 2014 12:04 AM

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


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.

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.

;