Two treeviews working together - error message

3 posts, 1 answers
  1. Jean-Pascal van der Endt
    Jean-Pascal van der Endt avatar
    48 posts
    Member since:
    Jul 2010

    Posted 07 Aug 2012 Link to this post

    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.
  3. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 07 Aug 2012 Link to this post

    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!
  5. Jean-Pascal van der Endt
    Jean-Pascal van der Endt avatar
    48 posts
    Member since:
    Jul 2010

    Posted 07 Aug 2012 Link to this post

    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!
Back to Top