How to send data to the controller from the Kendo UI TreeView

Question

I have two TreeViews, one has a list of countries, and the other is empty, now I want drag and drop selected countries into the second tree-view. I don't know how to send data to the controller from the TreeView and there is also some text field on the page in a form. So, how can I send both the form data and the TreeView's data to the controller.

Here is the code for the second tree-view which is empty and I want to add the selected nodes to:

@(Html.Kendo().TreeView()
    .Name("treeview-right")
    .DragAndDrop(true)
    .Events(events => events
        .Drag("onDrag")
        .Drop("onDrop")
    )
)

Answer 1

Please try with the below code snippet.

HTML/VIEW

<div style="border: 1px solid green;">
    <div id="treeview-left"></div>
</div>
<div style="border: 1px solid red;">
    <div id="treeview-right"></div>
</div>
<div id="mydiv" onclick="SaveData()">Click me to save data</div>
<script>
    $("#treeview-left").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
            {
                id: 11, text: "Furniture", expanded: true, items: [
                  { id: 12, text: "Tables & Chairs" },
                  { id: 13, text: "Sofas" },
                  { id: 14, text: "Occasional Furniture" }
                ]
            },
            {
                id: 15, text: "Decor", items: [
                  { id: 16, text: "Bed Linen" },
                  { id: 17, text: "Curtains & Blinds" },
                  { id: 18, text: "Carpets" }
                ]
            }
        ]
    });

    $("#treeview-right").kendoTreeView({
        dragAndDrop: true,
        dataSource: [
            {
                id: 1, text: "Storage", expanded: true, items: [
                  { id: 2, text: "Wall Shelving" },
                  { id: 3, text: "Floor Shelving" },
                  { id: 4, text: "Kids Storage" }
                ]
            },
            {
                id: 5, text: "Lights", items: [
                  { id: 6, text: "Ceiling" },
                  { id: 7, text: "Table" },
                  { id: 8, text: "Floor" }
                ]
            }
        ]
    });

    var selectedID;

    function SaveData() {

        selectedID = '';

        var tv = $("#treeview-right").data("kendoTreeView");

        selectedID = getRecursiveNodeText(tv.dataSource.view());

        alert(selectedID);

        var data = {};
        data.str = selectedID;

        $.ajax({
            url: 'Home/SaveData',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (result) {
                alert("Success");
            },
            error: function (result) {
                alert("Error");
            },
        });

    }

    function getRecursiveNodeText(nodeview) {
        for (var i = 0; i < nodeview.length; i++) {
            selectedID += nodeview[i].id + ",";
            //nodeview[i].text; You can also access text here
            if (nodeview[i].hasChildren) {
                getRecursiveNodeText(nodeview[i].children.view());
            }
        }

        return selectedID;
    }
</script>

CONTROLLER

namespace MvcApplication2.Controllers
{
    public class HomeController : Controller
    {

        [HttpPost]
        public JsonResult SaveData(string str)
        {
            foreach (string s in str.Split(','))
            {
                if (!string.IsNullOrEmpty(s))
                {
                    //Perform your opeartion here
                }
            }

            return Json("");
        }

    }
}

jsfiddle Demo