function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Roger PavelleRoger Pavelle 

Several PanelGrid/PanelGroup questions

I am having several issues when using a combination of PanelGrid and PanelGroup:

1)  I have two PanelGroup tags inside the PanelGrid.  How to I get them to both top align?
2)  How do I get the two PanelGroups to fit nicely on a page.  While I could try setting the width attribute, I am planning on putting this page into a mobile app and therefore don't want to specify something that may not be practical in use.
3)  One of the PanelGroup tags has many collapsible PageBlockSection tags.  When I added them to the PanelGroup they no longer collapse.  What do I need to do to make them collapsible once again?

Thanks.
Best Answer chosen by Roger Pavelle
William TranWilliam Tran
Roger, 

Here you go.  Feel free to tweak it as needed.

I didn't format it so you can see partly what I did (all lines that are not formatted)

Thx
  
<apex:page setup="false" controller="BoleteController">
    <apex:form >

<apex:panelGrid columns="2" >
<apex:panelGroup >
       
        <apex:pageBlock title="Bolete Filtered Search">

            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Edibility Filters" columns="1" collapsible="true">
                <apex:inputCheckbox label="Choice" id="edibilityChoiceChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="0"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               

                <apex:inputCheckbox label="Avoid" id="edibilityAvoidChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="3"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>
            </apex:pageBlockSection>
            </apex:outputPanel>
            <!--end Edibility filters-->

            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Pore Filters" columns="1">

                <apex:pageBlockSection title="Pore Color Filters:  Primary Pore Color Is..." columns="2">


                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Red, Pink, Purple or Orange" ></apex:outputLabel>
                </apex:pageBlockSectionItem>


                  <apex:pageBlockSectionItem >

                    <apex:inputCheckbox label="Red, Pink, Purple or Orange" id="poreColorRedChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="4"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                 </apex:pageBlockSectionItem>


                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Black, Dark Brown or Dark Gray" ></apex:outputLabel>
                </apex:pageBlockSectionItem>

 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Black, Dark Brown or Dark Gray" id="poreColorBlackChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="8"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
 </apex:pageBlockSectionItem>
                </apex:pageBlockSection>

                <apex:pageBlockSection title="Pore Size Filters" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Pores Tiny" ></apex:outputLabel>
                </apex:pageBlockSectionItem>

 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Pores Tiny" id="poreSizeTinyChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="9"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
 </apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
                    <apex:outputLabel value="Pores Huge" ></apex:outputLabel>
                </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Pores Huge" id="poreSizeHugeChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="10"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
               </apex:pageBlockSection>

              
                <apex:pageBlockSection title="Pore Staining Filters:  Pores..." columns="2">

 <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Do Not Stain in 30 Seconds" ></apex:outputLabel>
                </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Do Not Stain in 30 Seconds" id="poreStainNoChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="11"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
                    <apex:outputLabel value="Stain Other Than Blue" ></apex:outputLabel>
</apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Stain Other Than Blue" id="poreStainOtherChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="13"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
                </apex:pageBlockSection>


                </apex:pageBlockSection>
            </apex:outputPanel>

        </apex:pageBlock>
            <!--end Pore filters-->
</apex:panelGroup>
<apex:panelGroup >
            <!-- bolete search result list -->
            <apex:pageBlock title="Search Results"  id="bolete_list">
                <apex:outputText >{!showResultSize} of {!showRecordSize} records displayed</apex:outputText>
                <br/>
                <apex:pageBlockTable value="{! Boletes }" var="bol" style="width: 100%">
                    <apex:column width="75">
                        <apex:outputLink value="/apex/boleteDetailView?id={!bol.Id}" id="viewLink">
                            View
                        </apex:outputLink>
                    </apex:column>
                   
                    <apex:column width="75">
                        <apex:image id="imageURL" url="{!bol.ImageURL__c}" height="75"/>
                    </apex:column>

                    <apex:column value="{! bol.genus__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortByGenus }" reRender="bolete_list">Genus
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.species__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortBySpecies }" reRender="bolete_list">Species
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.Common__c }"/>
                   
                </apex:pageBlockTable>
            </apex:pageBlock>

