Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
naveen reddy 19naveen reddy 19 

Table within each row for a table in VF

Hi ,

 We need to query accounts along with contacts associated for each account and dispaly them in the following format.

1)Dispaly all accounts in a table
2)For each account we need to dispaly associated contacts in a child table for that account
i.e. For each row(account) we need to display contacts table(contacts for that account).

Can some one please help how to achieve this.

***Any help is really appreciated.

Thanks,
Naveen.
User-added image
Best Answer chosen by naveen reddy 19
Martijn SchwarzerMartijn Schwarzer
Hi Naveen,

As an alternative to the solution above from Jyothsna, you can also use a plain html table:

Visualforce page:
  
<apex:page controller="AccountContactHierarchy">
    <apex:form>
    	<apex:pageBlock title="Accounts and Contacts">
            <table border="1">
                <tr>
                	<th>Account Name</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
                <apex:repeat value="{!accounts}" var="a">
                    <tr>
                        <td>{!a.Name}</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <apex:repeat value="{!a.Contacts}" var="c">
                        <tr>
                            <td>&nbsp;</td>
                            <td>{!c.FirstName}</td>
                            <td>{!c.LastName}</td>
                            <td>{!c.MailingCity}</td>
                            <td>{!c.MailingState}</td>
                        </tr>
                    </apex:repeat>
                </apex:repeat>
            </table>
        </apex:pageBlock>
    </apex:form>
</apex:page>

And the controller:
  
public class AccountContactHierarchy {
    public List<Account> accounts {get; private set;}
    
    public AccountContactHierarchy(){
        this.accounts = [Select Id, Name, (Select Id, FirstName, LastName, MailingCity, MailingState from Contacts) From Account LIMIT 10];
	}
}

This will output the following table. Of course the look and feel can be adjusted as you like using css.

User-added image

I hope this helps!

Best regards,
Martijn Schwärzer

All Answers

JyothsnaJyothsna (Salesforce Developers) 
Hi Naveen,

Please chec kthe below sample code.

Visualforce page 
<apex:page controller="LookupHierarchy">
  <apex:form >
  <apex:pageBlock >
  <apex:pageBlockTable value="{!Account}" var="p">
  <apex:column headerValue="Parent name" value="{!p.name}"/>
  <apex:column >
  <apex:pageBlockTable value="{!p.contacts}" var="c">
  <apex:column value="{!c.Lastname}"  headerValue="Child Names"/>
  <apex:column value="{!c.phone}" />
  </apex:pageBlockTable>
  </apex:column>
  </apex:pageBlockTable>
 
 
  </apex:pageBlock>
  </apex:form>
  
</apex:page>
Controller
  
public with sharing class LookupHierarchy {

    public List<account> Account { get; set; }
    
    public List<contact> child { get; set; }

    
    public LookupHierarchy (){
       account =new List<account>();
       account=[select name,(select Lastname,phone from Contacts) from account];
       
       
    }
}

Output

User-added image

Hope this helps you!
Best Regards,
Jyothsna
 
Martijn SchwarzerMartijn Schwarzer
Hi Naveen,

As an alternative to the solution above from Jyothsna, you can also use a plain html table:

Visualforce page:
  
<apex:page controller="AccountContactHierarchy">
    <apex:form>
    	<apex:pageBlock title="Accounts and Contacts">
            <table border="1">
                <tr>
                	<th>Account Name</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>City</th>
                    <th>State</th>
                </tr>
                <apex:repeat value="{!accounts}" var="a">
                    <tr>
                        <td>{!a.Name}</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <apex:repeat value="{!a.Contacts}" var="c">
                        <tr>
                            <td>&nbsp;</td>
                            <td>{!c.FirstName}</td>
                            <td>{!c.LastName}</td>
                            <td>{!c.MailingCity}</td>
                            <td>{!c.MailingState}</td>
                        </tr>
                    </apex:repeat>
                </apex:repeat>
            </table>
        </apex:pageBlock>
    </apex:form>
</apex:page>

And the controller:
  
public class AccountContactHierarchy {
    public List<Account> accounts {get; private set;}
    
    public AccountContactHierarchy(){
        this.accounts = [Select Id, Name, (Select Id, FirstName, LastName, MailingCity, MailingState from Contacts) From Account LIMIT 10];
	}
}

This will output the following table. Of course the look and feel can be adjusted as you like using css.

User-added image

I hope this helps!

Best regards,
Martijn Schwärzer
This was selected as the best answer
naveen reddy 19naveen reddy 19
Hi Martin or Jyoshna,

 I need some enhancements to above requirement. I have posted it in below link.

https://developer.salesforce.com/forums/?state=id#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=OPENQUESTIONS&id=906F0000000DEjKIAW

Thanks,
Naveen.