Recreating TreeView fails on alternate attempts

5 posts, 1 answers
  1. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jun 2011

    Posted 14 Jan 2015 Link to this post

    Hi,

    I have a TreeView in my application that needs to be rebuilt on request, but on the first attempt to recreate it fails, with the "loading..." message displayed permanently;

    A simple Fiddle to show the problem is at http://jsfiddle.net/Cantabrigian/vtmx15tm/4/     


    Clicking the "Make it button" makes the TreeView appear as expected, but if you press it again it just says "Loading.."; clicking the button a third time makes it appear correctly, and so on.  

    (Of course in my app the content of the TV may be different each time.)

    What do I need to do to make it reload correctly? Do I need to destroy the old version first somehow?

    Thanks,
    Andrew
  2. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jun 2011

    Posted 14 Jan 2015 Link to this post

    A couple of extra points I've noticed since posting my question:
     
    1. Although the TreeView appears to be created correctly on the later attempts, some of the functionality is not there. For example the check event is not fired (with console message: "Cannot read property 'set' of undefined"), and checkChildren doesn't work.

    2. In my app the Treeview has up to 9  "top-level" items (checkboxes), each with sub-items. The dataBound event appears to be called once for each of these , which causes me some problems as I am using this event to trigger some other actions (including Ajax calls). I would prefer not to have a single top-level node for the TreeView - is there any way to stop these multiple dataBound events, or to get a single even when the TreeView is fully built?
  3. Kendo UI is VS 2017 Ready
  4. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jun 2011

    Posted 14 Jan 2015 Link to this post

    I found a workaround for the original problem, which is to .remove() and re- .append() the div that contains the TreeView. This also fixes the problem of the check event etc not working.

    However I still have the problem of the dataBound event being called multiple times (even if I have a single top-level node), so I would still like a solution to that, and also any other (better?) suggestions you have for the original problem.

    Thanks
  5. Andrew
    Andrew avatar
    6 posts
    Member since:
    Jun 2011

    Posted 14 Jan 2015 Link to this post

    OK, I've solved the multiple firing of dataBound too, by checking the node property of the event passed to dataBound:
         dataBound: function (e){
              if (e.node) {
                   return; // this is for a sub-node - ignore
             } else {
           // final invocation of event - do additional processing
           }
    }      

    This solves all my immediate problems with the TreeView, but l'd still like to know if the workarounds I've used are the best ways.









  6. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 16 Jan 2015 Link to this post

    Hello Andrew,

    The recommended approach when reinitializing a widget is to destroy it first so that it can be properly disposed e.g.
    function makeTree() {
        kendo.destroy($("#TreeView"));
        $("#TreeView").kendoTreeView({
            dataSource: ds
        });
    }

    As for the dataBound event - an event that is triggered after all nodes have been rendered is not currently available. With the code that you provided for the dataBound event, the logic will indeed be executed only once but it will actually be in the first invocation and not the last. The node event argument will not be defined only when binding the top level items which do not have a parent node. I the logic should be executed after all nodes have been rendered then you will need to check if there are any leaf nodes that have children before executing the code.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready