Sunday, March 10, 2013

Add,Delete Client side GridviewRow and save Record in server side in asp.net

function AddNewRecord() {
         
         var grd = document.getElementById('GridView1');
         var tbod = grd.rows[0].parentNode;
         var newRow = grd.rows[grd.rows.length - 1].cloneNode(true);        
         tbod.appendChild(newRow);
         return false;

     }
 function delrow(rowindex) {
        
         
                var grd = document.getElementById('GridView1');
                if (grd.rows.length < 2)
                    alert("At least 1 Item is required.");
                else
                 var tbod = grd.rows[0].parentNode;

                  tbod.deleteRow(rowindex.parentNode.parentNode.rowIndex);
                   
                  // grd.deleteRow(rowindex + 1);
                  return false;

     }
  <asp:Button ID="Button2" runat="server" Text="Add Row" OnClientClick="return AddNewRecord();"/>
  
  <asp:GridView ID="GridView1" runat="server"
        AlternatingItemStyle-CssClass="row_white" AutoGenerateColumns="False"
        CssClass="row_blue" Width="50%">
        <HeaderStyle CssClass="header" />
        <Columns>
      


        
         <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </ItemTemplate>
            </asp:TemplateField>
           
          <asp:TemplateField HeaderText="delete">
                <ItemTemplate>
           
        
                                                                <img src="../images/delete.png" alt="Delete" style="cursor: pointer; padding-right: 20px"
                                                                onclick="delrow(this);" title="Delete" width="10" height="11" />
                                                              
            
               </ItemTemplate>
            </asp:TemplateField>
           
           
           
                                         
        </Columns>
    </asp:GridView>
   
and save Record in Server side Database

int liCounter = 1;
        while (!string.IsNullOrEmpty(Request.Form["GridView1$ctl" + liCounter.ToString()+"$TextBox"+ liCounter.ToString()]))
        {        
            string str = Convert.ToString(Request.Form["GridView1$ctl" + liCounter.ToString() + "$TextBox" + liCounter.ToString()]); //percentage         
            liCounter++;

            Response.Write(str+"<br>");
        }



No comments:

Post a Comment