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 

How to display treeview with checkbox for a static 5 values using jquery plugin which will be uploaded as static resource? can anyone give me a sample code?

Best Answer chosen by sharath T
thatheraherethatherahere
Hi Sharath,

Here is the working Tree View with Visualforce.
  
<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: 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].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>
</apex:page>


- thatherahere
 

All Answers

Abhilash Mishra 13Abhilash Mishra 13

I also had same requirement and found solution using  Dyna tree plugin.

http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html

you just need to pass your values in json format.

and you can use  input hidden to pass the selected keys values to controller.

upvote this answer  if it helps or let me know if you need more help.

Thanks
Abhilash
sharath Tsharath T
Thanks for the answer Abhilash I need to just display 5 static values like AAA BBB CCC DDD under All companies in tree view with checkboxes when i check "All companies" all the values inside it should be checked and i basically don't know about json. Can you suggest me a way how can I proceed with this?

Thanks
Sharath 
thatheraherethatherahere
Hi Sharath,

You can use KendoUI Tree View (http://demos.telerik.com/kendo-ui/treeview/checkboxes" target="_blank). It can fit for your requirement. Easy and simple to implement.

Thanks,
Govind Thathera
 
sharath Tsharath T
Thanks for you response Govind Thathera. I have embedded that code in <apex:page> tag still i could see only the headings such as check node and status. Should I implement any plugin for this?

Thanks,
Sharath
thatheraherethatherahere
Hi Sharath,

Here is the working Tree View with Visualforce.
  
<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: 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].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>
</apex:page>


- thatherahere
 
This was selected as the best answer
sharath Tsharath T
Thank you so much Govind Thathera. I have been struggling with this for the past two days. this help means a lot!!!

Thanks
Sharath
sharath Tsharath T
How to expand the treeview upon checking a root node checkbox in that code Govind Thathera?? Sorry for troubling you.

Thanks,
Sharath