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.

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 -

  • @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 – Bujji Jul 16 '15 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? – Lightning Evangelist Nov 2 '15 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.