7

Visualforce Page:

<apex:page controller="sample1">
    <apex:pageBlock >
        <apex:pageBlockTable value="{!acct}" var="a">
            <apex:column value="{!a.Name}"/>
            <apex:repeat value="{!a.Contacts}" var="c">
                <apex:column value="{!c.Name}"/>
            </apex:repeat>
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

Apex Class:

public class sample1
{    
    public List<Account> acct {get;set;}
    public sample1()
    {
        acct = [SELECT Name, (SELECT Name, Email FROM Contacts) FROM Account limit 5];
    }    
}

1 Answer 1

8

I would try to use first repeat and then insert a pageBlockSection for the parent and a pageBlockTable for the children. This will give a look & feel that you need:

<apex:page controller="sample1">
    <apex:pageBlock>

    <apex:repeat value="{!acct}" var="a">

        <apex:pageBlockSection>
            <apex:outputField value="{!a.Name}"/>
        </apex:pageBlockSection>

        <apex:pageBlockTable value="{!a.Contacts}" var="c">
            <apex:column value="{!c.Name}"/>
        </apex:pageBlockTable>

    </apex:repeat>

    </apex:pageBlock>
</apex:page>

Or you can use separate pageBlocks for each account that looks a bit better for me:

<apex:repeat value="{!accs}" var="a">

    <apex:pageBlock title="{!a.Name}">
        <apex:pageBlockSection>
            <apex:outputField value="{!a.Phone}"/>
        </apex:pageBlockSection>

        <apex:pageBlockTable   value="{!a.Contacts}" var="c">
            <apex:facet name="header">Contacts</apex:facet>
            <apex:column value="{!c.Name}"/>
        </apex:pageBlockTable>
    </apex:pageBlock>

</apex:repeat>

Looks like this then:

enter image description here

If you want to show / hide contacts table on button click just wrap the table with a outputPanel and assign a unique class name to it. Then use a simple javascript function to show or hide contacts:

<script>
function toggleContacts(className){
    elem = document.getElementsByClassName(className)[0];
    if(elem.style.display == 'none')
        elem.style.display = 'block';
    else
        elem.style.display = 'none';
}
</script>

<apex:form >

    <apex:repeat value="{!accs}" var="a">

        <apex:pageBlock title="{!a.Name}">
            <apex:pageBlockButtons location="top">
                <input type="button" onclick="toggleContacts('tbl-{!a.id}');" value="Show/Hide contacts" class="btn" /> 
            </apex:pageBlockButtons>
            <apex:pageBlockSection >
                <apex:outputField value="{!a.Phone}"/>
            </apex:pageBlockSection>

            <apex:outputPanel styleClass="tbl-{!a.id}" style="display:none;">
            <apex:pageBlockTable value="{!a.Contacts}" var="c">
                <apex:facet name="header">Contacts</apex:facet>
                <apex:column value="{!c.Name}"/>
            </apex:pageBlockTable>
            </apex:outputPanel>
        </apex:pageBlock>

    </apex:repeat>

</apex:form>
2
  • @user5301 Updated my answer a bit... Commented Jan 15, 2014 at 10:55
  • @mastOr when i click on account name at that time only contacts must mt visiable in visualforce page other wise only account name is visiable on visualforce page for that what i have to do..
    – Sathya
    Commented Jan 15, 2014 at 11:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .