Есть ли у них какой-либо способ получить выбранные узлы из KendoTreeView и показать их в другом KendoTreeView In Angular 5 - PullRequest
Новая
       56

Есть ли у них какой-либо способ получить выбранные узлы из KendoTreeView и показать их в другом KendoTreeView In Angular 5

1 голос
/ 04 ноября 2019

Я пытаюсь получить все выбранные узлы из KendoTreeView и отобразить древовидное представление только с выбранными значениями из предыдущего дерева.

Этого можно достичь?

Заранее спасибо.

1 Ответ

0 голосов
/ 04 ноября 2019

Конечно, это возможно, и ниже есть грубый способ сделать это, взятый из этой демонстрации : 

<!DOCTYPE html>
<html>
<head>
    <base href="https://demos.telerik.com/kendo-ui/treeview/checkboxes">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.common-fiori.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.fiori.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
    

</head>
<body>
<div id="example">

    <div class="demo-section k-content">
        <div>
            <h4>Check nodes</h4>
            <div id="treeview"></div>
            <hr>
            <div id="treeview2"></div>
        </div>
    </div>

    <script>
      	$("#treeview2").kendoTreeView();
        $("#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" }
                        ]
                    }
                ]
            }]
        });

        // function that gathers IDs of checked nodes
        function checkedNodeIds(nodes, checkedNodes) {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    checkedNodes.push(nodes[i]);
                }

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

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

            checkedNodeIds(treeView.dataSource.view(), checkedNodes);
          
          let treeView2 = $("#treeview2").data("kendoTreeView");
          treeView2.dataSource.data(checkedNodes);
        }
    </script>

    <style>
        #treeview .k-sprite,
        #treeview2 .k-sprite {
            background-image: url("../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder { background-position: 0 0; }
        .folder     { background-position: 0 -16px; }
        .pdf        { background-position: 0 -32px; }
        .html       { background-position: 0 -48px; }
        .image      { background-position: 0 -64px; }
    </style>

</div>


</body>
</html>

Демонстрация в Dojo

Дело в том, что вы должны извлечь выбранные узлы (как сделано с помощью checkedNodeIds()) изатем установите их в целевой источник данных древовидной структуры: 

$("#treeview2").data("kendoTreeView").dataSource.data(checkedNodes);
...