OnDataBound firing multiple times and after RequestEnd

6 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 11 Aug Link to this post

    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

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 15 Aug Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 15 Aug in reply to Ivan Danchev Link to this post

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

     

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 16 Aug Link to this post

    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
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 19 Aug in reply to Ivan Danchev Link to this post

    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.
  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    829 posts

    Posted 23 Aug Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready