Refresh Treeview after adding item

[Laurie]

I'm adding an item and then wanting to refresh the TreeView. It works every other time.  The node is always added, but the treeview is refreshed to display it only after I click to add another node. At that time, both new nodes show up. I'm guessing that the first ajax call hasn't completed when the treeview.dataSource.read() statement is reached. Is there a way to execute a "wait" until the AddNode statement has completed?

Here's my javascript:

// Add Node
$("#createCategory").click(function () {
    var name = $("#newCategory").val();
    if (name != "") {
        $.ajax({
            url: '@Url.Action("AddNode","Categories")',
            type: "POST",
            data: {
                CategoryName: name
            }
        });
        kendoConsole.log("Adding " + name);
        //var treeview = $("#treeview").data("kendoTreeView");
        treeview.dataSource.read();

    }
    else {
        kendoConsole.log("Please enter non-empty name");
    }
    $("#newCategory").val("")
    $("#newCategory").focus()
});

[Alex Gyoshev]

Hello Laurie,

Based on your description, it appears that the TreeView refresh needs to wait for the AJAX request for "Categories/AddNode" to complete:

       $.ajax({
            url: '@Url.Action("AddNode","Categories")',
            type: "POST",
            data: {
                CategoryName: name
            },
            success: function() {
                var treeview = $("#treeview").data("kendoTreeView");           
                treeview.dataSource.read();
            }
        });

 

Regards,
Alex Gyoshev
Telerik

 

 

[Laurie]

Alex,

That works most of the time. I think what was happening was that I'd already defined my treeview outside of the function, so by merely deleting/commenting out the treeview initializer line, I got it to work consistently. It looks like this:

// Add Node
$("#createCategory").click(function () {
    var name = $("#newCategory").val();
    if (name != "") {
        $.ajax({
            url: '@Url.Action("AddNode","Categories")',
            type: "POST",
            data: {
                CategoryName: name
            },
            success: function() {
                //var treeview = $("#treeview").data("kendoTreeView");
                treeview.dataSource.read();
            }
        });
        kendoConsole.log("Adding " + name);
    }
    else {
        kendoConsole.log("Please enter non-empty name");
    }
    $("#newCategory").val("")
    $("#newCategory").focus()
});

 

Thanks.

Laurie

[Laurie]

Figured out why it wasn't working for me at first.  My treeview definition statement needs to read like this:

var treeview = $("#treeview").data("categories");

rather than

var treeview = $("#treeview").data("kendoTreeView");

It works if I change "kendoTreeView" to "categories" or if I comment out the line and use my treeview var that's defined outside of the function.

My bad.

Thanks, Alex!