CODEWITHSUNDEEP
asp.netgridview
Janet
Janet

Reputation: 1411

How to add a tooltip on mouse over on the Grid View Column Heading

When the user hover overs the column heading of a column in gridview for eg: Column Heading Year, when I hover over Year I should see an explanation of what that Year means "This is the year when the student joined the college etc".

Below is my ascx code:

 <asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False"
                AllowPaging="true" AllowSorting="true" CellSpacing="0" CellPadding="5" PageSize="20"
        OnRowDataBound="grdView_RowDataBound">
                <Columns>
 <asp:TemplateField HeaderText="ID Number" ItemStyle-Width="90px" >
    <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("ID")%'></asp:Label>
    </ItemTemplate>
 </asp:TemplateField><asp:BoundField DataField="StudentName" HeaderText="StudentName"> </asp:BoundField>

Please let me know how could I have hover over texts or tooltips on column headings of my gridview. Thanks,

Upvotes: 9

Views: 45695

Answers (6)

Code
Code

Reputation: 749

 <ItemTemplate>                                                                               <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Bind("EmpInfoDetail") %>' />                                                                                                                                                              <asp:Label ID="Label3" runat="server" Text="" Visible="false" Font-Bold="true" ForeColor="#cc3300" CssClass="tooltip"></asp:Label>                                                                                                                                                                                                                                                                                         </ItemTemplate> 
    


     use this code on grid view row data bound   
        #region show grid text on mouse hover
                        if (e.Row.RowType == DataControlRowType.DataRow)
                        {
                            DataRowView drv = e.Row.DataItem as DataRowView;
                            Label test = e.Row.FindControl("Label3") as Label;
                            if (drv["EmpInfoDetail"].ToString().Length > 500)
                            {
                                test.Text = drv["EmpInfoDetail"].ToString().Substring(0, 500) + "...";
                            }
                            else
                            {
                                test.Text = drv["EmpInfoDetail"].ToString();
                            }
            
                            e.Row.Cells[1].ToolTip = drv["EmpInfoDetail"].ToString();
            
                        }
                        #endregion

Upvotes: 0

crokusek
crokusek

Reputation: 5654

Here's an example showing its possible to use ColumnName's to even when Autogenerate=True and the GridView columns were dynamically determined.

Also HtmlDecode() seemed to be required when the text contains escaped characters such as double quotes.

Dictionary<string, int> _headerIndiciesForDetailsReportGridView = null;

protected void detailsReportGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (_headerIndiciesForDetailsReportGridView == null)
    {
        int index = 0;
        _headerIndiciesForDetailsReportGridView = ((Table)((GridView)sender).Controls[0]).Rows[0].Cells
            .Cast<TableCell>()
            .ToDictionary(c => c.Text, c => index++);
    }

    if (e.Row.RowType == DataControlRowType.DataRow)
    {                            
        TableCell cell = e.Row.Controls[_headerIndiciesForDetailsReportGridView["theColumnName"]] as TableCell;

        // Shorten text in a particular column to a max of 20 characters.
        // Set tooltip to the full original text. Decode to remove &quot, etc.
        //
        string orgText = cell.ToolTip = HttpUtility.HtmlDecode(cell.Text);

        if (orgText.Length > 20)    // If cell text should be shortened
            cell.Text = HttpUtility.HtmlEncode(orgText.Substring(0, 20) + "...");
    }
}

Upvotes: 1

Code
Code

Reputation: 749

if (e.Row.RowType == DataControlRowType.DataRow)
{
     e.Row.Cells[1].ToolTip = Grd.Columns[1].HeaderText;
}

Upvotes: 2

Kesavarapu Venkatesh
Kesavarapu Venkatesh

Reputation: 242

Here is the CSS tooltip for Gridview in C# using Jquery

protected void grd_popup_details_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
        }
    }

Refference link

Upvotes: 9

crs0794
crs0794

Reputation: 91

In your code behind, create the method rowDataBound for the GridView and add the below code

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Header)
    {
        foreach (TableCell cell in e.Row.Cells)
        {
            cell.Attributes.Add("title", "Tooltip text for " + cell.Text);
        }
    }
}

Don't forget to set the attribute OnRowDataBound in the GridView.

http://rosshawkins.net/archive/2007/04/15/adding-tooltips-to-gridview-headers.html.aspx

Upvotes: 7

Peter Butkovic
Peter Butkovic

Reputation: 12189

I've never done any asp.net development, but there seems to be a solution provided here: how to add title for every header column in gridview in ASP.NET

your sample could look like this:

 <asp:GridView ID="grdView" runat="server" Width="900px" AutoGenerateColumns="False"
            AllowPaging="true" AllowSorting="true" CellSpacing="0" CellPadding="5" PageSize="20"
    OnRowDataBound="grdView_RowDataBound">
            <Columns>
 <asp:TemplateField HeaderText="ID Number" ItemStyle-Width="90px" >
<HeaderTemplate>
       <asp:Label ID="Header" ToolTip="HERE WE GO!!!!" runat="server" Text="Label"></asp:Label>
       </HeaderTemplate>
    <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("ID")%'></asp:Label>
    </ItemTemplate>
 </asp:TemplateField><asp:BoundField DataField="StudentName" HeaderText="StudentName"> </asp:BoundField>

I would give that a try :)

Upvotes: 8

Related Questions