1

I am attempting to use a DataTable to show individual field values as "cells" in a spreadsheet on my VisualForce page. I'm doing this by stacking the fields upon one another and separating them with <br></br>. Now I am attempting to put grid lines between each of the field so they will be enclosed in their "cell". I am attempting to accomplish this with style and rowclasses attribute but that's not working.

This is the actual syntax I am using :

<style type="text/css">
    .rowWithBorder {
        border-bottom: 1pt solid black;
    }
</style>

<apex:pageblocksection title="Risk Assessment" showheader="true" collapsible="true" columns="1">
    <apex:dataTable value="{!Vendor_Product_Review__c}" var="pitem" border="4"  align="center" cellpadding="8" rowclasses = "rowWithBorder" > 
                      <apex:column headerValue="">
                        <apex:outputLabel >Credit   </apex:outputLabel><br></br>
                        <apex:outputLabel >Liquidity   </apex:outputLabel><br></br>
                        <apex:outputLabel >Transaction   </apex:outputLabel><br></br>
                       <apex:outputLabel >Foreign Exchange   </apex:outputLabel>
                        </apex:column>

                      <apex:column headerValue="P">
                       <apex:inputfield value="{!pitem.CreditRiskProbability__c}"/><br></br>
                        <apex:inputfield value="{!pitem.LiquidityRiskProbability__c}"/><br></br>
                        <apex:inputfield value="{!pitem.TransactionRiskProbability__c}"/><br></br>
                        <apex:inputfield value="{!pitem.ForeignExchangeRiskProbability__c}"/><br></br>
                          </apex:column>

                        <apex:column headerValue="S">   
                        <apex:inputfield value="{!pitem.CreditRiskSeverity__c}"/><br></br>
                          <apex:inputfield value="{!pitem.LiquidityRiskSeverity__c}"/><br></br>
                           <apex:inputfield value="{!pitem.TransactionRiskSeverity__c}"/><br></br>
                           <apex:inputfield value="{!pitem.ForeignExchangeRiskSeverity__c}"/><br></br>
                           </apex:column>

                          <apex:column headerValue="C">
                         <apex:inputfield value="{!pitem.CreditControlAdequacy__c}"/><br></br>   
                         <apex:inputfield value="{!pitem.LiquidityControlAdequacy__c}"/><br></br>      
                          <apex:inputfield value="{!pitem.TransactionControlAdequacy__c}"/><br></br>      
                            <apex:inputfield value="{!pitem.ForeignExchangeControlAdequacy__c}"/><br></br>                           
                            </apex:column>
    </apex:dataTable>
    </apex:pageblocksection>

For some reason I am not getting the grid lines to appear below each field. My only guess is that maybe VisualForce doesn't count fields separated by <br></br> as being on different "rows" and therefore it is not creating the grid lines between them ?

Any suggestions ? If this is the case does anybody have any other ideas on how to accomplish this ?

  • 1
    you'll have more success if the 4 fields within each row/column cell are placed inside a panelGrid - that you can then style using the frame="all" and rules="box" attributes. Then you won't need the HTML breaks – cropredy Nov 14 '15 at 2:11
  • @crop1645 - I used the panelgrid as you suggested and it is cool in that I don't need the breaks, but frame="all" and rules="box" both didn't create the "cell" effect I was hoping for between my fields. I have a feeling VisualForce is just regarding the whole column as one single cell and simply stacking fields in it is not enough to achieve a that individual cell effect. There's gotta be a way to achieve this grid/spreadsheet/cell look for multiple fields somehow in VisualForce. Thanks for your input. – Zoom_v Nov 16 '15 at 20:02
1

What happens if you encase each "cell" in a div with your rowWithBorder class? ie:

 <apex:column headerValue="">
    <div class="rowWithBorder">
     <apex:outputLabel >Credit   </apex:outputLabel>
    </div>
    <div class="rowWithBorder">
      <apex:outputLabel >Liquidity   </apex:outputLabel>
    </div>

...

  • I see what effect that has. It isn't exactly the effect I was hoping for because I was hoping that by accomplishing a table-wide grid effect my fields would also be better aligned with their labels, which is not the case right now. Thank you very much for your help. – Zoom_v Nov 16 '15 at 20:38
1

@crop1645 and @jason - here is a solution I have which uses a combination of panelgrid and outputpanel to accomplish what I'm trying to do. @crop - notice the attributes for the panelgrid are rules="all" and frame="box", opposite of what you wrote. I'm thinking maybe you just mistyped ... ?

Anyway - this works. It's a 5 column by 2 row "table". Ultimately, I'll add about 5 more rows, but you get the idea :

<apex:panelGrid columns="5" width="500" cellpadding="0" cellspacing="0" rules="all" frame="box">
                <!-- The first column -->
                <apex:panelGrid columns="5" width="100%"  cellpadding="0" cellspacing="0" rules="all">
                    <!-- Output panel used to be able to layout the row -->
                    <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                        <apex:outputText value=""/>
                    </apex:outputPanel>

                    <!-- header columns -->
                    <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                        <apex:outputText value="P"/>
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                        <apex:outputText value="S"/>
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                        <apex:outputText value="C"/>
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block" styleClass="myHeader">
                        <apex:outputText value="D"/>
                    </apex:outputPanel>
                <!-- end header columns -->

                <!-- first row -->   
                    <apex:panelGrid columns="1" width="100%" cellpadding="0" cellspacing="0" rules="all" columnClasses="colClass">
                        <apex:outputText value="Credit"/>

                    </apex:panelGrid> 

                    <apex:outputPanel style="padding:5px;" layout="block">

                         <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskProbability__c}"/>
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block">
                        <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskSeverity__c}"/>
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block">
                        <apex:inputfield value="{!Vendor_Product_Review__c.CreditControlAdequacy__c}"/>    
                    </apex:outputPanel>
                    <apex:outputPanel style="padding:5px;" layout="block">
                        <apex:inputfield value="{!Vendor_Product_Review__c.CreditRiskDirection__c}"/>                          
                    </apex:outputPanel>
            <!-- end first row -->
            <!-- second row --> 
                   <apex:panelGrid columns="1" width="100%" cellpadding="0" cellspacing="0" rules="all" columnClasses="colClass">
                        <apex:outputText value="Liquidity"/>                       
                    </apex:panelGrid> 

                      <apex:outputPanel style="padding:5px;" layout="block">
                      <apex:inputfield value="{!Vendor_Product_Review__c.LiquidityRiskProbability__c}"/>
                      </apex:outputPanel>
                      <apex:outputPanel style="padding:5px;" layout="block">
                      <apex:inputfield value="{!Vendor_Product_Review__c.LiquidityRiskSeverity__c}"/>
                      </apex:outputPanel>
                      <apex:outputPanel style="padding:5px;" layout="block">
                      <apex:inputfield value="{!Vendor_Product_Review__c.LiquidityControlAdequacy__c}"/>    
                      </apex:outputPanel>
                      <apex:outputPanel style="padding:5px;" layout="block">
                      <apex:inputfield value="{!Vendor_Product_Review__c.LiquidityRiskDirection__c}"/>                          
                      </apex:outputPanel>
              <!-- end second row --> 


                </apex:panelGrid>
                </apex:panelGrid>

Thank you for all of your help.

  • great - and yes, I mistyped. VF is subtle in that in some cases, it does exactly what you want and in others, you have to think of the underlying HTML as if there was no VF at all in order to get the styling you want – cropredy Nov 17 '15 at 0:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.