</apex:panelGroup>           
</apex:panelGrid>
    </apex:form>
</apex:page>

 

All Answers

William TranWilliam Tran
Unless you have real examples or samples, there's only limited things I can do. 

1)  I have two PanelGroup tags inside the PanelGrid.  How to I get them to both top align? 
top align?  Well, just make sure the PanelGrid has at least 2 columns.

2)  How do I get the two PanelGroups to fit nicely on a page.  While I could try setting the width attribute, I am planning on putting this page into a mobile app and therefore don't want to specify something that may not be practical in use.
 fit nicely on a page? nicely a relative term, if 1) is working I assume then it fits nicely.

3)  One of the PanelGroup tags has many collapsible PageBlockSection tags.  When I added them to the PanelGroup they no longer collapse.  What do I need to do to make them collapsible once again?
Can you provide code samples?  I don't have any issues with collapsible pageblocksection inside of Panelgroup.

Thx
 
Roger PavelleRoger Pavelle
Here's the start of the code.  It includes the PanelGrid, the first PanelGroup and the first of the assorted PageBlockSections:
<apex:panelGrid columns="2" >
    <apex:panelGroup >
            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Edibility Filters" columns="1" collapsible="true">
                <apex:inputCheckbox label="Choice" id="edibilityChoiceChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="0"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               
                <apex:inputCheckbox label="Good" id="edibilityGoodChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="1"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               
                <apex:inputCheckbox label="Iffy" id="edibilityIffyChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="2"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               
                <apex:inputCheckbox label="Avoid" id="edibilityAvoidChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="3"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>
            </apex:pageBlockSection>
            </apex:outputPanel>


Below is a screenshot from the page preview.  Note that the Search Results is correctly in the second panel, but is not showing up at the top of the panel.  Also, the two panels only seem to take up half of the screen (which also causes the checkbox labels to wordwrap).  Also, as I mentioned in the original email, the section labels should be collapsible, but they don't collapse when you click on them.
  screen print
William TranWilliam Tran
Can you post the whole code?   It's difficult to assess the issue with only a snippet of code.

Thx
William TranWilliam Tran
Roger,

The collapsible works fine for me:

By the way, I suggest you post your issues separately as 3 questions: and provide enough information for the folks helping to be able to answer your questions.

Thx

1) Note that the Search Results is correctly in the second panel, but is not showing up at the top of the panel. 
What search results, what top panel?

2) Also, the two panels only seem to take up half of the screen (which also causes the checkbox labels to wordwrap). 
Which 2 panels? 


3) Also, as I mentioned in the original email, the section labels should be collapsible, but they don't collapse when you click on them.
It works for me (see screen print) so it's likely not the PanelGroup that is causing the issue.


User-added image
Roger PavelleRoger Pavelle
Here's a larger portion of the code, showing both panels.  And the collapsible does not work for me inside the first panel group

<apex:page setup="false" controller="BoleteController" sidebar="false">
    <apex:form >
       
        <apex:pageBlock title="Bolete Filtered Search">
<apex:panelGrid columns="2" >
    <apex:panelGroup >
            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Edibility Filters" columns="1" collapsible="true">
                <apex:inputCheckbox label="Choice" id="edibilityChoiceChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="0"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               
...
                <apex:inputCheckbox label="Avoid" id="edibilityAvoidChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="3"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>
            </apex:pageBlockSection>
            </apex:outputPanel>
            <!--end Edibility filters-->

            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Pore Filters" columns="1">
                <apex:pageBlockSection title="Pore Color Filters:  Primary Pore Color Is..." columns="1">
                    <apex:inputCheckbox label="Red, Pink, Purple or Orange" id="poreColorRedChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="4"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
