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
Solved

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

Posted on 2013-06-15
9
2,035 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

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 …
A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in an application. Themes can be made up of a set of elements: skins, style sheets, images, and o…
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…
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…

829 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