To add new row in gridview using javascript

Question

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';
    }
}

And you have to save values in DB as well?

Mairaj Ahmad
– Mairaj Ahmad

2014-12-26 10:44:03 +00:00
Commented Dec 26, 2014 at 10:44 — Mairaj Ahmad
– Mairaj Ahmad, Commented Dec 26, 2014 at 10:44
did you find the solution ?!

Mohamad Mahmoud Darwish
– Mohamad Mahmoud Darwish

2015-12-14 15:36:50 +00:00
Commented Dec 14, 2015 at 15:36 — Mohamad Mahmoud Darwish
– Mohamad Mahmoud Darwish, Commented Dec 14, 2015 at 15:36

Peter Csala · Accepted Answer · 2020-07-21 11:47:45Z

2

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.

edited Jul 21, 2020 at 11:47

Peter Csala

23.7k16 gold badges51 silver badges96 bronze badges

answered Jul 21, 2020 at 11:33

Mostafa Shehata

213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Over a year ago

Whilst this adds a row, it's only for display purposes. I believe, if you have a save button, which preforms a post back, the grid view won't contain the added row?

Mostafa Shehata Over a year ago

You can add button also. Instead of 'createTextNode' put 'createElement' Here's a sample: let btn0 = document.createElement('button'); btn0.innerHTML = 'Delete'; Cell0.appendChild(btn0);

Greg · Accepted Answer · 2020-07-22 12:53:27Z

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:

Replace GridView with a html table. The data can be populated & updated using a JavaScript calls to a restful API.

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.

Collectives™ on Stack Overflow

To add new row in gridview using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related