...
                    <apex:inputCheckbox label="Black, Dark Brown or Dark Gray" id="poreColorBlackChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="8"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                </apex:pageBlockSection>
               
                <apex:pageBlockSection title="Pore Size Filters" columns="1">
                    <apex:inputCheckbox label="Pores Tiny" id="poreSizeTinyChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="9"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                    <apex:inputCheckbox label="Pores Huge" id="poreSizeHugeChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="10"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                </apex:pageBlockSection>
               
                <apex:pageBlockSection title="Pore Staining Filters:  Pores..." columns="1">
                    <apex:inputCheckbox label="Do Not Stain in 30 Seconds" id="poreStainNoChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="11"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
...
                    <apex:inputCheckbox label="Stain Other Than Blue" id="poreStainOtherChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="13"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                </apex:pageBlockSection>
                </apex:pageBlockSection>
            </apex:outputPanel>
            <!--end Pore filters-->
...
</apex:panelGroup>
<apex:panelGroup >
            <!-- bolete search result list -->
            <apex:pageBlock title="Search Results"  id="bolete_list">
                <apex:outputText >{!showResultSize} of {!showRecordSize} records displayed</apex:outputText>
                <br/>
                <apex:pageBlockTable value="{! Boletes }" var="bol" style="width: 100%">
                    <apex:column width="75">
                        <apex:outputLink value="/apex/boleteDetailView?id={!bol.Id}" id="viewLink">
                            View
                        </apex:outputLink>
                    </apex:column>
                   
                    <apex:column width="75">
                        <apex:image id="imageURL" url="{!bol.ImageURL__c}" height="75"/>
                    </apex:column>

                    <apex:column value="{! bol.genus__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortByGenus }" reRender="bolete_list">Genus
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.species__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortBySpecies }" reRender="bolete_list">Species
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.Common__c }"/>
                   
                </apex:pageBlockTable>
            </apex:pageBlock>
</apex:panelGroup>           
    </apex:panelGrid>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Here's another screenprint that better shows the two panels.  I want the search results to show up at the top of the panel (same height as the Pore Filters is showing):
screenprint
William TranWilliam Tran
Roger, your screen is exactly what I would expect based on the code written.

What is it you ultimately want it to look like?

You can paste it in Paint and rearrange to you desire state.

Based on that I can give you pointers.

Thx
Roger PavelleRoger Pavelle
I would like it to have the first column wider than is seen above, so that it doesn't word wrap as much (I set the PanelGrid width to 1800 for this screenshot).  I'd also like the search results at the top of the page, next to the Filtered Search column/panel.

And, as I mentioned, for some reason the collapsible sections don't collapse, so I want that working again as well.

screenshot
William TranWilliam Tran
Roger, 

Here you go.  Feel free to tweak it as needed.

I didn't format it so you can see partly what I did (all lines that are not formatted)

Thx
  
<apex:page setup="false" controller="BoleteController">
    <apex:form >

<apex:panelGrid columns="2" >
<apex:panelGroup >
       
        <apex:pageBlock title="Bolete Filtered Search">

            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Edibility Filters" columns="1" collapsible="true">
                <apex:inputCheckbox label="Choice" id="edibilityChoiceChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="0"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>               

                <apex:inputCheckbox label="Avoid" id="edibilityAvoidChk" >
                    <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                        <apex:param name="boxNum" value="3"/>
                    </apex:actionSupport>
                </apex:inputCheckbox>
            </apex:pageBlockSection>
            </apex:outputPanel>
            <!--end Edibility filters-->

            <apex:outputPanel styleClass="black" layout="block">
            <apex:pageBlockSection title="Pore Filters" columns="1">

                <apex:pageBlockSection title="Pore Color Filters:  Primary Pore Color Is..." columns="2">


                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Red, Pink, Purple or Orange" ></apex:outputLabel>
                </apex:pageBlockSectionItem>


                  <apex:pageBlockSectionItem >

                    <apex:inputCheckbox label="Red, Pink, Purple or Orange" id="poreColorRedChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="4"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
                 </apex:pageBlockSectionItem>


                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Black, Dark Brown or Dark Gray" ></apex:outputLabel>
                </apex:pageBlockSectionItem>

 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Black, Dark Brown or Dark Gray" id="poreColorBlackChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="8"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
 </apex:pageBlockSectionItem>
                </apex:pageBlockSection>

                <apex:pageBlockSection title="Pore Size Filters" columns="2">
                <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Pores Tiny" ></apex:outputLabel>
                </apex:pageBlockSectionItem>

 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Pores Tiny" id="poreSizeTinyChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="9"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
 </apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
                    <apex:outputLabel value="Pores Huge" ></apex:outputLabel>
                </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Pores Huge" id="poreSizeHugeChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="10"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
               </apex:pageBlockSection>

              
                <apex:pageBlockSection title="Pore Staining Filters:  Pores..." columns="2">

 <apex:pageBlockSectionItem >
                    <apex:outputLabel value="Do Not Stain in 30 Seconds" ></apex:outputLabel>
                </apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Do Not Stain in 30 Seconds" id="poreStainNoChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="11"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
                    <apex:outputLabel value="Stain Other Than Blue" ></apex:outputLabel>
</apex:pageBlockSectionItem>
 <apex:pageBlockSectionItem >
                    <apex:inputCheckbox label="Stain Other Than Blue" id="poreStainOtherChk" >
                        <apex:actionSupport action="{!setChkBoxValue}" event="onchange" rerender="bolete_list">
                            <apex:param name="boxNum" value="13"/>
                        </apex:actionSupport>
                    </apex:inputCheckbox>
  </apex:pageBlockSectionItem>
                </apex:pageBlockSection>


                </apex:pageBlockSection>
            </apex:outputPanel>

        </apex:pageBlock>
            <!--end Pore filters-->
</apex:panelGroup>
<apex:panelGroup >
            <!-- bolete search result list -->
            <apex:pageBlock title="Search Results"  id="bolete_list">
                <apex:outputText >{!showResultSize} of {!showRecordSize} records displayed</apex:outputText>
                <br/>
                <apex:pageBlockTable value="{! Boletes }" var="bol" style="width: 100%">
                    <apex:column width="75">
                        <apex:outputLink value="/apex/boleteDetailView?id={!bol.Id}" id="viewLink">
                            View
                        </apex:outputLink>
                    </apex:column>
                   
                    <apex:column width="75">
                        <apex:image id="imageURL" url="{!bol.ImageURL__c}" height="75"/>
                    </apex:column>

                    <apex:column value="{! bol.genus__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortByGenus }" reRender="bolete_list">Genus
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.species__c }">
                        <apex:facet name="header">
                            <apex:commandLink action="{! sortBySpecies }" reRender="bolete_list">Species
                            </apex:commandLink>
                        </apex:facet>
                    </apex:column>
                   
                    <apex:column value="{! bol.Common__c }"/>
                   
                </apex:pageBlockTable>
            </apex:pageBlock>

</apex:panelGroup>           
</apex:panelGrid>
    </apex:form>
</apex:page>

 
This was selected as the best answer
Roger PavelleRoger Pavelle
Thanks.  Moving the "Bolete Filtered Search" pageBlock inside the panelGroup/panelGrid fixed the collapsible problem.
Was there also something to move the Search Results panel to the top of the page?
William TranWilliam Tran
When the sidebar is there, it automatically tries to match thus putting everything on top.  When side bar is not there it tries to center it thus looking uneven.  As you use these different tags try not to mesh them, that is, keep all the pageblock... tags together, don't inject a panelgrid/panelgroup in between because doing so will cause unexpected behavior.

Glad it all worked out. Be sure to choose best answer to indicate this question is resolved.

Thx