HI All,

I have created a page with tree nodes. On first level i am showing Account, second level - Contact, third level - Case. Now i want to show the contact record detail page on the side of tree node when i click on any contact record from tree nodes. But i am not able to understand how to get that particular contact record id when i click on this. this is my page and code.

public class treenodes
{

    public PageReference contid() {
        return null;
    }

   // public ID contid{get;set;}
    /* Wrapper class to contain the nodes and their children */
    public class cNodes
    {    
        public ID contid{get;set;}
        public List<Contact> parent {get; set;}
        Public Account gparent {get;set;}
        public cNodes(Account  gp, List<Contact> p)
        {       
            parent = p;       
            gparent = gp;  
           // contid = ids;
           System.debug('contactid>>>>>>'+parent); 
           System.debug('Accountid>>>>>>'+gparent); 
        }  
    }
    /* 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;
    }
}

<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: "slow",                 
  control:"#sidetreecontrol",                 
  persist: "location"            
  });          }) 
  </script>  <br/> <br/> <br/> 
  <!-- Tree --> 
      <table style="width:100%">
          <tr>
              <td style="30%">
                  <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> &nbsp;
                                              <apex:outputtext escape="false" value="{!gchildren.Subject}"/> 
                                          </span> 
                                      </li>                             
                                  </apex:repeat>                        
                              </ul>                            
                          </li>                  
                        </apex:repeat>                
                    </ul>           
                </li>     
            </apex:repeat> 
        </ul> 
              </td>
              <td style="70%">
                  <apex:pageblock >
                      <apex:pageblocktable value="{!mainnodes}" var="a">
                          <apex:column value="{!a.gparent.Name}"/>
                      </apex:pageblocktable>
                  </apex:pageblock>
              </td>
          </tr>      
      </table>
        
        
  <!-- End of Tree -->        
</apex:page>

please help me..

Thanks,
Parteek