function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shiv ShankarShiv Shankar 

alternate color for table row.

Hi i have created a one visual force page whic is rendering as PDF.

In this one table is rendering dynamicaly(not a apextable). I want to show table row in alterante color. i found some line of code which used JQuery, this works fine when i render as html but now when , i render it as 'PDF'

 

$(document).ready( function(){

$("#myTable tbody tr:visible:even",this).css('background-color','#fffffe');
$("#myTable tbody tr:visible:odd",this).css('background-color','#e0dfde');
}
)

 

Please tell solution ASAP.

bob_buzzardbob_buzzard

You won't be able to do this via jquery, or any kind of javascript, as there isn't a javascript engine associated with PDF renderers.  You'd need to do this via CSS - there's a soluton at:

 

http://stackoverflow.com/questions/3084261/alternate-table-row-color-by-css

 

but note that IE and some firefox versions don't support this.
Greg RohmanGreg Rohman

Hello.

 

I know this thread is a couple of months old, but I had a similar requirement and found a solution that worked for me.

 

In my case, my Visualforce page is controlled by a custom controller and is rendering as a PDF. In my controller, I have a wrapper class that, in addition to the object that I'm returning, also includes an "index" integer that's incremented for each record returned. A sample wrapper class is defined below:

 

    private class objWrapper {
        public Custom_Object__c deal {get;set;}
        public Integer index { get;set;}
        public objWrapper(Custom_Object__c d, Integer i){
            obj = d;
            index = i;
        }
    }

 

Then, in the Visualforce page, in the <apex:repeat> loop, I'm performing a simple MOD function to determine if the index is odd or even, and applying an "altRow" class on even rows:

 

	<table>
		<apex:repeat value="{!getterClassHere}" var="d">
		<tr class="{!IF(MOD(d.index,2)==1,'','altRow')}">
			<td><apex:outputText value="{!d.obj.Name}"/></td>
		</tr>
		</apex:repeat>
	</table>

 

 

Hope that helps.

 

-Greg
pgleonardpgleonard
Thanks Greg!  I see that this is a year old thread, but I had a similar issue, and creating a wrapper plus some CSS worked beautifully.
Vladimir Romanov #1Vladimir Romanov #1
Hello,
just to add: there is an alternative solution using <apex:variable> to alternate row's classes coined by Mitesh Sura here: https://developer.salesforce.com/forums/ForumsMain?id=906F00000009FKiIAM
Regards,
Vladimir