剣道ツリーノード編集/更新

Question

データを表示する剣道ツリービューがあります。しかし、今私はツリービューのラベルを編集したい。いくつかの方法を試して、それを検索しましたが、適切な解決策を見つけることができませんでした。私の現在の状況は、編集アイコンをクリックしてテキストを変更して[保存]をクリックしても何も起きていない場合、テキストボックスが開きます。

テンプレートの編集

<script id="editTemplate" type="text/x-kendo-template"> 
    <label>Text: <input class="k-textbox" value="#=node.LINK#" /></label> 
    <button class="k-button k-primary">Save</button> 
</script> 

ツリービュー：編集する

function treeView() { 
treeMenu = new kendo.data.HierarchicalDataSource({ 
    template: kendo.template($("#treeview-template").html()), 
    schema: { 
     data: function (response) { 
      var rdata = {}; 
      if (response.d) { 
       rdata = JSON.parse(response.d); 
      } 
      else { 
       rdata = response; 
      } 
      return rdata; // ASMX services return JSON in the following format { "d": <result> }. 
     }, 
     schema: { 
      model: { 
       hasChildren: true, 
       id: "id", 
       children: "HasChildren", 
       hasChildren: "HasChildren", 
       fields: { 
        ID: { editable: false, nullable: false, type: "string" }, 
        LABEL: { editable: true, nullable: true, type: "string" }, 
        LINK: { editable: true, nullable: true, type: "string" }, 

       }, 
      } 
     } 
    }, 
    transport: { 
     read: { 
      url: "/Services/TreeServices.asmx/getTree", 
      contentType: "application/json; charset=utf-8", 
      type: "POST", 
      datatype: "json" 

     }, 
      parameterMap: function (data, type) { 
      if ((type == "read") || (type == "update") || (type == "create") || (type == "destroy")) { 
       console.log('parameterMap: data => ' + JSON.stringify(data)); 
       return JSON.stringify(data); 
      } else { 
       return data; 
      } 
     } 
    }, 
    }); 

機能ノード：

function editNode() { 
var editTemplate = kendo.template($("#editTemplate").html()); 
var treeview = $("#treeview").data("kendoTreeView"); 
var selectedNode = treeview.select(); 
var node = treeview.dataItem(selectedNode); 
var data = { node: node }; //A value in JavaScript/JSON 
var result = template(data); 

$("<div />") 
    .html(editTemplate({ node: node})) 
    .appendTo("body") 
    .kendoWindow({ 
     modal: true, 
     //visible: true, 
     deactivate: function() { 
      this.destroy(); 
     } 
    }) 

$("#treeview").on("click", ".k-primary", function (e) { 
    var dialog = node.closest("[data-role=window]").getKendoWindow(); 
    var textbox = dialog.element.find(".k-textbox");   
    node.set("text", textbox.val());  
    dialog.close(); 
}) 

}

Answer 1

そのイベントハンドラが外部windoにapplyedする必要がありますtreeView

$("<div />") 
    .html(editTemplate({ node: node})) 
    .appendTo("body") 
    .kendoWindow({ 
     modal: true, 
     //visible: true, 
     deactivate: function() { 
      this.destroy(); 
     } 
    }) 
.on("click", ".k-primary", function (e) { 
    //e.preventDefault();   
    var dialog = $(e.currentTarget).closest("[data-role=window]").getKendoWindow(); 
    var textbox = dialog.element.find(".k-textbox");  
    node.text = undefined; // force refresh of dataItem 
    node.set("text", name);  
    dialog.close(); 
})