GridView provides a very easy way to edit the data by using the in-place editing feature. Although the feature is great but sometimes we want to view the complete GridView in the edit mode and quickly edit multiple records without having to click the edit button on each row. In this article I will demonstrate how to convert the whole GridView in edit mode with a click of a button.
Introduction:
GridView provides a very easy way to edit the data by using the in-place editing feature. Although the feature is great but sometimes we want to view the complete GridView in the edit mode and quickly edit multiple records without having to click the edit button on each row. In this article I will demonstrate how to convert the whole GridView in edit mode with a click of a button.
Database Design:
In this article I will be using a custom database called School which consists of a single table called “Users”. The Users table contains only three columns namely FirstName, LastName and UserID.
Displaying Data in the GridView Control:
The first task is to display the data in the GridView control. Take a look at the method below which is used to populate the GridView control.
private void BindData()
{
string connectionString = "Server=localhost;Database=School;Trusted_Connection=true";
SqlConnection myConnection = new SqlConnection(connectionString);
SqlDataAdapter ad = new SqlDataAdapter("SELECT UserID, FirstName, LastName FROM Users", myConnection);
DataSet ds = new DataSet();
ad.Fill(ds);
gvUsers.DataSource = ds;
gvUsers.DataBind();
}
Depending on the data in the database your GridView will be populated.
GridView HTML Code:
The HTML code of the GridView is where all the magic happens. Let’s first take a look at the code.
<asp:GridView ID="gvUsers" AutoGenerateColumns="False" runat="server" OnRowDataBound="gvUsers_RowDataBound" CellPadding="4" Font-Names="Georgia" ForeColor="#333333" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="User ID">
<ItemTemplate>
<asp:Label ID="lblUserID" runat="server" Text='<%# Eval("UserID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name">
<ItemTemplate>
<asp:Label ID="lblFirstName" Visible='<%# !(bool) IsInEditMode %>' runat="server" Text='<%# Eval("FirstName") %>' />
<asp:TextBox ID="txtFirstName" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Eval("FirstName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name">
<ItemTemplate>
<asp:Label ID="lblLastName" Visible='<%# !(bool) IsInEditMode %>' runat="server" Text='<%# Eval("LastName") %>' />
<asp:TextBox ID="txtLastName" Visible='<%# IsInEditMode %>' runat="server" Text='<%# Eval("LastName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now, check out the <Columns> section where all the TemplateFields exists. The <ItemTemplate> section contains the Label as well as the TextBox. The visibility of the Label and the TextBox depends on the IsInEditMode property which, is a public property defined in the code behind. You can think of it as a switch meaning that when the Labels are displayed then the TextBoxes are not displayed and when the TextBoxes are displayed then the Labels will not be displayed.
IsInEditMode Property:
This is a simple property that returns the Boolean value of true or false.
private bool isEditMode = false;
protected bool IsInEditMode
{
get { return this.isEditMode; }
set { this.isEditMode = value; }
}
I have used a simple ASP.NET Button control to change the GridView to edit mode. Check out the code below:
// This method will put the GridView in the edit mode
protected void Button1_Click(object sender, EventArgs e)
{
isEditMode = true;
BindData();
}
Yup! That is all you need to change the GridView to edit mode. The isEditMode variable is set to true and it will make TextBoxes visible and the Labels invisible.
The screenshot above shows the GridView in edit mode. In order to switch back to view mode all you need to do is to change the IsInEditMode to false and call the BindData method.
Hope you liked the article, happy coding!
