Show all GridView Rows in EditMod
(from: http://aspadvice.com/blogs/azamsharp/archive/2006/11/08/Show-all-GridView-Rows-in-EditMode.aspx)
Sometimes, in the application we have a requirement that you need to show the GridView rows in edit mode. This means that all the rows will contain textboxes and the data should be present in the textboxes. Once, you are done with editing you can update and get back to the view mode. In this post I will simply show you how to change the mode of the GridView from view to edit. I will not be using any datasource controls.
The first task is the create a GridView. Check out the html code to create the GridView control:
<asp:GridView ID="gvUsers" AutoGenerateColumns="false" runat="server" OnRowDataBound="gvUsers_RowDataBound">
<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>
Check out the screen shot below:
As, you can see in the html code that both my label and the textbox are in the ItemTemplate and there visibility depends on the IsInEditMode property. Now, let's check out the code behind:
private bool isEditMode = false;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
BindData();
}
}
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();
}
// This method will put the GridView in the edit mode
protected void Button1_Click(object sender, EventArgs e)
{
isEditMode = true;
BindData();
}
protected bool IsInEditMode
{
get { return this.isEditMode; }
set { this.isEditMode = value; }
}
protected void Button2_Click(object sender, EventArgs e)
{
isEditMode = false;
BindData();
}
When the button is clicked I simply change the isEditMode to true or depending depending that if I want to view the GridView in edit mode or view mode. Check out the effect below:
