ToolTip in GridView using JQUERY Method - 1

Klbaiju
Posted by in jQuery category on for Intermediate level | Points: 250 | Views : 12454 red flag
Rating: 5 out of 5  
 4 vote(s)

In this article I am going to show a simple tooltip in GridView using jQuery.


 Download source code for ToolTip in GridView using JQUERY Method - 1

IntroductionThis is the continuation of my previous articles
Create a table like this



next step create a webpage cricket.aspx and add a gridview like this

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
         <asp:TemplateField HeaderText="Player Name">
        <ItemTemplate>
       
            <a  href="#" class='anchor1' id='<%#Eval("pid")%>'><%#Eval("name")%></a> 
           
       
    </ItemTemplate>
        
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Age">
        <ItemTemplate>
         <span id= 'first<%# Eval("age") %>'   class='text'><%# Eval("age")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Test">
        <ItemTemplate>
         <span id= 'first<%# Eval("tests") %>'   class='text'><%# Eval("tests")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
        
         <asp:TemplateField HeaderText="ODI">
        <ItemTemplate>
         <span id= 'first<%# Eval("odi") %>'   class='text'><%# Eval("odi")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
        
         <asp:TemplateField HeaderText="Test Runs">
        <ItemTemplate>
         <span id= 'first<%# Eval("testruns") %>'   class='text'><%# Eval("testruns")%> </span>
        </ItemTemplate>
         
        </asp:TemplateField >
       
        </Columns>
        </asp:GridView>





<div id="disp"   style="position:absolute;  background-color: #FFF;    z-index: 20000; ">

on the .cs page of cricket.aspx write this code

 SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            SqlDataAdapter da = new SqlDataAdapter("select * from cricket",conn);
            DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }


run the application we get like this page


go to design view of cricket.aspx
write this jquery code

<script src="jquery-1.2.6.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
         $(document).ready(function() {


             $('.anchor1').mouseover(function() {

                 $("#disp").show();
                 var pos = $(this).offset();
                 var width = $(this).width();

                 $("#disp").css({
                     left: (pos.left + width) + 'px',
                     top: pos.top - 5 + 'px'
                 });
                 var id1 = $(this).attr("id");

               


                 var ID = 'CustomerID=' + id1;
                 $.ajax({
                     type: "GET",

                     url: "CricketProcess.aspx",
                     data: ID,

                     success: function(data) {

                         $("#disp").show("slow");
                         $("#disp").html(data);

                     }
                 });
                 return false;


             });

             $('.anchor1').mouseout(function() {
                 $("#disp").hide();

             });
         });
     
     
     
     </script>
afsa

Add new web page named it as CricketProcess.aspx

create a folder PlayerImages and add images

on the .cs pagec  of CricketProcess.aspx
write this code

 SqlConnection conn = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            string CustomerID = Request.QueryString["CustomerID"];

            SqlCommand cmd1 = new SqlCommand("select * from cricket where pid='" + CustomerID + "'", conn);
            conn.Open();
            SqlDataReader dr = cmd1.ExecuteReader();
            Response.Write(" <fieldset style=' width:250px;height:200px;border-color=gray;  '>");
            Response.Write("<table border= '0' width='250px' >");

            Response.Write("<tbody>");
            while (dr.Read())
            {
                Response.Write("<tr><td VALIGN='top'>  <img  width='100px' src='./PlayerImages/" + dr["PictureUrl"].ToString() + " '></td>");
                Response.Write("<td  VALIGN='top'><table><tr><td >  ID         :  " + dr["pid"].ToString() + "</td></tr> ");
                Response.Write("<tr><td > Name : " + dr["Name"].ToString() + "</td></tr> ");

                //Response.Write("<td>  <img  width='100px' src='./ProductImages/" + dr["PictureURL"].ToString() + " '</td>");
                Response.Write("<tr><td>Age:  " + dr["age"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>Tests:  " + dr["tests"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>TestRuns:  " + dr["testruns"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>TestCentury:  " + dr["tcenturt"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>ODI:  " + dr["odi"].ToString() + "</td> </tr>");
                Response.Write("<tr><td>ODIRuns:  " + dr["odiruns"].ToString() + "</td> </tr>");
                Response.Write("</table>");
                Response.Write("</td>");
                Response.Write("</tr>");

            }
            conn.Close();
            Response.Write("</tbody>");
            Response.Write("</table>");
            Response.Write("</fieldset>");

        }
 
run the application we get 






I hope everyone like the application

Regards
K L BAIJU

Page copy protected against web site content infringement by Copyscape

About the Author

Klbaiju
Full Name: kl baiju
Member Level:
Member Status: Member
Member Since: 9/5/2009 12:02:04 AM
Country:



Login to vote for this post.

Comments or Responses

Posted by: Raja on: 8/1/2011 | Points: 25
Very good effort, looks nice.

Keep it up!

Regards
Posted by: Dora743 on: 8/2/2011 | Points: 25
Hi can i have attached for this one
Posted by: A4u_6178 on: 8/2/2011 | Points: 25
nice article...

Posted by: Nikhilnvj on: 11/1/2011 | Points: 25
Very nice article...Thanx...:)
Posted by: COOLNIKHILJ22 on: 2/4/2012 | Points: 25
V NICE...I LIKE THIS SITE TOO MUCH...
Posted by: COOLNIKHILJ22 on: 2/4/2012 | Points: 25
BUT PLZ ATTACH DB_BACKUP FILES IN ACHIVE......
Posted by: Patel28rajendra on: 3/14/2012 | Points: 25
Hi
K L BAIJU

Very nice you explained it nicely

Keep writing this kind of cool articles
Thanks

Rajendra Patel


Posted by: Bhanu55prakash on: 10/9/2012 | Points: 25
Hi
it is very nice to develop
keep going
Posted by: Deepraj on: 10/11/2012 | Points: 25
very nice article
Posted by: reddysankark-13471 on: 10/13/2012 | Points: 25
hi

its very nice article

Login to post response

Comment using Facebook(Author doesn't get notification)