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

Recreating TreeView fails on alternate attempts

4 Answers 256 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 14 Jan 2015, 10:27 AM
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

4 Answers, 1 is accepted

Sort by
0
Andrew
Top achievements
Rank 1
answered on 14 Jan 2015, 11:09 AM
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?
0
Andrew
Top achievements
Rank 1
answered on 14 Jan 2015, 12:11 PM
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
0
Andrew
Top achievements
Rank 1
answered on 14 Jan 2015, 07:18 PM
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.









0
Accepted
Daniel
Telerik team
answered on 16 Jan 2015, 08:49 AM
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!
 
Tags
TreeView
Asked by
Andrew
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or