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];
    }    
}
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>
| improve this answer | |
  • @user5301 Updated my answer a bit... – Sergej Utko Jan 15 '14 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 Jan 15 '14 at 11:03

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.