Edit in gridview using jquery

PressMe
Introduction

In this example i am using the same table as I was in my previous article.

Create a new web page and add a gridview like this

<asp:GridView ID="GridView1"  AutoGenerateColumns="false" runat="server" 
            CellPadding="4" ForeColor="#333333" 
        GridLines="None" RowStyle-CssClass="record" Width="588px" 
            >
        <RowStyle BackColor="#EFF3FB" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" Width="270px" />
        <EditRowStyle BackColor="#2461BF" />
        <AlternatingRowStyle BackColor="White" />
         <RowStyle CssClass="record" Width="80px"></RowStyle>
        <Columns >       
        
        <asp:TemplateField HeaderText="Name" HeaderStyle-Width="80px" ItemStyle-Width="270px" >
        <ItemTemplate>
        <span id= 'second<%# Eval("Id") %>'   class='text'><%# Eval("name") %> </span>
        <input type="text" id='temp1<%# Eval("ID") %>' class='edit' value ='<%# Eval("name") %>' />
        </ItemTemplate>

        </asp:TemplateField>
       
        <asp:TemplateField HeaderText="Department" HeaderStyle-Width="80px"  ItemStyle-Width="270px">
        <ItemTemplate >
        <span id= 'third<%# Eval("Id") %>'   class='text'><%# Eval("dept") %> </span>
        <input type="text" id='temp2<%# Eval("ID") %>' class='edit' value ='<%# Eval("dept") %>' />
        </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderText="Salary"  HeaderStyle-Width="80px" ItemStyle-Width="270px" >
        <ItemTemplate>
        <span id= 'fourth<%# Eval("Id") %>'   class='text'><%# Eval("salary") %> </span>
        <input type="text" id='temp3<%# Eval("ID") %>' class='edit' value ='<%# Eval("salary") %>' />
        </ItemTemplate>

        </asp:TemplateField>
        <asp:TemplateField HeaderText="Edit"  HeaderStyle-Width="80px" ItemStyle-Width="270px">
        <ItemTemplate>
        <input type="button" id='edit<%# Eval("ID") %>' value="Edit" class='btn1' />
         <input type="button" id='update<%# Eval("ID") %>' value="Update" class='btn3' />
         <input type="button" id='cancel<%# Eval("ID") %>' value="cancel" class='btn2' />
        </ItemTemplate>
        </asp:TemplateField>       
        </Columns>
    </asp:GridView>

Go to cs page write this code

SqlConnection con = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

               SqlDataAdapter da = new SqlDataAdapter("select * from testemp1", con);
            DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();            
            }

        }

if we run we get a screen like this

this data is shown in a span.for editing there is a text box in each row that is not visible

this is the code for edit button

this is style sheet

 <style type="text/css">
    .edit
    {
     display: none;
     width:80px;
    }
</style>

$(document).ready(function() {

             $('.btn2').hide();
             $('.btn3').hide();
             $('.btn1').click(function() {//edit button
                 $('#result').hide();
                 $('.btn1').show();                 
                 $('.btn3').hide();
                 $('.edit').hide();
                 $('.text').show();
                 $('.btn2').hide();
                 var ID = $(this).attr('id').replace("edit", "")
                 $('#cancel' + ID).show();
                 $('#update' + ID).show();
                 $('#edit' + ID).hide();
                 $('#temp1' + ID).show();
                 $('#temp2' + ID).show();
                 $('#temp3' + ID).show();
                 $('#second' + ID).hide();
                 $('#third' + ID).hide();
                 $('#fourth' + ID).hide();            


             });
});

if we press edit button we get a screen like this



here the datas in span is hide and datas in text box is visible
if we press cancel we get old screen

code for cancel button

$('.btn2').click(function() {//cancel button
                 $('.btn1').show();     
                 
                 var ID = $(this).attr('id').replace("cancel", "")
                 $('#update' + ID).hide()
                 $('#temp1' + ID).hide();
                 $('#temp2' + ID).hide();
                 $('#temp3' + ID).hide();
                 $('.btn2').hide();
                 $('#second' + ID).show();
                 $('#third' + ID).show();
                 $('#fourth' + ID).show();


             });

next iam going to write update
this is code for update

$('.btn3').click(function() { //update button

                 $('#result').show();
                 $('.btn3').hide();
                 $('.btn1').show();
                 $('.btn2').hide();
                 var id = $(this).attr('id');
                 var ID = id.replace("update", "");
                 var td = $(this).closest('tr').children('td');
                 var name = $('#temp1' + ID).val();
                 var dept = $('#temp2' + ID).val();
                 var salary = $('#temp3' + ID).val();
                 var Data = 'id=' + ID + '&name=' + name + '&dept=' + dept + '&salary=' + salary;
                 


                 if (name.length > 0 && dept.length > 0 && salary.length > 0) {
                     $.ajax({
                         type: "GET",
                         data: Data,
                         contentType: "text/html; charset=utf-8",
                         url: "gridprocess.aspx",
                         success: function(data) {
                             $('#temp1' + ID).hide();
                             $('#temp2' + ID).hide();
                             $('#temp3' + ID).hide();
                             $('#second' + ID).show();
                             $('#third' + ID).show();
                             $('#fourth' + ID).show();
                             $("#second" + ID).html(name);
                             $("#third" + ID).html(dept);
                             $("#fourth" + ID).html(salary);
                             $('#result').html("<b >Updated successfully</b>");

                         }

                     });
                 }
             });

here we are passing value to gridprocess.aspx

add another web page and change to gridprocess.aspx

in the load event  write this code

 SqlConnection con = new SqlConnection("Data Source=BAIJU;Initial Catalog=baiju;Integrated Security=True");
        protected void Page_Load(object sender, EventArgs e)
        {
            string msg;
            string id = Request.QueryString["id"];
            string name = Request.QueryString["name"];
            string dept = Request.QueryString["dept"];
            string sal = Request.QueryString["salary"];
            SqlCommand cmd = new SqlCommand("update testemp1 set name='" + name + "',dept='" + dept + "',salary='" + sal + "' where id='" + id + "'", con);
            try
            {

                con.Open();
                cmd.ExecuteNonQuery();
                msg = "Success";
                Response.Write(msg);
            }
            catch (Exception ex)
            {
                msg = ex.Message;
                Response.Write(msg);

            }
            finally
            {
                con.Close();

            }

        }