Edit TreeView Node Text through Context Menu

Environment

Product Version	2018.2.516
Product	Progress® Kendo UI® TreeView for jQuery

Description

How can I edit the text of a TreeView node by using a context menu?

Solution

1. On right-clicking the node, show a ContextMenu.
2. Display a textbox in a Window.
3. Set the entered text in the textbox as node text.

<div id="treeview"></div>

<ul id="menu">
    <li>Edit Node</li>
</ul>

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

<script>
    var editTemplate = kendo.template($("#editTemplate").html());

    $("#treeview").kendoTreeView({
        dataSource: [
        {
            text: "foo", items: [
                { text: "bar" },
                { text: "baz" }
            ]
        }
        ]
    })

    $("#menu").kendoContextMenu({
        target: "#treeview",
        filter: ".k-treeview-leaf",
        select: function (e) {
            var node = $("#treeview").getKendoTreeView().dataItem($(e.target).closest(".k-treeview-item"));
            // create and open Window
            $("<div />")
                .html(editTemplate({ node: node }))
                .appendTo("body")
                .kendoWindow({
                    modal: true,
                    visible: false,
                    deactivate: function () {
                        this.destroy();
                    }
                })
                // bind the Save button's click handler
                .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.set("text", textbox.val());

                    dialog.close();
                })
                .getKendoWindow().center().open();
        }
    });
</script>

See Also

• API Reference of the TreeView.