title: To add new row in gridview using javascript
body: <p>In the below code i have gridview which has textbox and dropdownlist i want to add rows using javascript.My aim is to avoid postback on adding rows.</p>
  <p>Markup code:</p>
  <pre><code>&lt;asp:GridView runat=&quot;server&quot; ID=&quot;gvProduct&quot; AutoGenerateColumns=&quot;false&quot; 
                Width=&quot;100%&quot; CellPadding=&quot;4&quot; ForeColor=&quot;#333333&quot; ShowFooter=&quot;true&quot;
                PageSize-Mode=&quot;NumericPages&quot; PagerStyle-Visible=&quot;true&quot; AllowPaging=&quot;false&quot; AllowSorting=&quot;true&quot;
                CssClass=&quot;mGrid&quot; PagerStyle-CssClass=&quot;pgr&quot; AlternatingRowStyle-CssClass=&quot;alt&quot;
                OnRowDataBound=&quot;gvProduct_RowDataBound&quot; OnRowCommand=&quot;gvProduct_RowCommand&quot; OnRowDeleting=&quot;gvProduct_RowDeleting&quot;&gt;
    &lt;Columns&gt;
      &lt;asp:TemplateField HeaderText=&quot;Product Name&quot; ItemStyle-Width=&quot;350px&quot;&gt;
        &lt;ItemTemplate&gt;
          &lt;asp:DropDownList ID=&quot;ddlProduct&quot; runat=&quot;server&quot; AutoPostBack=&quot;false&quot; Style=&quot;width: 100%; height:23px&quot; &gt;&lt;/asp:DropDownList&gt;
        &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
  
      &lt;asp:TemplateField HeaderText=&quot;Current Stock&quot; ItemStyle-Width=&quot;80px&quot; Visible=&quot;false&quot;&gt;
        &lt;ItemTemplate&gt;
          &lt;asp:Label ID=&quot;lblCurrentStock&quot; runat=&quot;server&quot; onkeypress=&quot;return isNumberKey(event, false);&quot; Height=&quot;20px&quot; style=&quot;width:80px&quot; Enabled=&quot;false&quot; &gt;&lt;/asp:Label&gt;
        &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
  
      &lt;asp:TemplateField HeaderText=&quot;Quantity&quot; ItemStyle-Width=&quot;80px&quot;&gt;
        &lt;ItemTemplate&gt;
          &lt;asp:TextBox ID=&quot;txtQuantity&quot;  onkeypress=&quot;return isNumberKey(event, false);&quot;    runat=&quot;server&quot; Height=&quot;20px&quot; Width=&quot;150px&quot; onblur=&quot;js_function(this);&quot;   &gt; &lt;/asp:TextBox&gt;
          &lt;asp:Label ID=&quot;lblunittype&quot; runat=&quot;server&quot; &gt;&lt;/asp:Label&gt;
        &lt;/ItemTemplate&gt;
      &lt;/asp:TemplateField&gt;
    &lt;/Columns&gt;
  &lt;/asp:GridView&gt;
  
  &lt;asp:Button ID=&quot;Button2&quot; OnClientClick=&quot;AddRow(); return false;&quot; runat=&quot;server&quot; Text=&quot;Button&quot; /&gt;
  </code></pre>
  <p>Javascript code:</p>
  <pre><code>function AddRow() {
      var table = document.getElementById('&lt;%=gvProduct.ClientID %&gt;');
      var newRow = table.insertRow();
      var i = 0;
      for (i = 0; i &lt; table.rows[0].cells.length; i++) {
          var newCell = newRow.insertCell();
          newCell.innerHTML = 'New Row';
      }
  } 
  </code></pre>