Apex Code Development You need to sign in to do that
Don't have an account?
Zoom_V Horizontal grid lines for a VisualForce DataTable
I am attempting to use a DataTable to show individual field values as "cell" values in a spreadsheet on my VisualForce page. I'm doing this by stacking the fields upon one another. This is the actual syntax I am using :
<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" >
<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>
Is there a way for me to have the horizontal grid lines appear between each individual InputField in order to make them appear to be in their own "cell" ?
Thank you for your input.
An example of the latter is below:
<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.TransactionControlAjavascript:void(0)dequacy__c}"/><br></br> <apex:inputfield value="{!pitem.ForeignExchangeControlAdequacy__c}"/><br></br> </apex:column> </apex:dataTable> </apex:pageblocksection>@James - thank you for your input. I tried using the rowclasses attribute as you used it, but that didn't work. It actually doesn't seem to have any effect at all.
Is it possible that maybe VisualForce doesn't regard separating fields by <br></br> in the same column of a DataTable as new "rows" ? And therefore it isn't creating the grid line below each field ... ?
or maybe that syntax is just incorrect...?
But for anybody, like me, who was looking for a solution to this issue, I am somehow answering my own question.
Here's my issue:
I have created a data table on my VF Page using apex:datatable and I would like to see lines drawn in between rows and columns.
To draw lines between cells as I found out is to use "rules" attribute (instead of "rowclasses").
I used rules="all" for my scenario. Other options available are "groups", "rows", "cols", and "none" which is the default.
And to use Zoom_V's code as an example, line 02 should say
<apex:dataTable value="{!Vendor_Product_Review__c}" var="pitem" border="4" align="center" cellpadding="8" rules="all" >
Hope this helps.
<apex:page standardController="Contact" > <apex:form > <style>.ct{text-align:center}</style> <apex:pageBlock > <apex:pageBlockSection columns="1" > <apex:dataTable value="{!Contact}" var="a" align="center" border="3" cellpadding="4" bgcolor="white" rules="rows"> <apex:column headerValue="Hard preference?" width="130px" styleClass="ct" rowspan="1"> <apex:outputField value="{!a.Handle_with_care__c}" /> <apex:outputField value="{!a.Handle_with_care__c}"/> </apex:column> <apex:column headerValue="Preference Category" width="300px" rowspan="1"> <apex:outputField value="{!a.Handle_with_care_description__c}" /> <apex:outputText > Travel </apex:outputText> </apex:column> <apex:column headerValue="Preferences" width="250px" rowspan="1"> <apex:outputField value="{!a.Geographic_HWC__c}" /> <apex:outputField value="{!a.Travel_HWC__c}" /> </apex:column> <apex:column headerValue="Additional Notes" width="250px" rowspan="1" > <apex:outputField value="{!a.Geographic_Preferences_Notes__c}" /> <apex:outputField value="{!a.HwC_Preferences_Notes__c}" /> </apex:column> </apex:dataTable> <apex:inlineEditSupport /> </apex:pageBlockSection> <div align="center"> <apex:commandButton action="{!quicksave}" value="Save" /> </div> </apex:pageBlock> </apex:form> </apex:page>See result below: