Add (Insert) Edit Update GridView Row on Client Side using jQuery in ASP.Net

hina

SOLVED CLOSED ACTIVE ANSWERED
User: hina
Posted: on Feb 18, 2015 01:07 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 13723

My problem is that I have textbox and grid view .i have code which add text box value into grid view .but I want to when I add value In textbox then I click update button it should replace selected row.. means I select row in grid view on click row not on button these value show in textbox then I change value in text box and click on update button it should update the selected row …not add the new row means update the selected row using jquery in please help me following my code.

For add code button.

My gridview
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
                HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" Height="16px" 
                Width="475px" >
                <Columns>
                <asp:BoundField DataField="Code" ItemStyle-CssClass="Code" HeaderText="Code" ItemStyle-Width="30" />
                    <asp:BoundField DataField="Name" ItemStyle-CssClass="Currency Name" HeaderText="Currency Name" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Fc" ItemStyle-CssClass="FC" HeaderText="FC" 
                        ItemStyle-Width="150" />
                        <asp:BoundField DataField="Rate" ItemStyle-CssClass="Rate" HeaderText="Rate" 
                        ItemStyle-Width="150" />
                        <asp:BoundField DataField="Lc" ItemStyle-CssClass="LC" HeaderText="LC" 
                        ItemStyle-Width="150" />
                        <asp:TemplateField>
                <ItemTemplate>
                    <input id="Button1" type="button" value="-" />
                </ItemTemplate>
            </asp:TemplateField>
                      </Columns>
            </asp:GridView>
Textbox 
p>
      <input id="btnAddRow" type="button" value="+" OnClick="return CheckForm()"/>

    <input id="btndelete" type="button" value="-"/>

 
    </p>
    <table class="style25">
        <tr>
            <td class="style26">
                <asp:Label ID="Label28" runat="server" Text="Code"></asp:Label>
            </td>
            <td class="style27">
               <asp:TextBox ID="txtId" runat="server" />
            </td>
            <td class="style28">
                <asp:Label ID="Label29" runat="server" Text="Currency Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtCname" runat="server"   />
            </td>
        </tr>
        <tr>
            <td class="style26">
                <asp:Label ID="Label30" runat="server" Text="FC"></asp:Label>
            </td>
            <td class="style27">
                  <asp:TextBox ID="txtfc" runat="server"  CssClass="toCalculate"  />
            </td>
            <td class="style28">
                <asp:Label ID="Label31" runat="server" Text="Rate"></asp:Label>
            </td>
          
            <td>
                  <asp:TextBox ID="txtrate" runat="server"  CssClass="toCalculate" /> 
                  
            </td>
          
        </tr>
        <tr>
            <td class="style26">
                <asp:Label ID="Label32" runat="server" Text="LC"></asp:Label>
            </td>
            <td class="style27">
               
                  <asp:TextBox ID="txtlc" runat="server" CssClass="total" ReadOnly="True"/>
               
            </td>
            <td class="style28">
                &nbsp;</td>
            <td>

                &nbsp;</td>
        </tr>
    </table>

Jquery function
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
      <script type="text/javascript">
          $(function () {
              $("[id*=btnAddRow]").click(function () {
                  var Id = $("[id*=txtId]").val();
                  var Name = $("[id*=txtCname]").val();
                  var Fc = $("[id*=txtfc]").val(); 
                  var Rate = $("[id*=txtrate]").val();
                  var Lc = $("[id*=txtlc]").val();
                  if (Id != "" && Name != "" && Fc != "" && Rate != "" && Lc != "") {
                    
               row = $("[id*=GridView1] tr:last-child").clone(true); ////this is final for use///written by zeeshan
                     $("td:nth-child(1)", row).html(Id);
                      $("td:nth-child(2)", row).html(Name);
                      $("td:nth-child(3)", row).html(Fc);
                      $("td:nth-child(4)", row).html(Rate);
                      $("td:nth-child(5)", row).html(Lc);

                      $("[id*=GridView1] tbody tr:first").after(row);
                     
                  }
                  $("[id*=txtId]").val('');
                  $("[id*=txtCname]").val('');
                  $("[id*=txtfc]").val('');
                  $("[id*=txtrate]").val('');
                  $("[id*=txtlc]").val('');
                  return false;
              });
          });
