lunes, 20 de julio de 2009

ASP.NET – Tooltip en HeaderImageUrl del gridview

risk_gridview El control gridview nos permite poner una imagen como alternativa al texto de la cabecera de una columna, esta imagen la ponemos usando el atributo HeaderImageUrl de un TemplateField:
<asp:GridView ID="gridrisk_event" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:TemplateField HeaderImageUrl="~/images/locked.gif">
<ItemTemplate>
<asp:CheckBox ID="chkInactive" Enabled="false" runat="server" Checked='<%#Eval("IsInactive") %>' />
</ItemTemplate>
</asp:TemplateField>
… …
</Columns>
</asp:GridView>
Y eso, es todo… la imagen se verá muy bien… pero a veces, la image necesita una pequeña ayudita, como por ejemplo, poenerle un tooltip… porque no siempre es obvio lo que representa… entonces, para ponerle tooltip a la imagen, usamos el evento RowDataBound del gridview:
Private Sub gridrisk_event_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridrisk_event.RowDataBound
If e.Row.RowType = DataControlRowType.Header Then
     e.Row.Cells(0).ToolTip = "Indica si el riesgo ha sido desactivado."
End If
End Sub
Donde e.Row.Cells(0) representa la cabecera de la primera columna, si quisieras la cabecera de la segunda columna … cómo harías? obvio: e.Row.Cells(1)
La otra forma consiste en añadir una columna de tipo templateField, y usar HeaderTemplate para poner nuestra imagen con su tooltip… más o menos así:
<asp:TemplateField HeaderStyle-Width="1%">
<HeaderTemplate>
<asp:Image ID="Image2" ImageUrl="~/images/locked.gif" ToolTip="Indica si el usuario ha sido bloqueado" runat="server" />
</HeaderTemplate>
<ItemTemplate>
… … … … …                       
</ItemTemplate>
</asp:TemplateField>

Eso sería todo, el tooltip mejorará tu gridview ;)

No hay comentarios.: