Kendo 树视图节点 Edit/Update

Question

我有一个 kendo 树视图显示数据。但现在我想编辑 Treeview 标签。尝试了几种方法并用谷歌搜索，但无法找到正确的解决方案。下面是我的代码任何人都可以建议 solution.My 如果我单击编辑图标并更改文本并单击保存但没有任何反应，则当前情况是文本框正在打开。

编辑模板

 <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

该事件处理程序应应用于外部 window，而不是 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();
})

Kendo 树视图节点 Edit/Update

Kendo Treeview node Edit/Update

asp.net

treeview

jquery

kendo-ui

kendo-treeview