Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
nasir jawednasir jawed 

How to change the colour in <apex:datatable>

Hi All,

 

I have written an apex controller and created a visual force page and i had used datatable for this.The master object is Order__c and child is Job__c. Suppose if there are 5 jobs related to an Order.I display this in visual force page by using dataTable.

 

I am not able to get alternate colours for all the 5 jobs.For example if there is 5 jobs and i user green and blue colour for even and odd.Then jobs in data table should display as blue,green ,blue,green,

 

Here is the Visual force page which i had used.

<apex:page standardController="Order__c"  showHeader="false" extensions="PopulateOrderValues" >
  <html>
<head>
<title>Order Received</title>
</head>
<style type="text/css">
c1 { color: #fae1c3; }
c2 { color: #FF0000; }
</style>


<body>


<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="https://c.cs5.content.force.com/servlet/servlet.ImageServer?id=015O00000008wm7&oid=00DO0000000CqOz&lastMod=1320735422000"/></td>
  </tr>
  <tr>

    <td height="70" align="center" valign="top"><font color="#646464" size="5" face="Helvetica, Arial, sans-serif"><Center>THANK YOU FOR YOUR ORDER!</center></font><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">We will send you a notification once your order is ready for shipment.</font></td>
  </tr>
  <tr>
    <td height="30" align="center" valign="top"><img src="" width="600" height="1"/></td>
  </tr>
  <tr>
    <td><table width="600" border="0" cellpadding="0" cellspacing="0">
      <tr>

        <td width="25">&nbsp;</td>
        <td width="550" height="30" valign="top"><font face="Helvetica, Arial, sans-serif" color="#646464" size="3" style="font-size:19px">ORDER INFORMATION</font></td>
        <td width="25">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><table width="550" border="0" cellspacing="0" cellpadding="0">
          <tr>

            <td width="95"><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Order number</font></strong></td>
            <td width="180"><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Order_ID__c}</font></td>
            <td width="95" rowspan="5" valign="top"><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Deliver to</font></strong></td>
            <td width="180" rowspan="5" valign="top"><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Account__r.PersonMailingStreet}, {!currentOrder.Account__r.PersonMailingCity},
             {!currentOrder.Account__r.PersonMailingState},{!currentOrder.Account__r.PersonMailingPostalCode},{!currentOrder.Account__r.PersonMailingCountry}, </font></td>
          </tr>
          <tr>
            <td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Cost centre</font></strong></td>
            <td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Cost_Center__c}</font></td>
            </tr>
          <tr>

            <td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Employee</font></strong></td>
            <td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Contact__r.Name}</font></td>
            </tr>
          <tr>
            <td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Phone</font></strong></td>
            <td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!currentOrder.Account__r.Phone}</font></td>
            </tr>

          <tr>
            <td><strong><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">Email</font></strong></td>
            <td><font face="Helvetica, Arial, sans-serif" color="#646464" size="2" style="font-size:12px">{!Order__c.Contact_Email__c}</font></td>
            </tr>
        </table></td>
        <td>&nbsp;</td>
      </tr>     
     <tr>
        <td>&nbsp;</td>
        <td height="20">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      nasir
     <style type="text/css">

     .h { width:1000px;
      height:200px;}
      
      </style>

    <apex:form >
    <apex:pageBlock >
    <apex:dataTable value="{!job}" var="j" columns="5"  style="Helvetica, Arial, sans-serif" bgcolor="#fae1c3"  >
    
    <apex:column styleClass="h"  >
                <apex:facet name="header" >Item #</apex:facet>
                <p><apex:outputText value="{!j.Job_ID__c}" styleClass="mystyle"/></p>
    </apex:column>
    <apex:column styleClass="h" >
                <apex:facet name="header">Date</apex:facet>
                <apex:outputField value="{!Order__c.Order_Date__c}"  styleClass="mystyle"/>
    </apex:column>
    <apex:column styleClass="h">
                <apex:facet name="header">Quantity</apex:facet>
                <apex:outputText value="{!j.Quantity__c}"  styleClass="mystyle"/>
    </apex:column>
    <apex:column styleClass="h" >
                <apex:facet name="header">Product</apex:facet>
                
                <Strong><apex:outputText value="EMC Business Card Front"/></Strong>                
                <apex:outputField value="{!j.Front_Template_Name__c}"  styleClass="mystyle"/> 
                
                <Strong><apex:outputText value="Delivery"/></Strong>                
                <apex:outputField value="{!j.Delivery_Country__c}"  styleClass="mystyle"/>
                
                 <Strong><apex:outputText value="Base"/></Strong>                 
                <apex:outputField value="{!j.Material_Type__c}"/>
                
                 <Strong><apex:outputText value="Lamination"/></Strong>                 
                <apex:outputField value="{!j.Lamination__c}"/>
                
                 <Strong><apex:outputText value="Printed Sides"/></Strong>                
                <apex:outputField value="{!j.Printing_Side__c}"/>
                
                 <Strong><apex:outputText value="Dimendions"/></Strong>            
                <apex:outputField value="{!j.Dimension__c}"/>
                
                <Strong><apex:outputText value="Delivery Zone"/></Strong>                
                <apex:outputField value="{!j.Delivery_State__c}"/>
                
                
    </apex:column>
 
    
    <apex:column styleClass="h" >
              <apex:facet name="header">Cost</apex:facet>
              <apex:outputText value="{!j.Item_Price__c}"  styleClass="mystyle"/>
    </apex:column>
   
   </apex:dataTable>
    </apex:pageBlock> 
    </apex:form>  
    
   
   

