Adding rows to a GridView with jQuery and saving

Question

If I add rows to a GridView with jQuery, will I be able to get the newly added rows with:

foreach (GridViewRow row in gvMyGridView.Rows)
{

}

How could I add the rows so they could be iterated in code behind?

Answer 1

I put my Gridview control in an update panel and set an async trigger to point to my add button(so that the whole page is not refreshed when a new row is added).

Then in code behind, i add new row to a datatable. Save the datatable in a viewstate and rebind the gridview to the viewstate. Then when fetching data from the gridview, loop through viewstate datatable rows.

Not sure if this is the best solution, however its been working for me so far.

protected void cmdAdd(){
  datatable table=(datatable)viewstate["savedTable"];
  datarow row = table.newRow;
  row["myColumnName"]=txtSomething.text;
  datatable.rows.add(row);

  viewstate["savedTable"]=table;
  grid.datasource=viewstate["savedTable"];
  grid.databind();
  // or create your own functions to make the code reusable
}

protected void cmdSave(){
     datatable table=viewstate["savedTable"];
     foreach(datarow row in table.rows){
     //do stuff
}
}

I usually use bootstrap modals to add new rows to my grid, and call those modal from code behind via a grid header button.

So my Gridview html looks like this:

 <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:GridView runat="server" ID="stockTakeGrid"
                                    CssClass="table table-striped table-bordered table-condensed table-hover"
                                    AllowPaging="true" PageSize="8" OnPageIndexChanging="stockTakeGrid_PageIndexChanging"
                                    ShowHeaderWhenEmpty="true"
                                    OnRowCommand="stockTakeGrid_RowCommand"
                                    OnRowDataBound="stockTakeGrid_RowDataBound">
                                    <Columns>
                                        <asp:TemplateField>
                                                <ItemTemplate>
                                                    <asp:LinkButton runat="server" ID="cmdEdit" CssClass="btn" ToolTip="Edit Stock"
                                                         CommandName="editStock" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>">
                                                        <span><i class=" glyphicon glyphicon-pencil"></i></span>
                                                    </asp:LinkButton>
                                                </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ITEMCODE" HeaderText="Item Code" />
                                        <asp:BoundField DataField="ITEMDESC" HeaderText="Item Desc" />
                                        <asp:BoundField DataField="ONHAND" HeaderText="Stock On Hand" />
                                        <asp:BoundField DataField="STCOUNT" HeaderText="Stock Count" />
                                        <asp:BoundField DataField="VARIANCE" HeaderText="Variane" />
                                        <asp:BoundField DataField="PRICE" HeaderText="Price" />
                                        <asp:BoundField DataField="VALUE" HeaderText="Value" DataFormatString="{0:0,0.00}" />
                                        <asp:BoundField DataField="COMMENT" HeaderText="Comment" />
                                    </Columns>
                                    <PagerStyle CssClass="pagination-ys" />
                                </asp:GridView>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="cmbLocation" EventName="selectedindexchanged" />
                                <asp:AsyncPostBackTrigger ControlID="cmdSaveLine" EventName="click" />
                            </Triggers>
                        </asp:UpdatePanel> 

Then my modal html looks like this:

                           <!--Item Modal-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Set actual stock count</h4>
              </div>
              <div class="modal-body">
                  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                      <ContentTemplate>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2 ">Item Code</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtItemCode" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                            <div class="col-md-6">
                                <asp:TextBox runat="server" ID="txtItemDesc" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Stock on Hand</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtOnHand" CssClass="form-control" ReadOnly="true"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Stock Count</asp:Label>
                            <div class="col-md-2">
                                <asp:TextBox runat="server" ID="txtSTCount" CssClass="form-control decimal-empty"></asp:TextBox>
                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label runat="server" CssClass="control-label col-md-2">Comment</asp:Label>
                            <div class="col-md-10">
                                <asp:TextBox runat="server" CssClass="form-control" TextMode="MultiLine" ID="txtComment" ></asp:TextBox>
                            </div>
                        </div>
                      </ContentTemplate>
                      <Triggers>
                          <asp:AsyncPostBackTrigger ControlID="stockTakeGrid" EventName="rowcommand" />
                      </Triggers>
                  </asp:UpdatePanel>
              </div>
              <div class="modal-footer">
                  <asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                      <ContentTemplate>
                        <asp:Button runat="server" ID="cmdSaveLine" CssClass="btn btn-info pull-left" Text="Save" 
                             OnClientClick="$('#myModal').modal('hide');" OnClick="cmdSaveLine_Click" />
                      </ContentTemplate>
                  </asp:UpdatePanel>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
                </div>
              </div>
            </div>

Hope this helps!