Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2013-06-15
9
Medium Priority
?
2,133 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 42

Expert Comment

by:Meir Rivkin
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:Meir Rivkin
ID: 39252275
Can u post the html after the datalist is rendered?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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:
Meir Rivkin earned 2000 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:Meir Rivkin
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:Meir Rivkin
ID: 39255821
ur welcome.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
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…
Are you ready to place your question in front of subject-matter experts for more timely responses? With the release of Priority Question, Premium Members, Team Accounts and Qualified Experts can now identify the emergent level of their issue, signal…

618 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