?
Solved

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

Posted on 2013-06-15
9
Medium Priority
?
2,098 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: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
Docker-Compose to Simplify Multi-Container Builds

Our veteran DevOps Author takes you through how to build a multi-container environment, managed with a single utility in order to simplify your deployments.

 

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

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

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.…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
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…
Monitoring a network: how to monitor network services and why? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the philosophy behind service monitoring and why a handshake validation is critical in network monitoring. Software utilized …

770 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