You need to sign in to do that
Don't have an account?
Starting November 20, the site will be set to read-only.
On December 4, 2023,
Apex Code Development (90768)
General Development (55146)
Visualforce Development (37251)
Lightning (18265)
APIs and Integration (17146)
Trailhead (11680)
Formulas & Validation Rules Discussion (11337)
Other Salesforce Applications (8116)
Jobs Board (6655)
Force.com Sites & Site.com (4842)
Mobile (2694)
You need to sign in to do that
Don't have an account?
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
http://ludo.cubicphuse.nl/jquery-plugins/treeTable/doc/
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
http://www.forcetree.com/2011/04/tree-view-in-visualforce-page.html
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() {
$("#tree").treeview({
collapsed: true,
animated: "medium",
control:"#sidetreecontrol",
persist: "location"
});
})
</script>
<br/> <br/> <br/>
<!-- Tree -->
<div class="treeheader" style="height:0px;"> </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>
<ul>
<apex:repeat value="{!parent.parent}" var="child">
<li><span class="formattextcon"><apex:outputtext style="color:green;" escape="false" value="{!child.LastName}"/></span>
<ul>
<apex:repeat value="{!child.Cases}" var="gchildren">
<li> <span class="formattextcon"> <apex:outputtext escape="false" style="color:red;" value="{!gchildren.CaseNumber}"/> <b>||</b> <apex:outputtext escape="false" value="{!gchildren.Subject}"/> </span> </li>
</apex:repeat>
</ul>
</li>
</apex:repeat>
</ul>
</li>
</apex:repeat>
</ul>
<!-- End of Tree -->
</apex:page>
Controller:
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;
}
}