Refresh Treeview after adding item

4 posts, 1 answers
  1. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 13 Apr 2015 Link to this post

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

  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 15 Apr 2015 Link to this post

    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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 15 Apr 2015 in reply to Alex Gyoshev Link to this post

    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

  5. Laurie
    Laurie avatar
    141 posts
    Member since:
    Feb 2007

    Posted 15 Apr 2015 in reply to Laurie Link to this post

    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!

Back to Top
UI for ASP.NET MVC is VS 2017 Ready