Tuesday 1 May 2012

tool tip in gride view using jquery,json and webservice

Page looks like



<%@ 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">
.ShowPopup
{
    z-index: 100;
    border-bottom: #87a5d9 1px solid;
    position: absolute;
    border-left: #87a5d9 1px solid;
    background-color: #b4d5ff;
    padding-left: 10px;
    display: none;
    color: #0d357b;
    border-top: #87a5d9 1px solid;
    top: 0px;
    border-right: #87a5d9 1px solid;
    left: 0px;
}
.ClosePopup
{
    padding-bottom: 0px;
    margin: 0px;
    padding-left: 0px;
    width: 20px;
    padding-right: 0px;
    background: url(../images/quite.png) no-repeat;
    float: right;
    height: 15px;
    cursor: pointer;
    padding-top: 0px;
}
</style>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript" language="javascript"></script>
     <script type="text/javascript" language="javascript">
         $(document).ready(function () {
             $("#<%=gv.ClientID%>>tbody>tr>td:nth-child(3)").find('.aa').css("cursor", "pointer").click(function (e) {//gridview column 3 mouse over
                 e.preventDefault();
                 var row = $(this).closest("tr"); //current row
                 var id = row.find("input[type=hidden][id*=hf]").val();
                 var data = { RequestId: id }; //Itemtemplate value                       
                 data = JSON.stringify(data);
                 $.ajax({
                     type: "POST",
                     contentType: "application/json; charset=utf-8",
                     url: "WebService.asmx/GetAllData",
                     data: data,
                     //data: "{}", //for empty functuion
                     dataType: "json",
                     success: insertCallback
                 });
                 function insertCallback(result) {
                     // res = result["d"];
                     var res = result.d;
                     if (res != null) {

                         $('#content').html(res);
                         var height = $('#output').height();
                         var width = $('#output').width();
                         leftVal = e.pageX + 20 + 'px';
                         topVal = e.pageY + "px";
                         //show the popup message and hide with fading effect
                         $('#output').css({ left: leftVal, top: topVal }).show("slow");
                         //end seting pop up position
                     }
                     else {
                         alert("Could not add movie!");
                     }
                 } //end callback
             });
             $("#close").click(function () {

                 $('#output').css({ left: leftVal, top: topVal }).hide("slow");
             });
         });
  
         
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <center>
    <asp:GridView ID="gv" runat="server" AutoGenerateColumns="false">
    <Columns>
  <asp:BoundField HeaderText="EID" DataField="EID" />
  <asp:BoundField HeaderText="NAME" DataField="NAME" />
    <asp:TemplateField HeaderText="DID">
    <ItemTemplate>
    <asp:LinkButton ID="lbt" runat="server" CssClass="aa" Text='<%#Eval("did") %>'></asp:LinkButton>
    <asp:HiddenField ID="hf" runat="server" Value='<%#Eval("did") %>' />
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>
    </center>
     <div id="output" class="ShowPopup" style="height:300px; width:600px">
            <div id="closepopup">
                <div id="close" class="ClosePopup" style="color:White; font-size:larger; font-weight:900">
                X
                </div>
            </div>
            <div id="content">
            </div>
        </div>
    </div>
    </form>
</body>
</html>
Webservice Code :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Text;


[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService ()
    {

    }

  
    [WebMethod]
    public string GetAllData(string RequestId)
    {
        string s = "";

        if (RequestId != null)
        {
            string[] ar = RequestId.Split('/');
            string reqid = ar[ar.Length - 1].ToString();


            //int lastslash =int.Parse(RequestNo.LastIndexOf("/"));
            //int length1=int.Parse(RequestNo.Length-1.ToString());
            //string RequestId =RequestNo.Substring(lastslash,length1);
            StringBuilder sb = new StringBuilder();
            sb.Append("<table cellpadding='5' cellspacing='2'>");
            sb.Append("<tr><td colspan='8'><h3><center><b>Department Details</b></center></td></tr>");
            DataClassesDataContext o = new DataClassesDataContext();

            var result = from g in o.DEPTs
                         where g.DID == int.Parse(RequestId)
                         select g;

            foreach (var row in result)
            {
                sb.Append("<tr>");
                sb.Append("<td>" + row.DID.ToString() + "</td>");
                sb.Append("<td>" + row.DNAME.ToString() + "</td>");

                sb.Append("</tr>");


            }
            sb.Append("</table>");
            s = sb.ToString();
        }
        return s;
    }
   
}

1 comment:

  1. Do not take it easy.I have got your address from your blog.Then its easy for me to give a case in police station against you.your all article copied from code project or different Blogs.You have five day in your hand delete your blog or delete all content otherwise you have to penalized to jail and your carrier may be stop.Be serious and delete it as soon as possible.Scott Microsoft Team Member

    ReplyDelete