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

Refresh KendoUI TreeView after AJAX update

7 Answers 283 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Daniel Eliades
Top achievements
Rank 1
Daniel Eliades asked on 30 Jan 2014, 06:06 PM
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

7 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 03 Feb 2014, 08:23 AM
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!
0
Paul
Top achievements
Rank 1
answered on 18 Feb 2014, 10:10 AM
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);
                        });
                    }

0
Alex Gyoshev
Telerik team
answered on 18 Feb 2014, 11:39 AM

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!
0
Paul
Top achievements
Rank 1
answered on 18 Feb 2014, 02:05 PM
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.
0
Alex Gyoshev
Telerik team
answered on 19 Feb 2014, 07:39 AM
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!
0
Nathan
Top achievements
Rank 1
answered on 24 Mar 2014, 07:41 PM
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
0
Alexander Popov
Telerik team
answered on 26 Mar 2014, 02:16 PM
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.

 
Tags
TreeView
Asked by
Daniel Eliades
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Paul
Top achievements
Rank 1
Nathan
Top achievements
Rank 1
Alexander Popov
Telerik team
Share this question
or