CODEWITHSUNDEEP
treeviewappendkendo-uiremovechild
CipherDarkness
CipherDarkness

Reputation: 214

Kendo UI Treeview Add/Remove Nodes

I have a Kendo UI Treeview with an external json file as a Hierarchical Data Source on an html page.

I want to add and remove nodes from the treeview and I followed the demo on the Kendo page but I get a

TypeError: c.replace is not a function on jquery.min.js:2 on Web Console for the remove

and a

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy on jquery.min.js:2 on Web Console for the append..

My code is:

$(document).ready(function() {
            $.getJSON("OnTheSpotDATA/" + parent.accountID + "/" + parent.username + "/" + "tree.json", function (data) {
                var treeview = $("#treeview").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: kendo.observableHierarchy(data)
                });
                $(".k-treeview").data("kendoTreeView").bind("dragstart", function(e) {
                    if (e.sourceNode.childNodes.length > 1) {
                        e.preventDefault();
                    }
                });
                $("#removeNode").click(function() {
                    var selectedNode = treeview.select();

                    treeview.remove(selectedNode);
                });
                $("#appendNodeToSelected").click(function() {
                    var selectedNode = treeview.select();

                    if (selectedNode.length == 0) {
                        selectedNode = null;
                    }

                    var nodeText=prompt("Please enter desired Node name","Default");

                    if (nodeText == null) {
                        return;
                    }

                    treeview.append({
                        text: nodeText
                    }, selectedNode);
                });
            })

What am I doing wrong? Any way to fix this?I suppose it should be working right..

Upvotes: 1

Views: 8610

Answers (1)

OnaBai
OnaBai

Reputation: 40887

You forgot including data("kendoTreeView") in the treeview.select() it should read: treeview.data("kendoTreeView").select()

Also a question of reducing your code (style). I do prefer to define the treeview already including data("kendoTreeView") and also the events. Something like:

var treeview = $("#treeview").kendoTreeView({
    dragAndDrop:true,
    dataSource :kendo.observableHierarchy(data),
    dragstart  :function (e) {
        if (e.sourceNode.childNodes.length > 1) {
            e.preventDefault();
        }
    }
}).data("kendoTreeView");

Upvotes: 3

Related Questions