+ Start a Discussion
chtom3chtom3 

pageBlockSections are not collapsible when used inside a repeat tag

I am trying to set up a shipping fulfillment page that lists opportunities and the products that need to be shipped underneath.  The problem is the list will grow very long if the pageBlockSections (one for each opportunity) cannot be collapsed.  When I use a repeat tag to list the opportunity as pageBlockSections with the products for the opportunity listed inside the pageBlockSection the collapse function throws a javascript error.  Everything looks fine, but the pageBlockSection cannot be collapsed.  Here is the VF code:

 

<apex:page standardController="Promotion_Registration_Premium__c" extensions="premiumFulfillmentControllerExt"> <div style="color:red;font-weight:bold;"><apex:messages /></div> <apex:pageBlock title="Premium Fulfillment"> <apex:repeat value="{!premiums}" var="premium" id="theRepeat"> <apex:pageBlockSection id="section" title="{!premium.opportunityName}" columns="1"> <apex:form > <apex:pageBlockSectionItem > <table width="100%" cellpadding="5"> <tr> <td width="15%" style="vertical-align:middle"> <div align="right"><strong>Ship To Name:</strong> </div> </td> <td width="35%" style="vertical-align:middle"> {!premium.shipToName} </td> <td width="15%" style="vertical-align:middle"> <div align="right"><strong>Ship To Address: </strong></div> </td> <td width="35%" style="vertical-align:middle"> {!premium.shipToAddress}<br/>{!premium.shipToCity}, &nbsp; {!premium.shipToState} &nbsp; {!premium.shipToPostalCode} <br/> {!premium.shipToCountry} </td> </tr> </table> </apex:pageBlockSectionItem> <apex:pageBlockSectionItem > <apex:dataTable value="{!premium.premiums}" var="prp" width="100%" id="premiumTable"> <apex:column width="25%" headerValue="Product" ><apex:outputField value="{!prp.Product__c}"/></apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="right">Quantity Ordered</div></apex:facet> <div align="right"><apex:outputField value="{!prp.Quantity__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="center">Shipped Via</div></apex:facet> <div align="center"><apex:inputField value="{!prp.Shipped_Via__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="center">Tracking Number</div></apex:facet> <div align="center"><apex:inputField value="{!prp.Tracking_Number__c}"/></div> </apex:column> <apex:column width="15%"> <apex:facet name="header"><div align="right">Quantity Shipped</div></apex:facet> <div align="right"><apex:inputField value="{!prp.Quantity_Shipped__c}"/></div> </apex:column> <apex:column width="15%"> <div align="center"> <apex:commandLink value="Mark as Shipped" action="{!markItemAsShipped}"> <apex:param name="premId" value="{!prp.Id}"/> </apex:commandLink> </div> </apex:column> </apex:dataTable> </apex:pageBlockSectionItem> </apex:form> </apex:pageBlockSection> </apex:repeat> </apex:pageBlock> </apex:page>

 

Thanks in advance for any help.

Best Answer chosen by Admin (Salesforce Developers) 
JoliJoli

For some reason the collapse starts working if you put another pageBlockSection (which can be hidden) before your repeat:

 

<apex:pageBlockSection title="Title" collapsible="true" rendered="false"/>            
    <apex:repeat value="{!blah}" var="b">  
        <apex:pageBlockSection collapsible="true" title="myTitle">
            more stuff
        </apex:pageblockSection> 
    </apex:repeat> 

I wish I could take credit for figuring this out, but I found the answer in another thread :)

All Answers

rJorgensenrJorgensen
I am having the same issue. Is this just a bug, or is there a way to make pageBlockSections collapsible inside of a repeat?
admintrmpadmintrmp

Also having this problem.

This seems to happen on random pageBlockSection tags for me so I can't tell what the problem is.

Chirag MehtaChirag Mehta
Did anyone found any useful solution or any work-arounds, please share!
FinnArildFinnArild
I also have this problem. Would be nice with a fix.
David81David81

Count me in as one with an issue with pageBlockSections not being collapsible within a repeat. Anyone have a solution?

JoliJoli

For some reason the collapse starts working if you put another pageBlockSection (which can be hidden) before your repeat:

 

<apex:pageBlockSection title="Title" collapsible="true" rendered="false"/>            
    <apex:repeat value="{!blah}" var="b">  
        <apex:pageBlockSection collapsible="true" title="myTitle">
            more stuff
        </apex:pageblockSection> 
    </apex:repeat> 

I wish I could take credit for figuring this out, but I found the answer in another thread :)

This was selected as the best answer
David81David81

I found that other thread as well. I think something funny happens with the javascript function that is needed to do the twisting.

 

If the section is within the repeat, it doesn't load the script (probably by design to prevent the script being loaded repeatedly). The hidden page block section brings with it the needed javascript which can then be called by the other sections.

 

 

Chirag MehtaChirag Mehta

This works. Thanks Joli!