It is relatively easy to add alternating colours to the rows in your
datagrid. However, when we move the mouse over the rows we may want to highlight
this row, and possibly to add the option of a click through based on the row
selected. This is the basis of this article.
As a quick refresh to set the rows to be alternating add the following
parameters to the datagrid definition, between the tag definitions.
<ALTERNATINGITEMSTYLE
backcolor="Gainsboro">
<ITEMSTYLE backcolor="WhiteSmoke"
font-names="Verdana" font-size="10px"
horizontalalign="Right">
</ITEMSTYLE>
</ALTERNATINGITEMSTYLE>
<asp:datagrid id="grdListItem" visible="False"
allowpaging="True" ="" bordercolor="transparent" borderwidth="0"
cellpadding="4" autogeneratecolumns="False" runat="server"
gridlines="None">
</EDITITEMSTYLE>
<ALTERNATINGITEMSTYLE
backcolor="Gainsboro">
</ALTERNATINGITEMSTYLE>
<ITEMSTYLE
backcolor="WhiteSmoke" font-names="Verdana" font-size="10px"
horizontalalign="Right">
</ITEMSTYLE>
<COLUMNS>
</COLUMNS>
Now to add the mouse effects we add OnItemDataBound="dtgMydatagrid_ItemDataBound"to the
datagrid definition and supply the appropritate function.
Public Sub dtgMydatagrid_ItemBound(ByVal sender As
Object, ByVal e As DataGridItemEventArgs) Handles
dtgMydatagrid.ItemCreated
Dim currentColour As String< BR > If
e.Item.ItemType =
ListItemType.ItemOre.Item.ItemType=ListItemType.AlternatingItemOr e.Item.ItemType=ListItemType.SelectedItemThen
e.Item.Attributes.Add("onmouseover","this.style.backgroundColor='beige';this.style.cursor='hand'")
e.Item.Attributes.Add("onclick","javascript:window.location.href='default.aspx?id="
& e.Item.Cells(0).Text & "'")
End If
If e.Item.ItemType =
ListItemType.Item Then
currentColour =
dtgMydatagrid.ItemStyle.BackColor.ToKnownColor.ToString
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='" &
currentColour & "'")
End If
If e.Item.ItemType =
ListItemType.AlternatingItem Then
currentColour =
dtgMydatagrid.AlternatingItemStyle.BackColor.ToKnownColor.ToString
e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='" &
currentColour & "'")
End If
End Sub
| Adding an Image to an HTML Page |
|
Images are added to HTML content using the IMG tag: <IMG
src="/Portals/0/myimagefile.gif">. This is a
stand alone element, without a closing part.
| |
| Adding Background Sounds to an HTML Page |
|
There are two tags which enable you to add sounds to a web page. Internet
explorer uses the <BGSOUND> tag and Netscape uses the <EMBED>
tag | |
NAT August 2005 (Revised)