</script>
////////////////////////////function for back ground colour//////////
 <script type="text/javascript">
     $(document).ready(function () {

         $("#<%=GridView1.ClientID%> tr:has(td)").hover(function () {

             $(this).css("background-color", "Lightgrey");

         }, function () {

             $(this).css("background-color", "#ffffff");

         });

     });
  </script>

Aspx.net
     if (!this.IsPostBack)
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[5] { new DataColumn("Code", typeof(int)),
                                new DataColumn("Name", typeof(string)),
                                 new DataColumn("Fc", typeof(string)),
                                  new DataColumn("Rate", typeof(string)),
                                   new DataColumn("Lc", typeof(string))});


                dt.Rows.Add(0, "", "", "", "");

                dt.Rows.Add(1, "dollar", "1321", "123", "1312");



                GridView1.DataSource = dt;
                GridView1.DataBind();


            }
        }

How we update selected row please help me using jquery

Download FREE API for Word, Excel and PDF in ASP.Net

Azim

0 3

Reply
ANSWER
User: Azim
Replied: on Feb 18, 2015 07:08 AM
Modified: on Feb 18, 2015 07:14 AM
Report

Please refer this code

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnUpdate]").hide();
            $("body").on("click", "[id*=btnAddRow]", function () {
                var id = $("[id*=txtId]").val();
                var name = $("[id*=txtName]").val();
                var country = $("[id*=txtCountry]").val();
                if (id != "" && name != "" && country != "") {
                    var row = $("[id*=GridView1] tr:last").clone();
                    $("td:nth-child(1)", row).html(id);
                    $("td:nth-child(2)", row).html(name);
                    $("td:nth-child(3)", row).html(country);
                    $("[id*=GridView1] tbody").append(row);
                }
                $("[id*=txtId]").val('');
                $("[id*=txtName]").val('');
                $("[id*=txtCountry]").val('');
                return false;
            });
            $("body").on("click", "[id*=btnUpdate]", function () {
                var rowIndex = $("[id*=hdEditedRow]").val();
                var row = $("[id*=GridView1] tr:nth-child(" + rowIndex + ")");
                $("td:nth-child(1)", row).html($("[id*=txtId]").val());
                $("td:nth-child(2)", row).html($("[id*=txtName]").val());
                $("td:nth-child(3)", row).html($("[id*=txtCountry]").val());
                $("[id*=btnAddRow]").show();
                $(this).hide();
                $("[id*=txtId]").val('');
                $("[id*=txtName]").val('');
                $("[id*=txtCountry]").val('');
                return false;
            });
            $("body").on("click", ".editRow", function () {
                $("[id*=txtId]").val($.trim($(".Id", $(this).closest("tr")).html()));
                $("[id*=txtName]").val($.trim($(".Name", $(this).closest("tr")).html()));
                $("[id*=txtCountry]").val($.trim($(".Country", $(this).closest("tr")).html()));
                $("[id*=hdEditedRow]").val($(this).parents('tr').index() + 1);
                $("[id*=btnAddRow]").hide();
                $("[id*=btnUpdate]").show();
                return false;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    <asp:TextBox ID="txtId" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Name
                </td>
                <td>
                    <asp:TextBox ID="txtName" runat="server" />
                </td>
            </tr>
            <tr>
                <td>
                    Country
                </td>
                <td>
                    <asp:TextBox ID="txtCountry" runat="server" />
                </td>
            </tr>
        </table>
        <br />
        <asp:Button ID="btnAddRow" Text="Add Row" runat="server" />
        <asp:Button ID="btnUpdate" Text="Update Row" runat="server" />
        <br />
        <br />
        <asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
            runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
                <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
                <asp:BoundField DataField="Country" ItemStyle-CssClass="Country" HeaderText="Country"
                    ItemStyle-Width="150" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="#" class="editRow">Select</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:HiddenField ID="hdEditedRow" runat="server" />
    </div>
    </form>
</body>
</html>

Namspace

using System.Data;

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                    new DataColumn("Name", typeof(string)),
                    new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        table
        {
            border: 1px solid #ccc;
        }
        table th
        {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
        table th, table td
        {
            padding: 5px;
            border-color: #ccc;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"> </script>
    <script type="text/javascript">
        $(function () {
            $("[id*=btnUpdate]").hide();
            $("body").on("click", "[id*=btnAddRow]", function () {
                var id = $("[id*=txtId]").val();
                var name = $("[id*=txtName]").val();
                var country = $("[id*=txtCountry]").val();
                if (id != "" && name != "" && country != "") {
                    var row = $("[id*=GridView1] tr:last").clone();
                    $("td:nth-child(1)", row).html(id);
                    $("td:nth-child(2)", row).html(name);
                    $("td:nth-child(3)", row).html(country);
                    $("[id*=GridView1] tbody").append(row);
                }
                $("[id*=txtId]").val('');
                $("[id*=txtName]").val('');
                $("[id*=txtCountry]").val('');
                return false;
            });
            $("body").on("click", "[id*=btnUpdate]", function () {
                var rowIndex = $("[id*=hdEditedRow]").val();
                var row = $("[id*=GridView1] tr:nth-child(" + rowIndex + ")");
                $("td:nth-child(1)", row).html($("[id*=txtId]").val());
                $("td:nth-child(2)", row).html($("[id*=txtName]").val());
                $("td:nth-child(3)", row).html($("[id*=txtCountry]").val());
                $("[id*=btnAddRow]").show();
                $(this).hide();
                $("[id*=txtId]").val('');
                $("[id*=txtName]").val('');
                $("[id*=txtCountry]").val('');
                return false;
            });
            $("body").on("click", ".editRow", function () {
                $("[id*=txtId]").val($.trim($(".Id", $(this).closest("tr")).html()));
                $("[id*=txtName]").val($.trim($(".Name", $(this).closest("tr")).html()));
                $("[id*=txtCountry]").val($.trim($(".Country", $(this).closest("tr")).html()));
                $("[id*=hdEditedRow]").val($(this).parents('tr').index() + 1);
                $("[id*=btnAddRow]").hide();
                $("[id*=btnUpdate]").show();
                return false;
            });
        });
    </script>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Id
            </td>
            <td>
                <input name="txtId" type="text" id="txtId" />
            </td>
        </tr>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input name="txtName" type="text" id="txtName" />
            </td>
        </tr>
        <tr>
            <td>
                Country
            </td>
            <td>
                <input name="txtCountry" type="text" id="txtCountry" />
            </td>
        </tr>
    </table>
    <br />
    <input type="submit" name="btnAddRow" value="Add Row" id="btnAddRow" />
    <input type="submit" name="btnUpdate" value="Update Row" id="btnUpdate" />
    <br />
    <br />
    <div>
        <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
            <tr style="color: White; background-color: #3AC0F2;">
                <th scope="col">
                    Id
                </th>
                <th scope="col">
                    Name
                </th>
                <th scope="col">
                    Country
                </th>
                <th scope="col">
                    &nbsp;
                </th>
            </tr>
            <tr>
                <td class="Id" style="width: 30px;">
                    1
                </td>
                <td class="Name" style="width: 150px;">
                    John Hammond
                </td>
                <td class="Country" style="width: 150px;">
                    United States
                </td>
                <td>
                    <a href="#" class="editRow">Select</a>
                </td>
            </tr>
            <tr>
                <td class="Id" style="width: 30px;">
                    2
                </td>
                <td class="Name" style="width: 150px;">
                    Mudassar Khan
                </td>
                <td class="Country" style="width: 150px;">
                    India
                </td>
                <td>
                    <a href="#" class="editRow">Select</a>
                </td>
            </tr>
            <tr>
                <td class="Id" style="width: 30px;">
                    3
                </td>
                <td class="Name" style="width: 150px;">
                    Suzanne Mathews
                </td>
                <td class="Country" style="width: 150px;">
                    France
                </td>
                <td>
                    <a href="#" class="editRow">Select</a>
                </td>
            </tr>
            <tr>
                <td class="Id" style="width: 30px;">
                    4
                </td>
                <td class="Name" style="width: 150px;">
                    Robert Schidner
                </td>
                <td class="Country" style="width: 150px;">
                    Russia
                </td>
                <td>
                    <a href="#" class="editRow">Select</a>
                </td>
            </tr>
        </table>
    </div>
    <input type="hidden" name="hdEditedRow" id="hdEditedRow" />
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Add (Insert) Edit Update GridView Row on Client Side using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us