Adding tooltips to datagrid rows is easy, assuming that you have already created the code for adding row highlighting. In this article I shall assume that you have already read the article entitled Datagrid Highlight a Row With Click Through. We will aim to add a tooltip reference showing the VehicleId of the datagrid row.
Lets firstly consider the datagrid definition in the .ascx file. Later we will be making reference to the VehicleId value, to be used for our tooltip, therefore ensure that it is available in the column definitions. I often have a column where I sneak these hidden items in, a status column is a good one. Note the row below where the value of the id is taken from the database.
<COLUMNS>
<asp:TemplateColumn HeaderText="Status" HeaderStyle-CssClass="subhead">
<ITEMTEMPLATE>
<asp:Label id="live" Visible="False"
Text='<%# DataBinder.Eval(Container, "DataItem.live") %> '
runat="server"></asp:Label>
<asp:Label id="sold" Visible="False"
Text='<%# DataBinder.Eval(Container, "DataItem.sold") %> '
runat="server"></asp:Label>
<asp:Label id= "sticky" Visible="false"
Text='<%# DataBinder.Eval(Container,"DataItem.sticky") %> '
runat= "server"></asp:Label>
<asp:Label id="VehicleId"
Text='<%# DataBinder.Eval(Container,"DataItem.VehicleId") %> ' Visible= "False"
runat= "server"></asp:Label>
</ITEMTEMPLATE>
</asp:TemplateColumn>
Now lets consider the code behind file .ascx.vb. I will assume that a sub-routine already exists to handle the ItemDataBound event of the datagrid and that the handling of row highlighting is working. Following the addition of the events for the row colours we need to add one more for our tooltip.
Private Sub grdListItem_OnItemBound(ByVal sender As Object, ByVal e As DataGridItemEventArgs) Handles grdListItem.ItemDataBound
Try
Dim currentColour As String
If (e.Item.ItemType = ListItemType.Item) Or (e.Item.ItemType = ListItemType.AlternatingItem) Then
e.Item.Attributes.Add("onmouseover","this.style.backgroundColor='lemonchiffon';this.style.cursor='hand'")
e.Item.Attributes.Add("onclick", "javascript:window.location.href='" & EditUrl("itemID", CType(e.Item.FindControl("id"), Label).Text, "Edit_short") & "'")
e.Item.ToolTip = "Ref: " & CType(e.Item.FindControl("VehicleId"), Label).Text
The table below is an example of the results from the above.
| Rover 214 |
Car |
| Mini Cooper |
Car |
References
Datagrid row highlighting: http://www.janetsystems.co.uk/Default.aspx?tabid=74&itemid=245
NAT October 2005