function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Checkbox in a treeview

Hai ,


How  can I add a checkbox for expanding and collapsing  a treeview ?



Anup JadhavAnup Jadhav

Without understanding your treeview implementation it's impossible to answer your question. Did you use a custom javascript library to build your treeview? Or did you build your own bespoke "treeview" functionality using visualforce, apex, and your bare hands?


- Anup


There are lot of javascript table plugin.

I once implemented this jquery tree table plugin


You just need to render your content in a simple table format in in certain structure and that's it.You can see the example table html that you need to render from the visual force page in the link above.And then with proper data structure on your background you are all set to go.


It has expand collapse feature and adding a check box is just adding another coulumn in your table.


Hope it helps.


I have made my tree view with jquery from


this link

sharath Tsharath T
How  can I add checkbox to add this output? This is the code and it is taken from this link

VF page:
<apex:page sidebar="true" controller="treenodes" showheader="true">
<!-- Include the Jquery Script files -->
    <link rel="stylesheet" href="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.css')}"/>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.cookie.js')}" type="text/javascript"></script>
    <script src="{!URLFOR($Resource.Jtreeview,'Jquerytreeview/jquery.treeview.js')}" type="text/javascript"></script>
<!-- End of Javascript files -->
<script type="text/javascript">
        $(function() {
                collapsed: true,
                animated: "medium",
                persist: "location"
<br/> <br/> <br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;">&nbsp;</div>
<div id="sidetreecontrol"><a href="?#"><font style="color:blue;">Collapse All</font></a> | <a href="?#"><font style="color:blue;">Expand All</font></a></div>
<ul id="tree">
    <apex:repeat value="{!mainnodes}" var="parent">
        <li><strong><apex:outputtext style="color:blue;" escape="false" value="{!parent.gparent.Name}"/></strong>
                 <apex:repeat value="{!parent.parent}" var="child">
                    <li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>
                            <apex:repeat value="{!child.Cases}" var="gchildren">
                               <li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> &nbsp;<apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>
<!-- End of Tree -->       

public class treenodes {

    /* Wrapper class to contain the nodes and their children */
public class cNodes

 public List<Contact> parent {get; set;}
 Public Account gparent {get;set;}

 public cNodes(Account  gp, List<Contact> p)
     parent = p;
     gparent = gp;
/* end of Wrapper class */ 

Public List<cNodes> hierarchy;

Public List<cNodes> getmainnodes()
    hierarchy = new List<cNodes>();
    List<Account> tempparent = [Select Id,Name from Account];
    for (Integer i =0; i< tempparent.size() ; i++)
        List<Contact> tempchildren = [Select Id,FirstName,LastName,(Select Id,CaseNumber,Subject from Cases) from Contact where AccountId = :tempparent[i].Id];
        hierarchy.add(new cNodes(tempparent[i],tempchildren));
    return hierarchy;

Here is my OutputI want the checkbox something like this
Hi Sharath - I know this is a very old post, but just wondering if you were able a solution for your above requirement, Even I am looking to build something similar to what you were asking. (Collapsible tree view with checkbox selections). If you were able to implement it, can you please share the code snippet. Appreciate it. Thanks