Refresh KendoUI TreeView after AJAX update

[Daniel Eliades]

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

[Alex Gyoshev]

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

[Paul]

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

[Alex Gyoshev]

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

[Paul]

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.

[Alex Gyoshev]

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

[Nathan]

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

[Alexander Popov]

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