A2oz

How to Enable TextBox in GridView in ASP.NET?

Published in ASP.NET 3 mins read

Enabling a TextBox in a GridView in ASP.NET is a common task, allowing users to edit data directly within the grid. Here's how you can achieve this:

1. Using TemplateFields:

  • Create a TemplateField column in your GridView.
  • Add a TextBox control inside the ItemTemplate of the TemplateField.
  • Set the TextBox's Text property to the value of the corresponding field in the data source.
  • Optionally, add a Button control to trigger the update process.

Example:

<asp:TemplateField HeaderText="Product Name">
    <ItemTemplate>
        <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
    </ItemTemplate>
</asp:TemplateField>

2. Enabling Edit Mode:

  • Set the AutoGenerateEditButton property of the GridView to true.
  • This will automatically add an "Edit" button to each row.
  • When the "Edit" button is clicked, the GridView enters Edit mode.
  • The cells in the row will be replaced with editable controls, such as TextBoxes.

Example:

<asp:GridView ID="GridView1" runat="server" AutoGenerateEditButton="true" ...>
</asp:GridView>

3. Handling the Edit and Update Events:

  • Use the RowEditing and RowUpdating events of the GridView to handle the editing and updating processes.
  • In the RowEditing event, you can change the behavior of the GridView when entering Edit mode.
  • In the RowUpdating event, you can retrieve the updated values from the TextBoxes and update the data source.

Example:

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
    // Handle the Edit mode logic here
}

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
    // Retrieve updated values from TextBoxes
    // Update the data source
}

4. Using the EditItemTemplate:

  • This is similar to the ItemTemplate, but it's used specifically for the Edit mode.
  • You can add different controls inside the EditItemTemplate for editing.
  • Use the Eval method to bind the controls to the data source.

Example:

<asp:TemplateField HeaderText="Product Name">
    <EditItemTemplate>
        <asp:TextBox ID="txtName" runat="server" Text='<%# Eval("ProductName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <%# Eval("ProductName") %>
    </ItemTemplate>
</asp:TemplateField>

5. Using the EditIndex Property:

  • The EditIndex property of the GridView indicates the row currently in Edit mode.
  • You can use this property in the RowDataBound event to check if the row is in Edit mode and display the appropriate controls.

Example:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow && e.Row.RowIndex == GridView1.EditIndex)
    {
        // Display TextBox for editing
    }
}

These are just a few ways to enable TextBoxes in your GridView. Remember to choose the approach that best suits your needs and implement the necessary event handling to complete the editing functionality.

Related Articles