asked on

ASP.NET alternate the background color of the rows in a Datalist control

I would like to alternate the background color of the rows in the following Datalist control.

<div align="center">
<asp:DataList
datasourceid="xmlDataSource"
repeatcolumns="2"
repeatdirection="horizontal"
cellpadding="5"
repeatlayout="Table"
headerstyle-verticalalign="Top"
id="DataList1"
onitemdatabound="Item_Bound"
runat="server">
<ItemTemplate>
<img src="images/products/<%# Eval("prodimg") %>" width="250" height="200" /><br />
<center><span style="text-align:center;font-weight:bold;"><%# Eval("prodname") %></span></center>
</ItemTemplate>

</asp:DataList>

<asp:XmlDataSource id="xmlDataSource" runat="server" datafile="~/productdatasource.xml" />

</div>

Sub Item_Bound(ByVal sender As Object, ByVal e As DataListItemEventArgs)

If e.Item.ItemType = ListItemType.AlternatingItem Then

e.Item.BackColor = Color.lightgray

End If

End Sub

However, it is only working along the column. I have searched all over for a solution but was not able to find one. I will appreeciate someone's assistance.

Thank you.

DeMuy
datalist-image.png

Meir Rivkin

use ItemDataBound:
http://www.codeproject.com/Questions/256899/how-to-set-color-of-datalist-rows

DeMyu

ASKER

Sedgwick, Thank you. I am using ItemDataBound, however, the link in your response requires that I have a column/field name color. How can I do this without doing that? I will really appreciate your assistance. I have spent a lot of time on this routine.

Thank you again.

DeMuy

Meir Rivkin

Can u post the html after the datalist is rendered?

DeMyu

ASKER

Sorry, here is the rendered HTML:

<table id="ctl00_maincontent_DataList1" cellspacing="0" cellpadding="5" border="0" style="border-collapse:collapse;">
      <tr>
            <td>
<img src="images/products/product1.jpg" width="250" height="200" /><br />
<strong>product 1</strong>
</td><td style="background-color:#EEEEEE;">
<img src="images/products/product4.jpg" width="250" height="200" /><br />
<strong>product 4</strong>
</td>
      </tr><tr>
            <td style="background-color:#EEEEEE;">
<img src="images/products/product2.jpg" width="250" height="200" /><br />
<strong>product 2</strong>
</td><td>
<img src="images/products/product5.jpg" width="250" height="200" /><br />
<strong>product 5</strong>
</td>
      </tr><tr>
            <td>
<img src="images/products/product3.jpg" width="250" height="200" /><br />
<strong>product 3</strong>
</td><td style="background-color:#EEEEEE;">
<img src="images/products/product6.jpg" width="250" height="200" /><br />
<strong>product 6</strong>
</td>
      </tr>
</table>

ASKER CERTIFIED SOLUTION

Meir Rivkin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Meir Rivkin

i removed the style from the td elements to allow jquery set the alternate colors.

DeMyu

ASKER

Thanks, I did as suggested and voila the datalist was rendered as expected.

Here is what I added.

<script type='text/javascript'>
$(document).ready(function() {
$('table[id$="_DataList1"] tr:even').css("background-color", "#EEEEEE");
$('table[id$="_DataList1"] tr:odd').css("background-color", "#AAAAAA");
});
</script>

DeMyu

ASKER

Thank you very much!

Meir Rivkin

ur welcome.