How to enable in-place editing in an asp:GridView?

Question

How can i add edit boxes, and read their values during submit, with an asp:Repeater?

---

i have an asp:GridView which is displaying a read-only (i.e. non-editable) set of data, e.g.:

How can i enabled the cells of the GridView to be editable, e.g (Photoshop Mockup):

Note: i didn't mockup in Photoshop an edit box into every row and column (cause it was taking too long). You still get the idea.

• How can i convince an asp:GridView to show an edit-box in each cell?
• If i do convince the asp:GridView to show an edit-box, how do i "read" them OnClick of Save button?

Bonus Chatter

i would not be opposed to using an asp:Repeater, manually placing <INPUT> controls. My confusion then is about how to read each input during the OnClick of the Save button. And although i would be perfectly happy to use a repeater, and a GridView might not be able to accomplish what i want making the repeater the only possibility, this question is about a GridView.

• If the GridView can do it: great; how?
• If the GridView cannot do it: that's an answer too.

Answer 1

Have you tried by setting up the EditIndex property of the DataGrid?

Example:

<asp:GridView runat="server" onrowediting="grdProducts_RowEditing" 
    ID="grdProducts">
    <Columns>
        <asp:CommandField ShowEditButton="True" />
    </Columns>
</asp:GridView>

Code behind

    protected void grdProducts_RowEditing(object sender, GridViewEditEventArgs e)
    {
        this.grdProducts.EditIndex = e.NewEditIndex;
        This.BindGrid();
    }

Note that you have to re-bind your grid

Usually you save the data per row, which means, you have an edit link in each row and after you enter edit mode, a save button and optionally a cancel button appear which will allow you to save the values of that specific row

Following this approach is trivial when using the GridView:

    protected void grdProducts_RowUpdating(object sender, GridViewUpdateEventArgs e)
    {
        // old values for the current row
        var oldValues = e.OldValues;

        // new (updated) values for the current row
        var newvalues = e.NewValues;

        // Exit edit mode
        this.grdProducts.EditIndex = -1;

        // Update the grid
        this.BindGrid();
    }

In the grid markup just add the following:

    onrowupdating="grdProducts_RowUpdating"

If you need to specify custom controls when editing or when displaying the cell data in read-only mode, use grid templates:

       <Columns>
        <asp:TemplateField HeaderText="Name">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
      </Columns>

Answer 2

You can do this using a GridView, but you'll produce quite a lot of code if you have many columns.

First make all columns in the GridView TemplateFields. In my sample I will use just one column. Like so:

<asp:GridView ID="test" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField HeaderText="Foo" SortExpression="foo">
            <ItemTemplate>
                <asp:TextBox ID="FooText" runat="server" Text='<%# Eval("Foo") %>'></asp:TextBox>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- other cols here -->
    </Columns>
</asp:GridView>
<asp:Button ID="Save" runat="server" Text="Save" OnClick="Save_Click" />

Then in your code behind for the Save button you can iterate over the rows in the GridView:

foreach (GridViewRow gvRow in test.Rows)
{
    string val = ((TextBox)gvRow.FindControl("FooText")).Text;
    <!-- other cols here -->
    //do something with all the values you have parsed from the row
}