Kendo UI treeview current datasource post

Question

Мне нужно создать структуру папок на FTP, подобную структуре дерева на моем представлении. Я хочу разрешить пользователю редактировать древовидную структуру перед созданием папок.

У меня есть TreeView с обязательным сервером:

@model IEnumerable<TreeViewItemModel> 
@(Html.Kendo().TreeView() 
      .Name("PipelineStructureMajor") 
      .BindTo(Model) 
      .ExpandAll(true) 
      .DragAndDrop(true) 
     ) 

Связывание хорошо. При некоторой реструктуризации на стороне клиента (добавление/перетаскивание/удаление некоторых узлов), я хочу опубликовать treeview (корневой узел со всеми его рекурсивно) для моего действия.

public ActionResult _CreateFtp(TreeViewItemModel root) 
    { 
     //FTPClient in action : Parsing whole tree and converting into the folder structure 

     return PartialView("_TreeMajor", <refreshed model>); 
    } 

На стороне клиента, я попытался предупредить данные TreeView, он показывает текст корневого узла с его пунктами пустыми.

$('#createFtpConfirmed').click(function() { 

     //TreeView data 
     var treeData = $("#PipelineStructureMajor").data("kendoTreeView").dataSource.data(); 
     alert(JSON.stringify(treeData)); 

     $.ajax({ 
      url:'@Url.Action("_CreateFtp", "Structure")', 
      data: {root: treeData}, 
      type:"POST", 
      success: function (result, status, xhr) { 
       //Doing something useful 
      } 
     }); 
    }); 

Есть ли способ сделать это?

Answer 1

Как объясняет мой вопрос, у меня есть 3 шага:

1. Server-привязку дерева по умолчанию
2. Редактирование узлов (удаление, добавление, переименование узлов)
3. Fetch возвращает все данные TreeView (включая добавленные)

Пройдя через kendo docs и this demo, я понял. Я должен сделать свой источник данных дерева наблюдаемым, чтобы отражать изменения узлов. Для этого мне пришлось использовать kendo-web-скрипты (вместо серверных оберток). Поэтому я изменил мой шаг 1 к:

1. удаленных связывают дерево по умолчанию (Для того, чтобы мой DATASOURCE наблюдаемым)

Я хочу, чтобы мой вид дерева полностью загружен сразу удалены и видеть эту demo, я понял, что treeview позволяет одновременно загружать только один уровень. (UserVoice уже поставил в очередь, но команда Кендо все еще игнорировала его). Таким образом, я использую Hacky способ:

<div id="PipelineStructureMajor"></div> 
<button id="createandorinsert" class="k-button hugebtn">Send</button> 
<script> 
$.get("../Structure/LoadTreeData", function (data) { 
    var sat = new kendo.data.HierarchicalDataSource({ 
     data: data 
    }); 

    var pipelinetree = $("#PipelineStructureMajor").kendoTreeView({ 
     dataSource: kendo.observableHierarchy(sat), 
     dragDrop: true, 
     select: onNodeSelect 
    }).data("kendoTreeView"); 
}); 
</script> 

И я послал мои данные на действие контроллера, как:

$('#createandorinsert').click(function (e) { 

//TreeView's current datasource 
var tree = $("#PipelineStructureMajor").data("kendoTreeView").dataSource.data(); 

    $.ajax({ 
     url: '../Structure/FtpCreateAndOrSync', 
     type: 'POST',    
     data: { 
      xmlNodes: JSON.stringify(tree) 
     }, 
     beforeSend: function (xhr) { 
      alertSpan.removeClass().addClass("loading"); 
     }, 
     success: function (result, status, xhr) {     
       alertSpan.removeClass().addClass("success");     
     }, 
     error: function (jqXhr, textStatus, errorThrown) {     
       alertSpan.removeClass().addClass("error");      
     } 
    });  

});

А на стороне контроллера, я Десериализованный строку JSON, как: Только при частичном код

[AcceptVerbs(HttpVerbs.Post)] 
    public ActionResult FtpCreateAndOrSync(string xmlNodes) 
    { 
     //Deserializing nodes 
     var xmlNodesModels = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<IEnumerable<XmlNode>>(
        xmlNodes).ToArray(); 
      ////Alternative 
      //var data = JsonConvert.DeserializeObject<IEnumerable<XmlNode>>(xmlNodes); 
     return Json(new { cr = createResult, dr = dbResult }); 
    } 

Надеется, что это помогает кому-то.