Display Long Names in ToolTip of TextBox inside GridView using jQuery in ASP.Net

Last Reply on Mar 15, 2018 04:02 AM By kalpesh

Posted on Mar 15, 2018 12:18 AM

Hi ,

I have a grid in asp.net. i am loading 5 employee details in that grid.

i have a template filed for employee name and dispalying it in textbox.

 

now if the employee name is too big if it is more than 10characters  i need to display tootip on mouse over of that text box.

 

Thanks in advance

Posted on Mar 15, 2018 03:01 AM

Posted on Mar 15, 2018 04:02 AM Modified on on Mar 15, 2018 07:34 AM

Refer the Below Link For Your Reference.

Display GridView Row details on Cell MouseOver using jQuery ToolTip Plugin in ASP.Net

By using same article you can make it in by code as well as by Jquery Script.

By Code

HTML

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
                <asp:TextBox ID="txtName" runat="server" Text='<%#Eval("Name") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                new DataColumn("Name", typeof(string)),
                new DataColumn("Description",typeof(string)) });
        dt.Rows.Add(1, "John", "Works as a scientist in USA.");
        dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
        dt.Rows.Add(3, "Suzanne", "Content Writer in France.");
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        TextBox txtName = (e.Row.FindControl("txtName") as TextBox);
        if (txtName.Text.Length > 10)
        {
            txtName.ToolTip = txtName.Text;
        }
    }
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Description", GetType(String))})
        dt.Rows.Add(1, "John", "Works as a scientist in USA.")
        dt.Rows.Add(2, "Mudassar Kan", "ASP.Net programmer and consultant in India.")
        dt.Rows.Add(3, "Suzanne", "Content Writer in France.")
        dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub

Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim txtName As TextBox =(TryCast(e.Row.FindControl("txtName"), TextBox))
        If txtName.Text.Length > 10 Then
            txtName.ToolTip = txtName.Text
        End If
    End If
End Sub

 

By Script

Same Design and Grid Population Code on Page_Load

C#

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.ToolTip = (e.Row.DataItem as DataRowView)["txtName"].ToString();
    }
}

VB.Net

 Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.ToolTip = TryCast(e.Row.DataItem, DataRowView)("txtName").ToString()
    End If
End Sub

Script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.simpletip/1.3.1/jquery.simpletip-1.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=GridView1] tr').each(function () {
            var toolTip = $(this).attr("title");
            $(this).find("[id*=txtName]").each(function () {
                var txtName = $(this);
                if (txtName.val().length > 10) {
                    txtName.attr('title', toolTip);
                }
            });
            $(this).removeAttr("title");
        });
    });
</script>

Screenshot