How to Convert Panel grid to pageblock table in visualforce?with similar UI

Question

I have a Panel Grid with static data of 10 fields of a record. look below code`

<apex:panelGrid columns="4" styleClass="CostCenterGrid" id="eventCRSection" rendered="{!eventCREditSection}">
                          <apex:outputText value="Cost center Number" style="font-weight: bold"/>

    <apex:outputText value="Cost Center" style="font-weight: bold"/>

    <apex:outputText value="Cost Center Budget Percentage" style="font-weight: bold"/>

    <apex:outputText value="" style="font-weight: bold"/>

    <apex:outputLabel for="interactionCostCenter1" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_1__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_1__c}" id="interactionCostCenter1" styleClass="inputCostCenter1 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_1_Percentage__c}" id="interactionCostCenter1Percentage" styleClass="inputCostCenter1Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter1Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter2" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_2__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_2__c}" id="interactionCostCenter2" styleClass="inputCostCenter2 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_2_Percentage__c}" id="interactionCostCenter2Percentage" styleClass="inputCostCenter2Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter2Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter3" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_3__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_3__c}" id="interactionCostCenter3" styleClass="inputCostCenter3 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_3_Percentage__c}" id="interactionCostCenter3Percentage" styleClass="inputCostCenter3Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter3Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter4" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_4__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_4__c}" id="interactionCostCenter4" styleClass="inputCostCenter4 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_4_Percentage__c}" id="interactionCostCenter4Percentage" styleClass="inputCostCenter4Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter4Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter1" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_5__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_5__c}" id="interactionCostCenter5" styleClass="inputCostCenter5 inputCostCenter" />

    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_5_Percentage__c}" id="interactionCostCenter5Percentage" styleClass="inputCostCenter5Percentage inputCostCenterPercentage"  />
    <apex:outputLabel for="interactionCostCenter5Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter6" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_6__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_6__c}" id="interactionCostCenter6" styleClass="inputCostCenter6 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_6_Percentage__c}" id="interactionCostCenter6Percentage" styleClass="inputCostCenter6Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter6Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter7" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_7__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_7__c}" id="interactionCostCenter7" styleClass="inputCostCenter7 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_7_Percentage__c}" id="interactionCostCenter7Percentage" styleClass="inputCostCenter7Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter7Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter8" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_8__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_8__c}" id="interactionCostCenter8" styleClass="inputCostCenter8 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_8_Percentage__c}" id="interactionCostCenter8Percentage" styleClass="inputCostCenter8Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter8Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter9" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_9__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_9__c}" id="interactionCostCenter9" styleClass="inputCostCenter9 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_9_Percentage__c}" id="interactionCostCenter9Percentage" styleClass="inputCostCenter9Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter9Percentage" value="%" />

    <apex:outputLabel for="interactionCostCenter10" value="{!$ObjectType.ahm__Interaction__c.fields.ahm__Cost_Center_10__c.Label}" styleClass="labelCol" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_10__c}" id="interactionCostCenter10" styleClass="inputCostCenter10 inputCostCenter" />
    <apex:inputField value="{!intcostcenter.ahm__Cost_Center_10_Percentage__c}" id="interactionCostCenter10Percentage" styleClass="inputCostCenter10Percentage inputCostCenterPercentage" />
    <apex:outputLabel for="interactionCostCenter10Percentage" value="%" />

</apex:panelGrid>

Please refer the screenshot how I am showing Presently.But I need the same data to be shown in Page block Table with fixed no of rows. Can someone help me on this?

Answer 1

For that you need to add a controller also. Create a class with with 3 variables as you have 3 columns. I am showing you a piece of code just for demo.

   VF page      
     <apex:pageBlock title="Any title">
        // here Temp is list of object which you have set in your controller.
        <apex:pageBlockTable value="{!Temp}" var="contact">
          <apex:column value="{!temp.column1}"/>
          <apex:column value="{!temp.column2}"/>
          <apex:column value="{!temp.column3}"/>
        </apex:pageBlockTable>
     </apex:pageBlock>

Below is the controller

 public class yourControllerName{
 public list<yourControllerName> temp {get;set;}
 public String column1;
 public String column2;
 public String column3;

  public yourControllerName(){
  yourControllerName a = new yourControllerName ();
  temp  = new List<yourControllerName>();
  a.column1='any value';
  a.column2='any value';
  a.column3='any value';
  temp.add(a);
  }
}