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

OnDataBound firing multiple times and after RequestEnd

5 Answers 757 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 11 Aug 2016, 10:31 AM

I have a function that takes an id of a node, and expands the treeview so the node is showing. This is necessary as I need to refresh the treeview as items are added and edited.

I'm loading all the data in one go, from am AJAX call.

The code works when fired from a button, however I need it to be fired once the treeview data has finished loading. Unfortunately the onDataBound event seems to fire multiple times, depending on how many nodes the treeview contains. I did try using the datasource requestEnd event, however this seems to fire before the onDataBound events.

How can I detect that the treeview data has loaded, and the treeview is ready to have my expand function called?

The treeview definition is:-

@(Html.Kendo().TreeView()
                   .Name("Treeview")
                   .ExpandAll(false)
                   .LoadOnDemand(false)
                   .HtmlAttributes(new { style = "display: inline-block;" })
                   .DataTextField("Text")
 
                   .Events(e =>
                       {
 
                           e.DragStart("menuDragStart");
                           e.DataBound("onDataBound");
                       })
                   .DragAndDrop(true)
                            .DataImageUrlField("ImageUrl")
                   .DataSource(ds => ds
                       .Model(m => m
                           .Id("Id")
                           .HasChildren("HasChildren")
                           .Children("Items")
                           )
                           .Events(e=>e.RequestEnd("requestEnd"))
 
                   .Read(r => r.Action("GetMenuTreeItems", "Menu")
 
                           )
                           )
                           .HtmlAttributes(new { style = "width:480px;height:600px;" })
 
                   )

Thanks

 

5 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 15 Aug 2016, 08:59 AM
Hello Andrew,

There is no event more suitable for detecting the TreeView has been loaded than the DataBound event. As you have noticed the datasource's RequestEnd event fires before DataBound, whereas the DataBound event fires after the datasource's Change event is processed.
If we use the Binding to remote data demo as an example, placing a debugger in the RequestEnd handler shows that the DataBound event is fired every time nodes are loaded, for example it will fire once if you expand Andrew Fuller, after its child nodes are loaded. If you then click to expand Steven Buchanan after its child nodes are loaded it will fire again, i.e. the number of nodes does not determine whether the event will fire, it is triggered whenever nodes are loaded.

Regards,
Ivan Danchev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 15 Aug 2016, 09:04 AM

Ivan,

Then how do I detect when the treeview has loaded and is ready to be iterated over (so I can expand to the node the user has been working on)?

 

0
Ivan Danchev
Telerik team
answered on 16 Aug 2016, 01:35 PM
Hello Andrew,

There is no event that fires after the DataBound event when all nodes are loaded. In addition, when using remote data the DataBound event firing multiple times cannot be prevented as it fires every time the rendered state of the TreeView changes: loading, adding, removing nodes. The event fires multiple times even with LoadOnDemand disabled,  which I see you have disabled for your TreeView.
Although not a good or recommended workaround, since the time required for the loading of the TreeView will vary, you could set a timeout in the DataBound event handler. With LoadOnDemand disabled and a reasonable time to wait depending on the amount of items you are loading the code will be executed after all nodes have been loaded:
function onDataBound(e) {
    setTimeout(function myfunction() {
        var treeView = $("#treeview").data('kendoTreeview');
        //...
       
    }, 1000);
}


Regards,
Ivan Danchev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 19 Aug 2016, 10:34 AM
Thanks. This sort of works, but is far from an ideal solution. Much better if when the TreeView was not LoadOnDemand, the OnDataBound event only fired once.
0
Ivan Danchev
Telerik team
answered on 23 Aug 2016, 06:34 AM
Hello Andrew,

I would suggest voting for the following item logged in our Feedback Portal.

Regards,
Ivan Danchev
Telerik by Progress
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TreeView
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Ivan Danchev
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or