How to send data to the controller from the Kendo UI TreeView -
i have 2 treeviews, 1 has list of countries, , other empty, want drag , drop selected countries second tree-view. don't know how send data controller treeview , there text field on page in form. so, how can send both form data , treeview's data controller.
here code second tree-view empty , want add selected nodes to:
@(html.kendo().treeview() .name("treeview-right") .draganddrop(true) .events(events => events .drag("ondrag") .drop("ondrop") ) )
please try 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 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) { (var = 0; < nodeview.length; i++) { selectedid += nodeview[i].id + ","; //nodeview[i].text; can 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 opeartion here } } return json(""); } } }
Comments
Post a Comment