Solved

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

Posted on 2013-06-15
9
2,004 Views
Last Modified: 2013-06-18
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
0
Comment
Question by:DeMyu
  • 5
  • 4
9 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 39250984
0
 

Author Comment

by:DeMyu
ID: 39251338
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
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39252275
Can u post the html after the datalist is rendered?
0
 

Author Comment

by:DeMyu
ID: 39254433
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>
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 42

Accepted Solution

by:
sedgwick earned 500 total points
ID: 39255412
using jquery:
$('table[id$="_DataList1"] tr:even').css("background-color", "#EEEEEE");
$('table[id$="_DataList1"] tr:odd').css("background-color", "#AAAAAA");

Open in new window

0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39255419
i removed the style from the td elements to allow jquery set the alternate colors.
screenshot
0
 

Author Comment

by:DeMyu
ID: 39255816
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>
0
 

Author Closing Comment

by:DeMyu
ID: 39255819
Thank you very much!
0
 
LVL 42

Expert Comment

by:sedgwick
ID: 39255821
ur welcome.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
.Net Web Site IIS Web.Config Content-Security-Policy 1 39
Error in JQuery 5 37
Visual Studio 2015 Source Code Control 10 32
Get Client IP on RDS - VB.NET 15 25
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
This is Part 3 in a 3-part series on Experts Exchange to discuss error handling in VBA code written for Excel. Part 1 of this series discussed basic error handling code using VBA. http://www.experts-exchange.com/videos/1478/Excel-Error-Handlin…
With the power of JIRA, there's an unlimited number of ways you can customize it, use it and benefit from it. With that in mind, there's bound to be things that I wasn't able to cover in this course. With this summary we'll look at some places to go…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now