TransWikia.com

To add new row in gridview using javascript

Stack Overflow Asked on November 4, 2021

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.

Markup code:

<asp:GridView runat="server" ID="gvProduct" AutoGenerateColumns="false" 
              Width="100%" CellPadding="4" ForeColor="#333333" ShowFooter="true"
              PageSize-Mode="NumericPages" PagerStyle-Visible="true" AllowPaging="false" AllowSorting="true"
              CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
              OnRowDataBound="gvProduct_RowDataBound" OnRowCommand="gvProduct_RowCommand" OnRowDeleting="gvProduct_RowDeleting">
  <Columns>
    <asp:TemplateField HeaderText="Product Name" ItemStyle-Width="350px">
      <ItemTemplate>
        <asp:DropDownList ID="ddlProduct" runat="server" AutoPostBack="false" Style="width: 100%; height:23px" ></asp:DropDownList>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Current Stock" ItemStyle-Width="80px" Visible="false">
      <ItemTemplate>
        <asp:Label ID="lblCurrentStock" runat="server" onkeypress="return isNumberKey(event, false);" Height="20px" style="width:80px" Enabled="false" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>

    <asp:TemplateField HeaderText="Quantity" ItemStyle-Width="80px">
      <ItemTemplate>
        <asp:TextBox ID="txtQuantity"  onkeypress="return isNumberKey(event, false);"    runat="server" Height="20px" Width="150px" onblur="js_function(this);"   > </asp:TextBox>
        <asp:Label ID="lblunittype" runat="server" ></asp:Label>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

<asp:Button ID="Button2" OnClientClick="AddRow(); return false;" runat="server" Text="Button" />

Javascript code:

function AddRow() {
    var table = document.getElementById('<%=gvProduct.ClientID %>');
    var newRow = table.insertRow();
    var i = 0;
    for (i = 0; i < table.rows[0].cells.length; i++) {
        var newCell = newRow.insertCell();
        newCell.innerHTML = 'New Row';
    }
}
asp.netc++

2 Answers

If you just want to add rows to the table for presentation, then @Mostafa Shehata answer should work fine.

However adding rows in JavaScript does not attached it to the GridView datasource. Therefore you'll experience issues with processing the data in the backend (such as saving to database).

Two possible solutions:

  1. Replace GridView with a html table. The data can be populated & updated using a JavaScript calls to a restful API.
  1. Pre-populate the GridView datasource with empty rows.
  • Data-bind x amount of empty fields (for example 10 empty fields).
  • In the GridView markup hide all the rows using css.
  • Run JavaScript to show rows that are not empty.
  • The “add row” button can just show the first empty row.
  • Add some sort of notification, if all empty fields have been used. (for example: "please save your data, before continuing").
  • In code behind, remove all empty fields before consuming it.

Answered by Greg on November 4, 2021

  • Gridview in asp = Table in HTML
  • new row in Gridview in asp = new row in Table in HTML

Sample JavaScript code:

function AddRow() {
    let tableRef = document.getElementById('MainContent_gvItems');
    let newRow = tableRef.insertRow(-1);//inserts at last row
    let Cell0 = newRow.insertCell(0);
    let Text0 = document.createTextNode('mydata');
    Cell0.appendChild(Text0);
}

Btw, GridView must be visible even it's empty.

Answered by Mostafa Shehata on November 4, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP