2

I'm displaying all accounts in a visual force page where each row is having a first column as a '+'(expands).On clicking of symbol i wants to show related contacts under the same account.When I click on symbol account columns should be displayed in single row only and contacts should come below.

1 Answer 1

2

I am using the below code and you can customize for yourself too.... for displaying contacts and accounts

<apex:page tabstyle="Account" controller="nestedqueryexample" showheader="false">
<script>
        function switchMenu(obj,obj1,obj2) 
        {
            var el = document.getElementById(obj);                                       
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            }
            else {
            el.style.display = '';
            }
            var e2 = document.getElementById(obj1);                                       
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            }
            else {
            e2.style.display = '';
            }
             var e3 = document.getElementById(obj2);                                       
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            }
            else {
            e3.style.display = '';
            }

        }
</script>
    <apex:pageblock >     
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Team Members                                                                               
                    </apex:facet>
                    <apex:outputpanel id="plusimage">
                          <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expand - Team Member's"/> 
                    </apex:outputpanel>
                    <apex:outputpanel id="minusimage" style="display:none;">
                          <apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Collapse - Team Member's"/>
                    </apex:outputpanel>
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                                                <apex:variable value="{!0}" var="rowNum"/>
                                                <apex:repeat var="count" value="{!accdet.AccountTeamMembers}">
                                                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                                                </apex:repeat>
                            <apex:outputText rendered="{!rowNum=0}">  No Team Members  </apex:outputText>
                        <apex:pageblocktable value="{!accdet.AccountTeamMembers}" var="tm" rendered="{!rowNum>0}">
                            <apex:column headerValue="Team Member">
                                   <apex:outputfield value="{!tm.User.Name}"/>
                             </apex:column>
                             <apex:column headerValue="Role">
                                   <apex:outputfield value="{!tm.TeamMemberRole}"/>
                             </apex:column>                          
                        </apex:pageblocktable>
                   </apex:outputpanel>     
            </apex:column>
            <apex:column headervalue="Account Name">
                    <apex:outputtext value="{!accdet.Name}"/>
            </apex:column>
            <apex:column headervalue="Billing Country">
                    <apex:outputtext value="{!accdet.BillingCountry}"/>
            </apex:column>
        </apex:pageblocktable>
    </apex:pageblock>
</apex:page>

and my controller:

public class nestedqueryexample
{
  public List<Account> getaccsandtmember()
  {
      List<Account> accounts = [Select Id,(Select TeamMemberRole, User.Name From Account.AccountTeamMembers), Name, BillingCountry from Account];
      return accounts;
  }
}

and you can use the static resource for images what ever you like , i am using + and -

2
  • @Barteley...Thanks for post.It's working perfectly but the account columns like Account Name and Billing Country not coming above the contacts table..They are coming the side of contacts table
    – user8102
    Commented Jul 16, 2015 at 9:21
  • How can we tweak this to show the child record table "under" the row as opposed to within a column? I created a HTML table to contain two rows: one with all the columns, second is a hidden container for the child records. I just can't seem to get this to work. The {!$Component.inlinetablesec} doesn't seem to generate the correct id. I tried specifying the full id like {!$Component.theForm.myPanel.inlinetablesec} but no luck. Can you help? Commented Nov 2, 2015 at 16:34

You must log in to answer this question.