Friday, July 9, 2010

Alternate Row Color in SharePoint Dataview Web Part List items

Conditional Formatting? sure, but the problem is: If some of the rows are hidden, then conditional formatting will lose its formatting. So, using Javascript and CSS we can apply alternate styles to SharePoint List items.

Sample screen:
Alternate color in SharePoint dataview List items



Just add a content editor web part, and place the below code.

<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("makeAlternateColor()");

function makeAlternateColor() 
{
var table = document.getElementById("Dashboard"); //Get the SharePoint List view's Table id using Firebug or IE Developer Toolbar's help and replace "Dashboard". Otherwise this code wont work!
var rows = table.getElementsByTagName("tr"); 
//manipulate rows
for(i = 0; i < rows.length; i++)
{ 
if(i % 2 == 0)
{
rows[i].className = "even";
}else
{
rows[i].className = "odd";
} 
}
} 
</script>
<style type="text/css">
.odd
{
background-color: white;
}
.even
{
background-color: yellow;
}
</style>



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Five Challenges in SharePoint Security
...And How to Solve Them. Free White Paper
*Sponsored


Check out these SharePoint products:

3 comments :

  1. Thanks Salaudeen Rajack ,

    the code worked fine.... bt it creates problem if we delete any of the list item..... for example if I delete the 2nd row then 1 and 3 row are odd numbers and the code will give the same color to both rows,instead of alternate colors. kindly help.

    ReplyDelete
    Replies
    1. Hi There,

      If you use SharePoint Designer "Conditional Formatting" to apply Alternate rows color, it would be a problem when we delete rows, as you stated.

      But here we are fetching rows at page load and apply styles dynamically, so it won't occur!

      Delete
  2. Hi,

    I didnt use the Conditional Formatting for alternate colors, but the code is still not giving the desired output

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...