Solved

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

Posted on 2013-06-15
9
2,051 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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
 
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

Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

Question has a verified solution.

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

User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Whether you've completed a degree in computer sciences or you're a self-taught programmer, writing your first lines of code in the real world is always a challenge. Here are some of the most common pitfalls for new programmers.
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…
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

726 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