1. Download the Jquery Plugin from here. Upload this Zip file into Static Resources with the name "Jtreeview".
2. Create the Apex Class "Treenodes" and paste the below code.
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;
}
}
3. Create a Visualforce Page "TreeViewDemo" and paste the below code.
<apex:page sidebar="false" controller="treenodes" showheader="false">
<!-- 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: false,
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>
Output:
2. Create the Apex Class "Treenodes" and paste the below code.
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;
}
}
3. Create a Visualforce Page "TreeViewDemo" and paste the below code.
<apex:page sidebar="false" controller="treenodes" showheader="false">
<!-- 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: false,
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>
Output:
Hi, good one. I can't find jquery files that needs to upload. Could you please provide those? The provided link is not working.
ReplyDeleteThanks in advance
did u got any replay form admin regarding jquey link.........!
DeleteI too need link to download file
DeleteHere is the complete article with the downloadable jQuery files http://www.forcetree.com/2011/04/tree-view-in-visualforce-page.html
DeleteI have the same problems.... Could you provide the link again?
ReplyDeleteguys you are still depending.
ReplyDeleteHe gave an idea about tree view and how it will work we have to try on our own to gain some knowledge.
Do the google search of Jquery treeview files and download them and use them according to your need.
I did the same thing. It worked.
Here is the complete article with the downloadable jQuery files http://www.forcetree.com/2011/04/tree-view-in-visualforce-page.html
ReplyDeleteCould you please provide the test classes for this example. I have almost same requirement
ReplyDeleteFor writing test classes - http://www.infallibletechie.com/search/label/Unit%20testing%20in%20Salesforce
DeleteI know how to write the test class and thanks for the reply
ReplyDeleteI have exactly the same scenario. that would be helpful, if you share the test classes for above scenario
Hi,
DeleteI don't have the test class for it.
I used it in my previous project.
Hi,
ReplyDeleteI need to add inlineEdit to outputText..
Can you help me on that?
Hi,
ReplyDeleteI need to add inlineEdit to outputText..
Can you help me on that?
Is it possible to edit this example to include three collapsible levels instead of only two collapsible levels?
ReplyDeleteWould that work for multilevel hierarchy as well?
ReplyDeleteI have a scenario where I need display users in a specific order upto 6 level
This comment has been removed by the author.
DeleteI tried to implement the same and works for multilevel hierarchy as well however, currently I have a scenario where in I need to represent a set of users in a hierarchy based on profiles. Can anyone suggest how to maintain the order for users?
ReplyDelete