:: Home     :: MS Dynamics CRM     :: .Net 1.1     :: .Net 2.0     :: Sharepoint Portal     :: Ajax


Datagrid Highlight a Row With Click Through 

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" HorizontalAlign="Right" Font-Size="10px" Font-Names="Verdana" />

<asp:datagrid id="grdListItem" GridLines="None" runat="server" AutoGenerateColumns="False" CellPadding="4" Borderwidth="0" bordercolor="transparent"  AllowPaging="True" Visible="False">
  <ALTERNATINGITEMSTYLE BackColor="Gainsboro">
  <ITEMSTYLE BackColor="WhiteSmoke" Font-Names="Verdana" Font-Size="10px" HorizontalAlign="Right">

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.Item Ore.Item.ItemType=ListItemType.AlternatingItemOr    e.Item.ItemType=ListItemType.SelectedItemThen
       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

Copyright 2005-2015, Megasolutions Ltd  |   Privacy Policy