KendoUI undefined Node issue when trying to add to root parent node

Question

I have seen other questions with the same issue , the data seems the be the issue most of the time.

I did create a jsfiddle http://jsfiddle.net/gwvoqns8/

(always keep in mind that http has to be used, and not https )

that should demonstrate the problem

1. I want to have whatever is typed into the text box to display as another named node of whatever name...
2. The code I'm using seems to enforce me to selected an existing parent node and i do not want that.

Its a bit annoying why it is saying "undefined"

$("#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');
    }
});

Answer 1

Try this:

var ds = new kendo.data.HierarchicalDataSource({
    data: [
        {"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}
    ]
});


var treeview = $("#treeview").kendoTreeView({
    dataSource: ds,
    dataTextField: "ReportGroupName",
    loadOnDemand: false
}).data("kendoTreeView");

treeview.expand(".k-item");

$("#addTopLevel").click(function(e) {
    var selectedNode = treeview.select();

    // 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({
        ReportGroupName: $("#appendNodeText").val()
    }, selectedNode);
});