Post
Ask Question

Display GridView Selected Row Values in TextBox Outside GridView Using jQuery

Here I will explain how to display GridView selected row cell values in TextBoxes outside the GridView using jQuery.
  1. Go to Start, All Programs and open Microsoft Visual Studio 2013.

  2. Now, click on File, then select New Project and click on Visual C#. Then select ASP.NET Web Application, Empty and press OK.

  3. Provide the web application name and location as you wish. I named my web application DisplaySelectedGridviewRowValuesInTextboxes.

  4. Now the project will open. Right-click on the web application name, add a New Item and select Web Form, then click on Add.

  5. Add the following code between the <form> tags of the WebForm1.aspx page:
    1. <div align="center">    
    2.         <table border="1">    
    3.                 <tr>    
    4.                     <td>EmpId</td>    
    5.                     <td>    
    6.                         <asp:TextBox ID="txtEmpId" runat="server" />    
    7.                     </td>    
    8.                 </tr>    
    9.                 <tr>    
    10.                     <td>EmpName</td>    
    11.                     <td>    
    12.                         <asp:TextBox ID="txtEmpName" runat="server" />    
    13.                     </td>    
    14.                 </tr>    
    15.                 <tr>    
    16.                     <td>EmpSalary</td>    
    17.                     <td>    
    18.                         <asp:TextBox ID="txtEmpSalary" runat="server" />    
    19.                     </td>    
    20.                 </tr>    
    21.                 <tr>    
    22.                     <td>Department</td>    
    23.                     <td>    
    24.                         <asp:TextBox ID="txtDept" runat="server" />    
    25.                     </td>    
    26.                 </tr>    
    27.             </table>    
    28.             <br />    
    29.             <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" AutoGenerateColumns="false">    
    30.                 <Columns>    
    31.                     <asp:BoundField DataField="EmpId" ItemStyle-CssClass="EmpId" HeaderText="EmpId"/>    
    32.                     <asp:BoundField DataField="EmpName" ItemStyle-CssClass="EmpName" HeaderText="EmpName" />    
    33.                     <asp:BoundField DataField="EmpSalary" ItemStyle-CssClass="EmpSalary" HeaderText="EmpSalary" />    
    34.                     <asp:BoundField DataField="Dept" ItemStyle-CssClass="Dept" HeaderText="Department" />    
    35.                     <asp:TemplateField>    
    36.                         <ItemTemplate>    
    37.                             <asp:LinkButton Text="Select" ID="lnkSelect" runat="server" />    
    38.                         </ItemTemplate>    
    39.                     </asp:TemplateField>    
    40.                 </Columns>    
    41.             </asp:GridView>    
    42.     </div>   
  6. Add the following code to the page load event of the WebForm1.aspx.cs page.
    1. protected void Page_Load(object sender, EventArgs e)      
    2.        {      
    3.            if (!this.IsPostBack)      
    4.            {      
    5.                DataTable dt = new DataTable();      
    6.                dt.Columns.Add("EmpId");      
    7.                dt.Columns.Add("EmpName");      
    8.                dt.Columns.Add("EmpSalary");      
    9.                dt.Columns.Add("Dept");      
    10.                dt.Rows.Add(1, "JACKSON", 75000, "RESEARCH");      
    11.                dt.Rows.Add(2, "JOHNSON", 18000, "ACCOUNTING");      
    12.                dt.Rows.Add(3, "GRANT", 32000, "SALES");      
    13.                dt.Rows.Add(4, "ADAMS", 34000, "OPERATIONS");      
    14.                GridView1.DataSource = dt;      
    15.                GridView1.DataBind();      
    16.            }      
    17.        }    
  7. Add a <script> tag between the <head> tags of the WebForm1.aspx page. You need to provide a reference for jQuery as in the following code snippet.
    1. <head runat="server">    
    2.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>    
    3. </head>  
  8. Add another <script> tag between the <head> tags and write the following code:
    1. <script type="text/javascript">    
    2.         $("[id*=lnkSelect]").live("click", function () {    
    3.             $("[id*=txtEmpId]").val($(".EmpId", $(this).closest("tr")).html());    
    4.             $("[id*=txtEmpName]").val($(".EmpName", $(this).closest("tr")).html());    
    5.             $("[id*=txtEmpSalary]").val($(".EmpSalary", $(this).closest("tr")).html());    
    6.             $("[id*=txtDept]").val($(".Dept", $(this).closest("tr")).html());    
    7.             return false;    
    8.         });    
    9.     </script>   
  9. Now run the application and you can see it in your browser.

  10. Now I am selecting EmpId 3, see the Empid 3 row cell values will be populated in the corresponding textboxes.



Similar Articles