This is a migrated thread and some comments may be shown as answers.

Refresh Treeview after adding item

3 Answers 616 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Laurie
Top achievements
Rank 2
Laurie asked on 13 Apr 2015, 04:02 PM

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

3 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 15 Apr 2015, 06:46 AM

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
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Laurie
Top achievements
Rank 2
answered on 15 Apr 2015, 04:05 PM

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

0
Laurie
Top achievements
Rank 2
answered on 15 Apr 2015, 08:47 PM

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!

Tags
TreeView
Asked by
Laurie
Top achievements
Rank 2
Answers by
Alex Gyoshev
Telerik team
Laurie
Top achievements
Rank 2
Share this question
or