Parent node checked only when expand (using SetDataSource)

2 posts, 0 answers
  1. Roberto
    Roberto avatar
    3 posts
    Member since:
    Dec 2012

    Posted 05 May Link to this post

    Example of this problem in Dojo

    How to resolve?

     

    <!DOCTYPE html>
    <html>
    <head>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-bootstrap.min.css" />
        <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.bootstrap.min.css" />
     
        <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
        <script src="//kendo.cdn.telerik.com/2016.2.504/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>
            </div>
            <div style="padding-top: 2em;">
                <h4>Status</h4>
                <p id="result">No nodes checked.</p>
            </div>
        </div>
     
        <script>
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true
                },
     
                check: onCheck
            });
           
          $("#treeview").data("kendoTreeView").setDataSource([{
                            id: 9, text: "Reports", spriteCssClass: "folder", items: [
                                { id: 10, text: "February.pdf",checked:true, 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].id);
                    }
     
                    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);
     
                if (checkedNodes.length > 0) {
                    message = "IDs of checked nodes: " + checkedNodes.join(",");
                } else {
                    message = "No nodes checked.";
                }
     
                $("#result").html(message);
            }
        </script>
     
        <style>
            #treeview .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>

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 09 May Link to this post

    Hello Roberto,

    Set loadOnDemand: false. This will instruct the TreeView that it should read the complete DataSource data, rather than only the first level, and it will infer the indeterminate state correctly. Here's the updated Dojo.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top