How Do I Use The TreeView? Online Demo Example Fail

2 posts, 0 answers
  1. Troy
    Troy avatar
    12 posts
    Member since:
    Jan 2011

    Posted 02 Oct 2012 Link to this post

    Hi Everyone.

    I'm trying to use the Kendo TreeView and I'm having absolutely no luck binding to a local data source. I have a simple asp.net web forms page and I copied and pasted the code from the online demos, but nothing I do will get this working. Any ideas?

    <head runat="server">
        <title>Kendo TreeView Demo</title>
        <link href="styles/kendo/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo/kendo.default.min.css" rel="stylesheet" />
        <style type="text/css">
            * { font-family: "Segoe UI", Arial, Helvetica, Sans-Serif; font-size: 12px; }
        </style>
        <script type="text/javascript" src="scripts/jquery.min.js"></script>
        <script type="text/javascript" src="scripts/kendo/kendo.all.min.js"></script>
        <script type="text/javascript" src="scripts/kendo/kendo.data.min.js"></script
        <script type="text/javascript">
            $(document).ready(function ()
            {
                var inlineDefault = new kendo.data.HierarchicalDataSource(
                {
                    data:
                    [
                        {
                            text: "Furniture",
                            items:
                            [
                                { text: "Tables & Chairs" },
                                { text: "Sofas" },
                                { text: "Occasional Furniture" }
                            ]
                        },
                        {
                            text: "Decor",
                            items:
                            [
                                { text: "Bed Linen" },
                                { text: "Curtains & Blinds" },
                                { text: "Carpets" }
                            ]
                        }
                    ]
                });
     
                $("#treeview-left").kendoTreeView(
                {
                    dataSource: inlineDefault
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <div id="treeview-left"></div>
        </div>
        </form>
    </body>
    </html>
  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 03 Oct 2012 Link to this post

    Hello Troy,

    The problem is caused by the second script include (kendo.data.js after kendo.all.js) -- if you remove it, the page should work fine. The kendo.all file includes all kendo scripts, so including the data script a second time is (a) unnecessary and (b) replaces the DataSource classes with new ones, which cause the instanceof checks to fail.

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