Thursday 19 April 2012

How to make Custom tool tip in Gridview



How to Create

Step 1:

Create a page Named default.aspx and pass the Gridview  and 
div sorce code inside it.


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
           
            <asp:TemplateField HeaderText = "Name">
            <ItemTemplate>
            <a href="#" class='anchor1' id='<%#Eval("Age")%>'><%#Eval("Name")%></a>
            </ItemTemplate>
            </asp:TemplateField>
           
            <asp:TemplateField HeaderText = "Age">
            <ItemTemplate>
                <asp:Label runat="server" id="lblAge" Text='<%#Eval("Age")%>'></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>
           
            <asp:TemplateField HeaderText = "Runs">
            <ItemTemplate>
                <asp:Label runat="server" id="lblRuns" Text='<%#Eval("Runs")%>'></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>
           
            <asp:TemplateField HeaderText = "Team Name">
            <ItemTemplate>
                <asp:Label runat="server" id="lblTeamName" Text='<%#Eval("TeamName")%>'></asp:Label>
            </ItemTemplate>
            </asp:TemplateField>
           
            </Columns>
            </asp:GridView>



<div id="disp" style="position:absolute;background-color:LightYellow;z-index: 20000; border: solid 1px red;">
</div>

Step 2:

Download jquery file from Here and give the Jquery code inside the Default.aspx page

<script src="jquery-1.2.6.js" type="text/javascript"></script>
     <script type="text/javascript" language="javascript">
    
     debugger;
         $(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 - 2 + 'px'
                 });
                
                // Ajax in JQuery----------------------------------------//
                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;
             });
             // Ajax in Jquery --------------------------------------//

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

             });
         });
     </script>

Step 3: 

Make a page Named:CricketProcess.aspx pass the Given below code OnLoad Event 

    protected void Page_Load(object sender, EventArgs e)
    { 
       //Response.Write(" <fieldset>");
        //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("Hello how are You.");
        //Response.Write("</fieldset>");
    }













No comments:

Post a Comment