Home > ASP.Net, Jquery > ASP.Net GridView Row Custom Tooltip Using JQuery

ASP.Net GridView Row Custom Tooltip Using JQuery


Hi all,

try this example to Create Row Custom Tooltip Using JQuery With ASP.Net GridView


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .tooltip
        {
            display: none;
            border: solid 1px #708069;
            background-color: #289642;
            color: #fff;
            line-height: 25px;
            border-radius: 5px;
            padding: 5px 10px;
            position: absolute;
            z-index:1001;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function () {
            $(".tooltip").closest("tr").mousemove(function (event) {
                $(this).find(".tooltip").css({
                    "left": event.pageX + 1,
                    "top": event.pageY + 1
                }).show();
            }).mouseout(function () { $(this).find(".tooltip").hide(); }); ;
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView ID="gv" runat="server" CellPadding="4" ForeColor="#333333"
            AutoGenerateColumns="False" DataKeyNames="EmployeeID" 
            DataSourceID="sds_Employee">
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <Columns>
                <asp:BoundField HeaderText="EmployeeID" DataField="EmployeeID" 
                    InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" />
                <asp:BoundField HeaderText="FirstName" DataField="FirstName" 
                    SortExpression="FirstName" />
                <asp:BoundField HeaderText="LastName" DataField="LastName" 
                    SortExpression="LastName" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <div class="tooltip">
                            Full Name :
                            <%#Eval("FirstName")%> &nbsp; <%#Eval("LastName")%>

                            Title :
                            <%#Eval("Title")%>

                            Address :
                            <%#Eval("Address")%>

                            City :
                            <%#Eval("City")%>
                            

                            Postal Code :
                            <%#Eval("PostalCode")%>

                            Region :
                            <%#Eval("Region")%>

                        </div>
                    </ItemTemplate>
                </asp:TemplateField>    
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="sds_Employee" runat="server" 
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" 
            SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title], [TitleOfCourtesy], [BirthDate], [HireDate], [Address], [City], [Region], [PostalCode] FROM [Employees]">
        </asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: