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

Two treeviews working together - error message

2 Answers 90 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jean-Pascal van der Endt
Top achievements
Rank 1
Jean-Pascal van der Endt asked on 07 Aug 2012, 11:45 AM
Hi,

I have two treeviews in one page, and upon selecting a node in treeview #1, I'm loading a new datasource in treeview #2 (depending on the selected node in #1, but that's a detail I'm omitting here).

This works fine the first time you select a node in #1. Treeview #2 displays the new data. In fact, it even works on subsequent selections, but an error occurs in #1: "Cannot read property 'uid' of undefined". Treeview #2 still shows the new data, but treeview #1 doesn't get round to highlighting the selected node, because of the error. I have no idea why this is happening.

The following example should show this error. This example code is based off of the standard Kendo demo for using a Hierarchical DataSource. My variation uses a new instance of the same datasource for both treeviews, which makes the example look rather useless, but hopefully it helps to make the point.

I tried the same thing with fixed data, i.e. a datasource that uses fixed, inline data, and that does seem to work.

<div id="treeview"></div>
 
<div id="treeview2"></div>
 
<script>
 
    function MakeTreeview(parent, child) {
        var serviceRoot = "http://demos.kendoui.com/service";
        homogeneous = new kendo.data.HierarchicalDataSource({
            transport: {
                read: {
                    url: serviceRoot + "/Employees",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "EmployeeId",
                    hasChildren: "HasEmployees"
                }
            }
        });
 
 
        $(parent).kendoTreeView({
            dataSource: homogeneous,
            dataTextField: "FullName",
            select: child != null ? function (e) {
                MakeTreeview(child, null);
            } : null
 
        });
 
    }
 
    MakeTreeview("#treeview", "#treeview2");
</script>


Any suggestions are greatly appreciated, thanks.

2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 07 Aug 2012, 01:03 PM
Hello Jean-pascal,

You cannot instantiate the treeview twice on the same element. However, you can remove the old treeview and re-create it, as shown in the updated jsbin.

Kind regards,
Alex Gyoshev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jean-Pascal van der Endt
Top achievements
Rank 1
answered on 07 Aug 2012, 01:53 PM
Hi Alex, thanks for that - makes sense.

The example on jsbin had a small problem, the reference to kendo.all.min.js was using an internal URL rather than a public one, but it worked when I changed it to http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js in a clone.

Thanks again!
Tags
TreeView
Asked by
Jean-Pascal van der Endt
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Jean-Pascal van der Endt
Top achievements
Rank 1
Share this question
or