function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sharath Tsharath T 

I'm trying to create a treeview with checkbox using Kendo ui. how to display the checked checkboxes names or id's or values etc

Here is my code:

<apex:page >
    <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/2016.1.112/styles/kendo.common-material.min.css" />
            <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
        
            <script src="https://kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
            <script src="https://kendo.cdn.telerik.com/2016.1.112/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: function(e) {
        this.expandRoot = e.node;

        this.expand($(this.expandRoot).find(".k-item").addBack());
      },
      
      


                        dataSource: [{
                            
                                    id: 1, text: "All Companies", expanded: false, spriteCssClass: "rootfolder", items: [
                                        { id: 2, text: "Economical",spriteCssClass: "image" },
                                        { id: 3, text: "Perth",spriteCssClass: "folder" },
                                        { id: 4, text: "Waterloo",spriteCssClass: "folder" }
                                    ]
                                
                                
                                
                            
                        }],
                        
          
                    });
            
           // 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);
                }
            }
        }

                </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>
</apex:page>