Introduction

Step 1

Create table, using query, mentioned below.
  1. CREATE TABLE [tblgrid](
  2. [UserId] [int] IDENTITY(1,1) NOT NULL,
  3. [userName] [varchar](50) NULL,
  4. [City] [varchar](50) NULL,
  5. [Designation] [varchar](50) NULL,
  6. [sal] [bigint] NULL
  7. )
Step 2
Add below code to .aspx file.
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4. <title></title>
  5. <script src="http://dotnettricks-abdul.in/Contents/jquery-1.4.1.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. function visiblefalse() {
  9. $("#dv").attr("style", "display:none");
  10. $("#GridView1″).attr("
  11. style ", "
  12. backgroundColor: white ");
  14. }
  16. function GetDetails(id) {
  18. WebService.GetAllData(id, success, failure);
  19. }
  21. function success(result) {
  22. $(result).each(function(i) {
  23. var username = result[i].userName;
  24. var City = result[i].City;
  25. var des = result[i].des;
  26. var sal = result[i].sal;
  27. $("div[id$=dv]").attr("style", "block");
  28. $("#UName").html(username);
  29. $("#City").html(City);
  30. $("#Des").html(des);
  31. $("#Sal").html(sal)
  32. });
  33. }
  35. function failure() {
  36. alert("error");
  38. }
  39. </script>
  40. </head>
  42. <body>
  43. <form id="form1″ runat=" server ">
  44. <div>
  45. <asp:GridView ID="GridView1″ runat="server" AutoGenerateColumns="False" DataKeyNames="UserId,userName" EnableModelValidation="True" OnRowCommand="GridView1_RowCommand" HeaderStyle-BorderWidth="1″
  46. HeaderStyle-Font-Bold=" true " OnRowDataBound="GridView1_RowDataBound ">
  47. <Columns>
  48. <asp:TemplateField HeaderText="UserName ">
  49. <ItemTemplate>
  50. <asp:Label ID="lblitemUser " runat="server " Text=’<%# Eval("userName ") %>’></asp:Label>
  51. </ItemTemplate>
  52. </asp:TemplateField>
  53. <asp:TemplateField HeaderText="City ">
  54. <ItemTemplate>
  55. <asp:Label ID="lblitemCity " runat="server " Text=’<%# Eval("City ") %>’></asp:Label>
  56. </ItemTemplate>
  57. </asp:TemplateField>
  58. <asp:TemplateField HeaderText="Designation ">
  59. <ItemTemplate>
  60. <asp:Label ID="lblDesig " runat="server " Text=’<%# bind("Designation ")%>’></asp:Label>
  61. </ItemTemplate>
  62. </asp:TemplateField>
  63. <asp:TemplateField HeaderText="Salary ">
  64. <ItemTemplate>
  65. <asp:Label ID="lblsal " runat="server " Text=’<%# Eval("sal ") %>’></asp:Label>
  66. </ItemTemplate>
  67. </asp:TemplateField>
  68. </Columns>
  69. </asp:GridView>
  70. </div>
  71. <div>
  72. <asp:Label ID="lblresult " runat="server "></asp:Label>
  73. </div>
  74. <div id="dv " runat="server " style="display: none; ">
  75. <table>
  76. <tr>
  77. <td>
  78. User Name:
  79. </td>
  80. <td id="UName ">
  81. </td>
  82. </tr>
  83. <tr>
  84. <td>
  85. City:
  86. </td>
  87. <td id="City ">
  88. </td>
  89. </tr>
  90. <tr>
  91. <td>
  92. Designation:
  93. </td>
  94. <td id="Des ">
  95. </td>
  96. </tr>
  97. <tr>
  98. <td>
  99. Salary:
  100. </td>
  101. <td id="Sal ">
  102. </td>
  103. </tr>
  104. </table>
  105. <asp:ScriptManager ID="ScriptManager1″ runat="server">
  106. <Services>
  107. <asp:ServiceReference Path="~/WebService.asmx" />
  108. </Services>
  109. </asp:ScriptManager>
  110. </div>
  111. </form>
  112. </body>
  114. </html>
Step 3

Add below code to .cs page.
  1. SqlConnection con = new SqlConnection("Data Source=.\\SQLExpress;Initial Catalog=abc;Integrated Security=True");
  2. SqlDataAdapter da = new SqlDataAdapter();
  3. DataSet ds = new DataSet();
  4. protected void Page_Load(object sender, EventArgs e)
  5. {
  6. if (!IsPostBack)
  7. {
  8. bind();
  10. }
  11. }
  13. protected void bind()
  14. {
  16. SqlCommand cmd = new SqlCommand("select * from tblgrid", con);
  18. da.SelectCommand = cmd;
  19. da.Fill(ds, "tblgrid");
  20. if (ds.Tables[0].Rows.Count > 0)
  21. {
  22. GridView1.DataSource = ds.Tables[0];
  23. GridView1.DataBind();
  24. }
  26. }
  28. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  29. {
  30. if (e.Row.RowType == DataControlRowType.DataRow)
  31. {
  32. e.Row.Attributes.Add("onclick", "JavaScript: GetDetails('" + Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Value.ToString()) + "')");
  33. e.Row.Attributes.Add("onmouseover", "JavaScript:this.style.cursor=’pointer’; this.style.backgroundColor=’Red’");
  34. e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=’white’");
  35. }
  36. }
Step 4
Create webService project.
  1. [WebMethod]
  2. public GetRec[] GetAllData(int ID)
  3. {
  4. SqlCommand cmd = new SqlCommand("select userName,City,Designation,sal from tblgrid where UserId="+ID);
  5. DataTable dt = new DataTable();
  6. cmd.Connection = con;
  7. da.SelectCommand = cmd;
  8. //da.Fill(ds, "tblgrid");
  9. da.Fill(dt);
  10. List<GetRec> objList = new List<GetRec>();
  11. foreach(DataRow dr in dt.Select())
  12. {
  13. objList.Add(new GetRec
  14. {
  15. userName=dr["userName"].ToString(),
  16. City=dr["City"].ToString(),
  17. des = dr["Designation"].ToString(),
  18. sal = Convert.ToInt32(dr["sal"])
  20. }
  21. );
  22. }
  23. return objList.ToArray();
  24. }
  26. public struct GetRec {
  28. public string userName { get; set; }
  29. public string City { get; set; }
  30. public string des { get; set; }
  31. public int sal { get; set; }
  33. }
Step 5
We got the output, mentioned below.