+ Start a Discussion
vlrvlr 

Alternating multiple colors for dataTable rows based on record value

Hi,

We have a requirement for rows to have different colors based on the record value. There are many online example how to achieve zebra style colors (odd,even), and we are using it now. However, I have not found a solution for multiple colors. (and also my css file does not affect table when i put "odd" and "even" styles into css file. It only works when it is embedded into VF page. ). Here is the VF page:

 

<apex:page controller="ContactController" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
.odd {background-color: #FCF7F7;}
.even {background-color: #E3DCDB;}
</style>
<apex:stylesheet value="{!URLFOR($Resource.contactCss)}"/>
<apex:messages />

<apex:outputText style="font: normal normal 14px/30px Verdana, Arial, Georgia, serif;" rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" value="School of Social Work Directory" />
<BR />
<apex:outputText style="font: normal normal 12px/30px Verdana, Arial, Georgia, serif;" rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" value="Generated: {!NOW()}" />
<BR />
<BR />
<apex:pageBlock rendered="{!NOT(ISNULL(contacts)) && contacts.size > 0}" >


     <apex:dataTable value="{!contacts}" var="c" border="2" cellpadding="2" id="theTable" rowClasses="odd,even">
    
        <apex:column value="{!c.Name}" headerValue="Name" styleClass="cell" />
        <apex:column value="{!c.Phone}" headerValue="Phone" styleClass="cell" width="200px"/>
        <apex:column value="{!c.Location__c}" headerValue="Location" styleClass="cell"/>
        <apex:column value="{!c.Email}" headerValue="Email" styleClass="cell"/>        
        <apex:column value="{!c.Title}" headerValue="Title" styleClass="cell"/>
        
     </apex:dataTable>

</apex:pageBlock>
</apex:page>

 Here is static resource file:

 

.odd {background-color: #FCF7F7;}
.even {background-color: #E3DCDB;}
.table  
{
border-collapse:collapse;
width:100%;
border:1px solid black;
padding:2px;
}
th 
{
border:1px solid black;
padding:2px;
font: normal bold 11px/30px Verdana, Arial, Georgia, serif;
}
.cell 
{
border:1px solid black;
padding:2px;
font: normal normal 11px/30px Verdana, Arial, Georgia, serif;
}

 Thanks.

sandeep@Salesforcesandeep@Salesforce

1. There is not way to do it directly but you can do it creating your HTML Table and apply required CSS to provide coluring as per your need and then also apply CSS to make it looking like PageBlock Table.

 

How to do it you can get some help from my blog 

http://www.codespokes.com/2013/02/how-to-plot-pageblock-table-using-html.html

vlrvlr
Thank you for your response.
Pardon my ignorance, but how the DataList data from apex tags get linked to the table in HTML part, and how the data get displayed?

Thanks.