CODEWITHSUNDEEP
jquerykendo-uitelerikkendo-treeviewkendo-dropdown
Krishna Mani
Krishna Mani

Reputation: 177

How to cascade kendo dropdownlist from kendo tree view

i am new to kendo treeview, presently i am trying to load the values of kendo dropdownlist based on kendo treeview checked checkbox values.i am abe to get the selected values of kendo treeview checked nodes, but not able to cascade the dropdownlist using those tree values. can any one give some suggestion regarding my problem.

Upvotes: 1

Views: 1201

Answers (1)

Jayesh Goyani
Jayesh Goyani

Reputation: 11154

Please try with the below code snippet.

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

Let me know if any concern.

Upvotes: 1

Related Questions