Search code examples
javascriptkendo-uitreeviewkendo-treeview

Cannot seem to add Node to Kendo UI TreeView


I was trying to add Node from textbox to the existing treeview

Input

<input id="appendNodeText" value="Node" class="k-textbox">

Button

<button type="button" class="btn btn-blue" id="addTopLevel">Add Top Level Menu</button>

javascript

 <script>
     // button handler
      $("#addTopLevel").click(append);

     handleTextBox = function (callback) {
         return function (e) {
            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode) {
               callback(e);
             }
        };
     };

     var append = handleTextBox(function (e) {
     var selectedNode = treeview.select();
     console.log(selectedNode);
     // passing a falsy value as the second append() parameter
     // will append the new node to the root group
     if (selectedNode.length == 0) {
        selectedNode = null;
     }

     treeview.append({
            text: $("#appendNodeText").val()
            }, selectedNode);
     });

So I end up having this click event in which it passes in "append"

To be honest I don't understand the handleTextBox , nor the append

The treeview does "work" but I wonder if it is part of the issue

   var treeview = $("#treeview").kendoTreeView({
                                expanded: true,
                                dragAndDrop: true,
                                dataSource: homogeneous,
                                dataTextField: "ReportGroupName" //"name" //"id" // "FullName"
                                ,
                                change: function(e) {
                                    console.log("Change", this.select());
                                }
                            });

PER an Answer:

I tried this

$("#addTopLevel").click(function () {
    console.log('in this');
    if (treeview.select().length) {
        console.log('1');
        treeview.append({
            text: $("#appendNodeText").val()
        }, treeview.select());
    } else {
        //alert("please select tree node");
        console.log('2');
    }
});

console.log writes out 'in this' then '1'

So i'm not even selecting any node .... something must be wrong

here is my json

[{"Id":1,"ReportGroupName":"Standard Reports","ReportGroupNameResID":null,"SortOrder":1},{"Id":2,"ReportGroupName":"Custom Reports","ReportGroupNameResID":null,"SortOrder":2},{"Id":3,"ReportGroupName":"Retail Reports","ReportGroupNameResID":null,"SortOrder":3},{"Id":4,"ReportGroupName":"Admin Reports","ReportGroupNameResID":null,"SortOrder":5},{"Id":5,"ReportGroupName":"QA Reports","ReportGroupNameResID":null,"SortOrder":4}]


Solution

  • As i understood you want to append the textbox value as a node to selected node in the treeview. i have created a jsfiddle for the same with working functionality:-

    http://jsfiddle.net/GHdwR/468/

    click event for button:-

    $("#addTopLevel").click(function() {
        if (treeview.select().length) {
            treeview.append({
                text: $("#appendNodeText").val()
            }, treeview.select());
        } else {
            alert("please select tree node");
        }
    });