<table  ALIGN="right" face="Helvetica, Arial, sans-serif" size="2" style="font-size:12px">
<tr>
    <td style="font-size:15px"><Strong><h1>Cost Of Items</h1></Strong></td>
    <td ALIGN="right"><apex:outputText value="{!Order__c.Cost_of_Items__c}"/></td>
</tr> 
<tr>  
    <td style="font-size:15px"><Strong><apex:outputText value="Delivery"/></Strong></td>
    <td ALIGN="right"> <apex:outputText value="{!Order__c.Freight_Cost__c}"/></td>
</tr>    
<tr>
   <td style="font-size:15px"> <Strong><apex:outputText value="Total"/></Strong></td>
    <td ALIGN="right" > <apex:outputText value="{!Order__c.Total_Charges__c}"/></td>
 </tr>
</table>   
      
   
    </table></td>
  </tr> 
  <tr>
    <td height="20">&nbsp;</td>
  </tr>
  <tr>
    <td><img src="" width="600" height="1" style="display:block"/></td>
  </tr>

  <tr>
    <td height="120" ALIGN="center" valign="middle" bgcolor="#E3E3D9"><font face="Helvetica, Arial, sans-serif" color="#646464" size="3" style="font-size:19px">Best regards,The EfficientLive Team</font></td>
  </tr>
</table>


</body>
</html>

</apex:page>

 and controller is 

public  class PopulateOrderValues {
    public Order__c order;
    public Order__c currentOrder{get;set;}
    public List<Job__c> job{get; set;}

    public PopulateOrderValues(ApexPages.StandardController controller) {
        order=(Order__c)controller.getRecord();
        currentOrder=[Select Contact__r.Email,Contact__r.Name,Account__r.Phone,Account__r.PersonMailingCity,Account__r.PersonMailingCountry,
        Account__r.PersonMailingPostalCode,
        Account__r.PersonMailingState,Account__r.PersonMailingStreet from Order__c where id=:Order.id];
        
        job=[Select  id,Job_ID__c,Order_Date__c,Quantity__c,Item_Price__c,Front_Template_Name__c,Delivery_Country__c
        ,Material_Type__c,Lamination__c,Printing_Side__c,Dimension__c,Delivery_State__c from Job__c where Order__c=:order.id ];
        System.debug('Nasir:'+ job);
    }

 Please let me know how can i change the colour for the records.

 

Thanks

Sankalp JhingranSankalp Jhingran

Hey Nasir,

 

You can use IF formula in a visualforce page for conditionally showing styles:

 

Chck this out:

http://boards.developerforce.com/t5/Visualforce-Development/Inline-VisualForce-quot-IF-quot-statement/td-p/75825

 

Here is a sample visualforce page and the controller showing the use:

NumberofLocations__c is a field of type Number on Account.

 

 

VF Page:

<apex:page controller="UsingStylesInDataTableController" >
<apex:dataTable value="{!accs}" var="acc">
<apex:column value="{!acc.Name}" style="{!IF(acc.NumberofLocations__c < 5, 'background-color:red;', 'background-color:green;')}"/>
<apex:column value="{!acc.NumberofLocations__c}" style="{!IF(acc.NumberofLocations__c < 5, 'background-color:red;', 'background-color:green;')}"/>
</apex:dataTable>
</apex:page>

 

Controller:

Public class UsingStylesInDataTableController {

public Integer num1{get;set;}
public List<Account> accs{get; set;}

public UsingStylesInDataTableController(){
    num1 = 10;
    accs = [select id, name, NumberofLocations__c from account limit 10];
}
}

 

Hope it will help and resolves your issue !!:)

 

Cheers,

Sankalp Jhingran

forcesecrets.blogspot.com

 
nasir jawednasir jawed

Hi Sankalp Jhingran,

 

Thanks for your reply.

 

Well i got this problem solved by using rowClasses="even,odd" and then i used CSS for this and this was done.

 

Thanks