DataList Change Row Color OnMouseOver

  • Thread starter Thread starter rn5a
  • Start date Start date
R

rn5a

I want to change the background color of a row in a DataList when the
mouse is moved over a row. This is how I tried but it doesn't change
the background color of a row in the DataList when the mouse is moved
over a row:

<script runat="server">
Sub CreateItem(ByVal obj As Object, ByVal ea As
DataListItemEventArgs)
If (ea.Item.ItemType = ListItemType.Item Or ea.Item.ItemType =
ListItemType.AlternatingItem) Then
ea.Item.Attributes.Add("onmouseover",
"this.style.backgroundColor='pink';")
End If
End Sub
</script>

<form runat="server">
<asp:DataList ID="dlUsers" OnItemCreated="CreateItem" runat="server">
<HeaderTemplate>
<table border="2">
<tr>
<th>Name</th>
<th>EMail</th>
<th>UserName</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="lavender">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="lightyellow">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</form>

Can someone please guide me on how to change the background color of a
row in a DataList when the mouse is moved over a row in the DataList?
 
Is there any reason you are using a datalist as opposed to a repeater?
Datalist may wrap your item template in some other htmls. Repeater doesn't
add anything. Anyway, if you view the html source with the browser's View
Source option, you should see the whole picture.
 
Sorry to ask but does that answer my question in anyway (no offence
intended), Eliyahu? I suppose no.

BTW, I have got quite a handful of reasons for using a DataList instead
of a Repeater. I don't mind item templates wrapping either.

Eliyahu said:
Is there any reason you are using a datalist as opposed to a repeater?
Datalist may wrap your item template in some other htmls. Repeater doesn't
add anything. Anyway, if you view the html source with the browser's View
Source option, you should see the whole picture.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]


I want to change the background color of a row in a DataList when the
mouse is moved over a row. This is how I tried but it doesn't change
the background color of a row in the DataList when the mouse is moved
over a row:

<script runat="server">
Sub CreateItem(ByVal obj As Object, ByVal ea As
DataListItemEventArgs)
If (ea.Item.ItemType = ListItemType.Item Or ea.Item.ItemType =
ListItemType.AlternatingItem) Then
ea.Item.Attributes.Add("onmouseover",
"this.style.backgroundColor='pink';")
End If
End Sub
</script>

<form runat="server">
<asp:DataList ID="dlUsers" OnItemCreated="CreateItem" runat="server">
<HeaderTemplate>
<table border="2">
<tr>
<th>Name</th>
<th>EMail</th>
<th>UserName</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="lavender">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="lightyellow">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</form>

Can someone please guide me on how to change the background color of a
row in a DataList when the mouse is moved over a row in the DataList?
Click to expand...
Click to expand...
 
Sorry if the answer sounds too indirect.

I meant to say that in a case of a DataList you may not have a clear idea
what html is produced for the item. Therefore, your ea.Item.Attributes.Add
statement may assign the attribute to not what you think. If you view the
html source, you will see exactly what your attribute got attached to and
thus get a better idea what the problem is.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]


Sorry to ask but does that answer my question in anyway (no offence
intended), Eliyahu? I suppose no.

BTW, I have got quite a handful of reasons for using a DataList instead
of a Repeater. I don't mind item templates wrapping either.

Eliyahu said:
Is there any reason you are using a datalist as opposed to a repeater?
Datalist may wrap your item template in some other htmls. Repeater
doesn't
add anything. Anyway, if you view the html source with the browser's View
Source option, you should see the whole picture.

--
Eliyahu Goldin,
Software Developer & Consultant
Microsoft MVP [ASP.NET]


I want to change the background color of a row in a DataList when the
mouse is moved over a row. This is how I tried but it doesn't change
the background color of a row in the DataList when the mouse is moved
over a row:

<script runat="server">
Sub CreateItem(ByVal obj As Object, ByVal ea As
DataListItemEventArgs)
If (ea.Item.ItemType = ListItemType.Item Or ea.Item.ItemType =
ListItemType.AlternatingItem) Then
ea.Item.Attributes.Add("onmouseover",
"this.style.backgroundColor='pink';")
End If
End Sub
</script>

<form runat="server">
<asp:DataList ID="dlUsers" OnItemCreated="CreateItem" runat="server">
<HeaderTemplate>
<table border="2">
<tr>
<th>Name</th>
<th>EMail</th>
<th>UserName</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="lavender">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr bgcolor="lightyellow">
<td><%# Container.DataItem("Name") %></td>
<td><%# Container.DataItem("EMail") %></td>
<td><%# Container.DataItem("UserName") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</form>

Can someone please guide me on how to change the background color of a
row in a DataList when the mouse is moved over a row in the DataList?
Click to expand...
Click to expand...
Click to expand...
 
Back
Top