Two treeviews working together - error message

[Jean-Pascal van der Endt]

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.

[Alex Gyoshev]

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

[Jean-Pascal van der Endt]

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!