Refresh KendoUI TreeView after AJAX update

8 posts, 0 answers
  1. Daniel Eliades
    Daniel Eliades avatar
    1 posts
    Member since:
    Jul 2009

    Posted 30 Jan 2014 Link to this post

    Hello -

    I have the following TreeView in my application:

    @(Html.Kendo().TreeView()
                                .Name("treeview")
                                .ExpandAll(true)
                                .Events(events => events.Select("onTreeNodeSelected"))                                                          
                                .BindTo((IEnumerable<TreeViewItemModel>)ViewBag.NavigationTree))

    I have a button on the page that when clicked a KendoWindow gets displayed and allows the user to enter in text for a new node.  On the submit button within the KendoWindow it posts the AJAX form and the ViewBag.NavigationTree gets updated.

    How can I have the new node be added to the tree via AJAX?  Essentially I want to update the TreeView's BindTo when the ViewBag.NavigationTree gets updated via an AJAX call.

    Thanks in advance,
    Dan

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 03 Feb 2014 Link to this post

    Hello Daniel,

    Since the described TreeView is statically bound, you cannot use its typical load on demand functionality to refresh it. However, since you are sending the update to the server, you can use the client-side append method (or insertBefore / insertAfter methods) to insert the node that you are posting to the server.

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 18 Feb 2014 Link to this post

    Hi Alex,

    I have a situation where users can add tree nodes at run-time. They supply the name of the node and I create an object and update the database. The tree-view  gets the nodes from a controller on demand. I want to show every newly created node in the view through expanding the parent node of the created one. The parent node is also selected.
    Reading through the forum I found out that I can do as the code below shows and it works, but not for nodes which do not have any children, how to update the code to allow such nodes to expand as well.

    Best,

    Paul

    var treeView = $('#folders-treeview').data('kendoTreeView');
                        var selected = treeView.select();
                        if (treeView != null && selected != null) {

                            var selectedDataItem = treeView.dataItem(selected);
                            selectedDataItem.loaded(false);
                            selectedDataItem.load();

                            treeView.one("dataBound", function () {
                                treeView.expand(selected);
                            });
                        }

  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 18 Feb 2014 Link to this post

    The load method takes into account whether the node has children. Since you need to always fetch this information from the server, you need to set the node hasChildren field to true.

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Paul
    Paul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 18 Feb 2014 Link to this post

    Thank you for the replay. The thing is that I use controller to load the nodes and the hasChildren property is determined at the time of the request. Could I call the same controller from the piece of code I submitted above or should I start setting it statically. Actually I do not have such property at all, but if need be I can create one.
  7. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 19 Feb 2014 Link to this post

    Hello Paul,

    You can set it on the client-side, prior to loading the node:

    node.loaded(false);
    node.hasChildren = true;
    node.load();


    The flag will be reset after loading. We are considering to include this in the loaded(false) method, but need to check if there are any side-effects.

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Nathan
    Nathan avatar
    23 posts
    Member since:
    Jul 2012

    Posted 24 Mar 2014 Link to this post

    Hello Alex

    I am still new with Kendo and I'm not a fan of it to be honest.

    If I have a treeview, how can I make my onselect function call an action in a controller and refresh the page?

    Thanks
  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 26 Mar 2014 Link to this post

    Hello Nathan,

    This could be achieved by subscribing to the TreeView's select event. Once the event is triggered make an ajax request to the controller in question and refresh the page. For example: 
    function onSelect(e) {
        $.ajax({
            url: "/Controller/Action"
        }).success(function () {
            location.reload();
        })
    }
     

    Regards,
    Alexander Popov
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

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