如何从剑道树视图级联剑道下拉列表答案

【问题标题】：How to cascade kendo dropdownlist from kendo tree view如何从剑道树视图级联剑道下拉列表
【发布时间】：2016-02-16 05:10:46
【问题描述】：

我是剑道树视图的新手，目前我正在尝试根据剑道树视图选中的复选框值加载剑道下拉列表的值。我正在获取剑道树视图检查节点的选定值，但无法级联下拉列表使用这些树值。任何人都可以就我的问题提出一些建议。

【问题讨论】：

标签： jquery kendo-ui telerik kendo-treeview kendo-dropdown

【解决方案1】：

请尝试以下代码 sn-p。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

    <div id="treeview"></div>
    <div id="color"></div>
    <script>
        $(document).ready(function () {
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                check: onCheck,

                dataSource: [{
                    id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                        {
                            id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                                { id: 3, text: "about.html", spriteCssClass: "html" },
                                { id: 4, text: "index.html", spriteCssClass: "html" },
                                { id: 5, text: "logo.png", spriteCssClass: "image" }
                            ]
                        },
                        {
                            id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                                { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                                { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                            ]
                        },
                        {
                            id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                                { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                                { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                            ]
                        }
                    ]
                }]
            });
            $("#color").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value"
            });

        });
        function onCheck(arg) {
            var checkedNodes = [],
            treeView = $("#treeview").data("kendoTreeView"),
            message;
            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            //convert array to CSV
            var selectedIDs = checkedNodes.join(",");
            var ddl = $("#color").data("kendoDropDownList");

            // for testing purpose I have created dummy collection.
            var data = [
                       { text: "Red", value: "1" },
                       { text: selectedIDs, value: "2" },
                       { text: "Grey", value: "3" }
            ];
            ddl.setDataSource(data);

        }
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    checkedNodes.push(nodes[i].id);
                }
                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }


    </script>
</body>
</html>

如果有任何问题，请告诉我。

【讨论】：

感谢您的快速回复，它的工作完美。我已经实现了我想要的功能，这与您提供的代码几乎相同。