Need Help Binding A Kendo TreeView To A Local Data Source

StackOverflow https://stackoverflow.com//questions/12694773

Question

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?

<html xmlns="http://www.w3.org/1999/xhtml">
<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>
Was it helpful?

Solution

You have included kendo.data.min.js after kendo.all.min.js which should be removed because the latter includes the contents of the former.

Here is a working sample: http://jsbin.com/icojuv/1/edit

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top