KendoUI undefined Node issue when trying to add to

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

I was noticing that you could just do this

treeview.append({
    ReportGroupName: $("#appendNodeText").val()
}, null);

However, OP answer would be better as then you will have the ability to add to children nodes if you wanted to, even though so said you didn't want to.

cheers

Answer 2

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);
});