ASP.NET GridView Tips - Select row onclick

If you want to select a row in GridView by clicking anywhere on the row, here is a solution.

Check 'Enable Selection' from GridView tasks and put the following code in the RowDataBound event of the GridView as below.


Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then

e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.textDecoration='underline';")
e.Row.Attributes.Add("onmouseout", "this.style.textDecoration='none';")

e.Row.Attributes.Add("onclick", ClientScript.GetPostBackClientHyperlink(Me.GridView1, "Select$" + e.Row.RowIndex.ToString()))
End If
End Sub


If you want to hide the 'Select' link in the rows, simplest way is to clear the 'SelectText' property of 'Select' CommandField (from 'Edit Columns...' task).

ASP.NET GridView Tips - ToolTip 2

If you want to show a column value in a row tooltip, you can use the following code in Codebehind from the RowDataBound event of the GridView (VB.NET). Additionally, when you hover the mouse over the gridview row, the row will appear with underline and with 'hand' cursor.



Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

e.Row.ToolTip = e.Row.DataItem("Description").ToString

e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.textDecoration='underline';")
e.Row.Attributes.Add("onmouseout", "this.style.textDecoration='none';")

End If
End Sub

ASP.NET GridView Tips - ToolTip

If you can't display fully the columns from a database table, you can display the remaining columns in tooltips.

Here is an example where a field named 'Description' is shown truncated to 20 characters in the gridview and at the same time the field value will be displayed fully in a tooltip for the corresponding cell in Description column.

Following is the code for use in the Frontend /markup.



<asp:TemplateField HeaderText="Description"
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Left(Eval("Description"),20) %>'
tooltip='<%# Eval("Description") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>



This can be done using Codebehind from the RowDataBound event of the GridView also as follows (VB.NET) - assuming that column number 6 is 'Description' column.



Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If e.Row.RowType = DataControlRowType.DataRow Then

e.Row.Cells(5).Text = Left(e.Row.DataItem("Description").ToString, 20)
e.Row.Cells(5).ToolTip = e.Row.DataItem("Description").ToString
End If
End Sub




As posted in Microsoft ASP.NET Forum