Apex Code Development You need to sign in to do that
Don't have an account?
Shashank Need 3 pageblockSections next to each other (using ONLY VF tags)
Hi,
I am just starting off with VF and I am grappling with a simple UI problem.
I need to create a VF page with the following requirement:
There are three containers which need to be side by side. Each one would perhaps be used to show a list of items
What tags should I use to have this arrangement?
I tried using panelGrid with 3 columns and a pageBlockSection in each column but I got all of them in one column of the panelGrid.
It seems that there is no editor or a reference material which I could use to actually visually see how each component works and fits in each other.
Please help me understand how is it easy to develop? Am I missing something?
Thanks,
Shashank
Hi, I tried the following and it works for me..
<apex:page controller="ProductFeaturesAdd"> <style> .bPageBlock td.pbTitle { width:100%; } </style> <apex:pageBlock title="Add Features to Product"> `<apex:actionStatus startText="Loading..." stopText="" id="ajaxStatus"/> <apex:panelGrid columns="3" style="width:100%;" id="panel"> <apex:pageBlock id="xyz" title="Feature Groups"> <apex:pageBlockSection columns="1"> <apex:pageBlockSectionItem > <apex:form > <apex:pageBlockTable value="{!FeatureGroupPresenters}" var="featureGroupPresenter" id="theTable" rowClasses="odd,even" styleClass="tableClass"> <apex:column style=""> <apex:facet name="header">Select</apex:facet> <apex:actionRegion > <apex:inputCheckbox value="{!featureGroupPresenter.isSelected}"> <apex:actionSupport action="{!selectFeatureGroup}" event="onclick" rerender="panel" status="ajaxStatus"/> </apex:inputCheckbox> </apex:actionRegion> </apex:column> <apex:column > <apex:facet name="header">Name</apex:facet> <apex:outputText value="{!featureGroupPresenter.name}"></apex:outputText> </apex:column> </apex:pageBlockTable> </apex:form> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> <apex:pageBlock title="Features in Selected Feature Group"> <apex:pageBlockSection > <apex:pageblockSectionItem > <apex:outputLabel value="Class Vsar Value"></apex:outputLabel> </apex:pageblockSectionItem> </apex:pageBlockSection> </apex:pageBlock> <apex:pageBlock title="Features in Product"> <apex:pageBlockSection > <apex:pageblockSectionItem > <apex:outputLabel value="Class Vsar Value"></apex:outputLabel> </apex:pageblockSectionItem> </apex:pageBlockSection> </apex:pageBlock> </apex:panelGrid> </apex:pageBlock> </apex:page>All Answers
Hi Shashank,
Try 3 outputPanels instead of panelgrids in 3 column pageBlocksection. inside the outputpanel you can use any othe tag to display the lists like dataList, dataTable, panelGrid and so on.
<apex:page> <apex:pageBlock> <apex:pageBlockSection columns="3"> <apex:outputPanel> <!-- Place your 1st column items here--> </apex:outputPanel> <apex:outputPanel> <!-- Place your 2nd column items here--> </apex:outputPanel> <apex:outputPanel> <!-- Place your 3rd column items here--> </apex:outputPanel> </apex:pageBlockSection> </apex:pageBlock>Cheers..
I think if you want them side by side, the simplest might be to use a table:
<table> <tr><td> <apex:pageblocktable id="1"/> </td><td> <apex:pageblocktable id="2"/> </td><td> <apex:pageblocktable id="3"/> </td></tr> </table>Jeremy
Hi, I tried the following and it works for me..
<apex:page controller="ProductFeaturesAdd"> <style> .bPageBlock td.pbTitle { width:100%; } </style> <apex:pageBlock title="Add Features to Product"> `<apex:actionStatus startText="Loading..." stopText="" id="ajaxStatus"/> <apex:panelGrid columns="3" style="width:100%;" id="panel"> <apex:pageBlock id="xyz" title="Feature Groups"> <apex:pageBlockSection columns="1"> <apex:pageBlockSectionItem > <apex:form > <apex:pageBlockTable value="{!FeatureGroupPresenters}" var="featureGroupPresenter" id="theTable" rowClasses="odd,even" styleClass="tableClass"> <apex:column style=""> <apex:facet name="header">Select</apex:facet> <apex:actionRegion > <apex:inputCheckbox value="{!featureGroupPresenter.isSelected}"> <apex:actionSupport action="{!selectFeatureGroup}" event="onclick" rerender="panel" status="ajaxStatus"/> </apex:inputCheckbox> </apex:actionRegion> </apex:column> <apex:column > <apex:facet name="header">Name</apex:facet> <apex:outputText value="{!featureGroupPresenter.name}"></apex:outputText> </apex:column> </apex:pageBlockTable> </apex:form> </apex:pageBlockSectionItem> </apex:pageBlockSection> </apex:pageBlock> <apex:pageBlock title="Features in Selected Feature Group"> <apex:pageBlockSection > <apex:pageblockSectionItem > <apex:outputLabel value="Class Vsar Value"></apex:outputLabel> </apex:pageblockSectionItem> </apex:pageBlockSection> </apex:pageBlock> <apex:pageBlock title="Features in Product"> <apex:pageBlockSection > <apex:pageblockSectionItem > <apex:outputLabel value="Class Vsar Value"></apex:outputLabel> </apex:pageblockSectionItem> </apex:pageBlockSection> </apex:pageBlock> </apex:panelGrid> </apex:pageBlock> </apex:page>