OnDataBound firing multiple times and after RequestEnd

[AP]

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

 

[Ivan Danchev]

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

[AP]

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)?

 

[Ivan Danchev]

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

[AP]

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.

[Ivan Danchev]

Hello Andrew,

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

Regards,
Ivan Danchev
Telerik by Progress