Add a row to a GridView to allow adding a record.

[Webskater]

I have a gridview populated from a DataSet. I want to provide a row at the bottom of the gridview with text boxes in ready for a user to enter data, click an Add button so I can add a new record.

I have got the extra row in the GridView appearing by doing this:

DataRow myRow = ds.Tables[1].NewRow();
ds.Tables[1].Rows.InsertAt(myRow, ds.Tables[1].Rows.Count);
gvRecord.DataSource = ds.Tables[1];
gvRecord.DataKeyNames = new string[] { "RecordDetailID" };
gvRecord.DataBind();

The code for the GridView is this:

                    <asp:GridView ID="gvRecord" runat="server" AutoGenerateColumns="False" CssClass="Grid" Width="640">
                        <RowStyle CssClass="GridItem" />
                        <AlternatingRowStyle CssClass="GridAltItem" />
                        <EditRowStyle BackColor="White" />
                        <HeaderStyle CssClass="GridHeader" />
                        <EmptyDataTemplate><p class="instruct">This record does not have any details yet.</p></EmptyDataTemplate>
                        <Columns>
                            <asp:BoundField DataField="Description" HeaderText="Description" HeaderStyle-Wrap="false" HeaderStyle-Width="25%" />
                            <asp:BoundField DataField="Value" HeaderText="Value" HeaderStyle-Wrap="false" HeaderStyle-Width="25%" /> 
                            <asp:BoundField DataField="Price" HeaderText="Price" HeaderStyle-Wrap="false" HeaderStyle-Width="50%" />
                            <asp:TemplateField HeaderText="Edit" ItemStyle-Wrap="false">
                            <EditItemTemplate>
                                <asp:LinkButton ID="lb1" runat="server" CommandName="Update" Text="Update"></asp:LinkButton>
                                <asp:LinkButton ID="lb2" runat="server" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:LinkButton ID="lb3" runat="server" CommandName="Edit" Text="Edit"></asp:LinkButton>
                            </ItemTemplate>
                            </asp:TemplateField>                                           
                        </Columns>
                    </asp:GridView>

So, all I have so far is an extra row appearing at the bottom of the GridView with the 'Edit' link button in it.

My questions are:
How can I get text boxes into the last row?
How can I hide or remove the Edit LinkButton and, ideally, replace it with an Add button?

Thanks for any help.

[mendhak]

http://geekswithblogs.net/casualjim/articles/51360.aspx
http://geekswithblogs.net/casualjim/.../04/77151.aspx

[Webskater]

Thanks for those links. I'll do that if I can't get where I am now working. Where I have got to is ...

I am adding an extra row to the Gridview the Data is Bound like this ...

DataRow myRow = ds.Tables[1].NewRow();
ds.Tables[1].Rows.InsertAt(myRow, ds.Tables[1].Rows.Count);

in the RowDataBound of the GridView I am putting text boxes in the row, removing the Edit and Delete LinkButtons and adding an 'Add' LinkButton.

    protected void gvRecord_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowIndex == (numrows - 1))
        {
            LinkButton DeleteButton = (LinkButton)e.Row.FindControl("lbDelete");
            e.Row.Cells[4].Controls.Remove(DeleteButton);

            LinkButton EditButton = (LinkButton)e.Row.FindControl("lbEdit");
            e.Row.Cells[3].Controls.Remove(EditButton);

            LinkButton AddButton = new LinkButton();
            AddButton.Text = "Add";
            AddButton.Command += new CommandEventHandler(AddButton_Click); 
            e.Row.Cells[3].Controls.Add(AddButton);

            TextBox txtDescription = new TextBox();
            txtDescription.MaxLength = 100;

            TextBox txtValue = new TextBox();
            txtValue.MaxLength = 100;

            TextBox txtProduct = new TextBox();
            txtProduct.TextMode = TextBoxMode.MultiLine;
            txtProduct.Rows = 3;
            txtProduct.MaxLength = 255;

            e.Row.Cells[0].Controls.Add(txtDescription);
            e.Row.Cells[1].Controls.Add(txtValue);
            e.Row.Cells[2].Controls.Add(txtProduct);
        }
    }

This works okay. The GridView appears on the screen with an extra row at the bottom with 3 text boxes in it and an Add button.

When I click the Add button the page posts back and in AddButton_Click I'd like to retrieve the data from the 3 text boxes in the bottom row and insert a new record in the database.

But, when the page postsback, the 3 text boxes disappear and the GridView renders as it would have looked if the RowDataBound stuff had never happened. i.e. there is a row at the bottom with no text boxes and with Edit and Delete buttons.

The Gridview is only populated - so far - when the page first loads. I assume that normally ViewState persists the appearance of the GridView when the page posts back. But the text boxes I am adding to the bottom of the GridView are not being added to the ViewState - I guess.

How can I fix this?

Thanks for any help.

[mendhak]

You must be populating the grid in a Page.IsPostback check. You'll need to re-insert these rows everytime, I imagine, from your code above.

[mendhak]

You're adding it to the footer aren't you?

You could replace

        if (e.Row.RowIndex == (numrows - 1))

with

if(e.Row.RowType == DataControlRowType.Footer)

if you wanted...