+ Start a Discussion
DeepVDeepV 

Pageblocktable displaying columns


Hi All,

I have the following code with pageblocktable, I have 12 columns to display which are display as one column but

I want it display as 4 columns:
Delete      Role    Firstname        Lastname
Phone      Fax     GeneralEmail  PersonalEmail
Address   City    State                 Zip

<apex:page standardcontroller="REL_VS_Submission__c" extensions="RELVSRenewalController" sidebar="false">
    <apex:sectionheader title="VSA Renewal Submission" subtitle="Step 2 of 10" />
    <apex:messages />
    <apex:form >
        <apex:pageblock title="Contact Information">
            Video providers must submit contact information for <b>at least 3 persons</b>: 1) the person authorized to receive information regarding the VSA; 2) the person designated to receive subscriber complaints and 3) the person designated to receive information regarding the annual cable assessment. If the data listed below is correct and complete, select save and continue. If any portion of the data is incorrect or missing, make the corrections now, then select save and continue.
            <!-- This facet tag defines the "Next" button that appears
            in the footer of the pageBlock. It calls the step2()
            controller method, which returns a pageReference to
            the next step of the wizard. -->
            <!--<apex:facet name="footer">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
            </apex:facet>-->
            <apex:variable value="{!0}" var="rowContactNumber" />
            <!-- Here we will use an extra variable to define a row number -->
            <apex:outputpanel id="panelWithVar">
                <apex:variable value="{!0}" var="rowContactNumber" />
            </apex:outputpanel>
            <apex:pageblocksection title="Contact Information" >
                <apex:pageblocktable value="{!anewContact}" var="item" id="newContactitems">
                    <!-- A button to remove individual entry. s
                    We must to pass the line number to define a list entry number to remove -->
                    <apex:column width="5%" headervalue="Delete">
                        <apex:commandbutton immediate="true" action="{!removeContactObject}" value=" X " rerender="newContactitems,panelWithVar">
                            <apex:param name="p2" value="{!rowContactNumber}" assignto="{!numberOfContactRowToRemove}" />
                        </apex:commandbutton>
                    </apex:column>
                    <!-- Moreover here we incrementing the row number variable -->
                    <!--<apex:column headerValue="RowCount">
                        <apex:outputText value="{!rowContactNumber}"/>
                    </apex:column>-->
                  
                   <apex:column headervalue="Role">
                        <apex:inputfield value="{!item.REL_VS_Contact_Role__c}" html-disabled="true"/>
                        <apex:variable var="rowContactNumber" value="{!rowContactNumber + 1}" />
                    </apex:column>
                    <apex:column headervalue="Firstname">
                        <apex:inputfield value="{!item.Firstname}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Lastname">
                        <apex:inputfield value="{!item.Lastname}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Phone">
                        <apex:inputfield value="{!item.Phone}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Fax">
                        <apex:inputfield value="{!item.Fax}" required="true" />
                    </apex:column>                  
                    <apex:column headervalue="Personal Email">
                        <apex:inputfield value="{!item.Email}" required="true" />
                    </apex:column>
                    <apex:column headervalue="General Email">
                        <apex:inputfield value="{!item.REL_VS_Generic_Email__c}" />
                    </apex:column>
                    <apex:column headervalue="Title">
                        <apex:inputfield value="{!item.Title}" required="true"/>
                    </apex:column>
                     <apex:column headervalue="Mailing Street">
                        <apex:inputfield value="{!item.MailingStreet}" required="true"/>
                    </apex:column>
                    <apex:column headervalue="Mailing City">
                        <apex:inputfield value="{!item.MailingCity}" required="true"/>
                    </apex:column>
                    <apex:column headervalue="Mailing State">
                        <apex:inputfield value="{!item.MailingState}" required="true" />
                    </apex:column>
                    <apex:column headervalue="Mailing Zip">
                    <apex:inputfield value="{!item.MailingPostalCode}" required="true" />
                    </apex:column>
                 </apex:pageblocktable>
            </apex:pageblocksection>
            <!-- A main button to add a new item -->
            <apex:commandbutton value="Add Contact" action="{!addContactObject}" rerender="newContactitems,panelWithVar" immediate="true" />

        </apex:pageblock>
        <apex:pageblock >
            <apex:pageblocksection columns="4">
                <apex:commandbutton action="{!step3}" value="Save and Continue"
                                    styleclass="btn" />
                <apex:commandbutton action="{!reset}" value="Reset Page"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!exit}" value="Exit"
                                    styleclass="btn" immediate="true" />
                <apex:commandbutton action="{!Back}" value="Back"
                                    styleclass="btn" immediate="true" />
            </apex:pageblocksection>
        </apex:pageblock>
    </apex:form>
</apex:page>

Thanks
 
VamsiVamsi
Hi,

Create 3 Pageblock tables with 4 columns each and place them one after the other so finally you can have the below format 

Delete      Role    Firstname        Lastname
Phone      Fax     GeneralEmail  PersonalEmail
Address   City    State                 Zip