需要帮助将Kendo TreeView绑定到本地数据源

时间:2012-10-02 16:55:43

标签: c# javascript asp.net html kendo-ui

我正在尝试使用Kendo TreeView,我绝对没有运气绑定到本地数据源。我有一个简单的asp.net网页表单页面,我复制并粘贴了在线演示中的代码,但我做的任何事情都不会让这个工作。有什么想法吗?

<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>

1 个答案:

答案 0 :(得分:1)

你在kendo.all.min.js之后加入了kendo.data.min.js,因为后者包含了前者的内容,所以应该删除它。

以下是工作示例:http://jsbin.com/icojuv/1/edit