CODEWITHSUNDEEP
c#asp.net
Developer
Developer

Reputation: 93

To add new row in gridview using javascript

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

Upvotes: 4

Views: 6350

Answers (2)

Greg
Greg

Reputation: 4518

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.

Upvotes: 0

Mostafa Shehata
Mostafa Shehata

Reputation: 21

  • 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.

Upvotes: 2

Related Questions