Kendo Treeview checked Get parent node on checking child nodes

1

votes

enter image description hereI´m trying to use a treeview with checkboxes for definition User Rights. (2 actions - enabled/disabled right) How can I to get value (id) from parent node ?

Kendo tree view

kendo-uitelerikkendo-treeview

0

votes

This example will return the parent id for the selected node.

treeView.select().parentNode().id;

If you need to find the parent for a specific node, you must specify a selector in the select() function: treeView.select($("search criteria"))

If you want to loop in the parent, you can do this

var parentNode = treeView.select().parentNode();
while (parentNode) {
    //Add your parent logic here
    //...

    parentNode = parent.parentNode();
}

0

votes

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="http://code.jquery.com/jquery-1.9.1.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>
    <p id="result">No nodes checked.</p>
    <script>
        $(document).ready(function () {
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },

                check: onCheck,

                dataSource: [{
                    id: 1, text: "1", expanded: true, items: [
                        {
                            id: 2, text: "2", expanded: true, items: [
                                { id: 3, text: "3" },
                                { id: 4, text: "4" },
                                { id: 5, text: "5" }
                            ]
                        },
                        {
                            id: 6, text: "6", expanded: true, items: [
                                { id: 7, text: "7" },
                                { id: 8, text: "8" },
                            ]
                        },
                        {
                            id: 9, text: "9", expanded: true, items: [
                                { id: 10, text: "10" },
                                { id: 11, text: "11" },
                                { id: 12, text: "12", expanded: true, items: [{ id: 13, text: "13", expanded: true, items: [{ id: 14, text: "14" }, { id: 15, text: "15" }] }] }
                            ]
                        }
                    ]
                }]
            });
        });
        // function that gathers IDs of checked nodes
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    getParentIds(nodes[i], checkedNodes);
                    checkedNodes.push(nodes[i].id);
                }

                if (nodes[i].hasChildren) {
                    checkedNodeIds(nodes[i].children.view(), checkedNodes);
                }
            }
        }

        function getParentIds(node, checkedNodes) {
            if (node.parent() && node.parent().parent() && checkedNodes.indexOf(node.parent().parent().id) == -1) {
                getParentIds(node.parent().parent(), checkedNodes);
                checkedNodes.push(node.parent().parent().id);
            }
        }

        // show checked node IDs on datasource change
        function onCheck() {
            var checkedNodes = [],
                treeView = $("#treeview").data("kendoTreeView"),
                message;

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);

            if (checkedNodes.length > 0) {
                message = "IDs of checked nodes: " + checkedNodes.join(",");
            } else {
                message = "No nodes checked.";
            }

            $("#result").html(message);
        }
    </script>
</body>
</html>

Let me know if any concern.

Kendo Treeview checked Get parent node on checking child nodes

2 Answers