In this article, I will show you how to update GridView row. By using edit button we can update GridView row. But the question is, how to design "Edit" button for delete. If you follow me then i am sure you can delete rows from GridView.
Mentioned Following steps are:
Step-1 : Add a GridView Control on source window by using html code. Now, in the source page you have.
<asp:GridView ID="g1" runat="server">
</asp:GridView>
Step-2: Add these mentioned properties in the GridView:
AutoGenerateColumns="false"
OnRowCancelingEdit="g1_RowCancelingEdit"
OnRowEditing="g1_RowEditing"
OnRowUpdating="g1_RowUpdating"
Here, we have AutoGenerateColumns="false" means you design GridView columns manually. OnRowCancelingEdit is a event through this you can cancel the process of editing. OnRowEditing is also a event through this you can edit new Index. By using OnRowUpdating event you can update rows with new Data.
Step-3 : Suppose we have two fields in Database table then you can design GridView for this way. Now, the complete code of GridView is:
Source Code:
<asp:GridView ID="g1" runat="server" AutoGenerateColumns="false" OnRowCancelingEdit="g1_RowCancelingEdit" OnRowEditing="g1_RowEditing" OnRowUpdating="g1_RowUpdating">
<Columns>
<asp:TemplateField HeaderText="Controls">
<ItemTemplate>
<asp:Button Text="Edit" ID="Editbutton" runat="server" CommandName="Edit" />
</ItemTemplate>
<EditItemTemplate>
<asp:Button Text="Update" ID="updatebutton" runat="server" CommandName="Update" />
<asp:Button Text="Cancel" ID="cancelButton" runat="server" CommandName="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Id">
<ItemTemplate>
<asp:Label ID="idlbl" runat="server" Text='<%# Eval("Id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="namelbl" runat="server" Text='<%# Eval("Name") %>' />
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="nametext" runat="server" Text ='<%# Eval("Name") %>' />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In the First Template field we have two templates i.e ItemTemplate and EditItemTemplate. By using ItemTemplate we can show Edit Button with their "Edit" Command Name Property. When you click on it then open EditItemTemplate, in which we have two buttons in same column i.e Update and Cancel. similarly Design two columns for data. Pick the data from the database table using Embedded code block.
Code behind code
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default3 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
bindgrid();
}
}
private void bindgrid()
{
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "select * from [usertable]";
cmd.Connection = con;
SqlDataReader rd = cmd.ExecuteReader();
g1.DataSource = rd;
g1.DataBind();
con.Close();
}
protected void g1_RowEditing(object sender, GridViewEditEventArgs e)
{
g1.EditIndex = e.NewEditIndex;
bindgrid();
}
protected void g1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
g1.EditIndex = -1;
bindgrid();
}
protected void g1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
Label l1 = g1.Rows[e.RowIndex].FindControl("idlbl") as Label;
TextBox t1 = g1.Rows[e.RowIndex].FindControl("nametext") as TextBox;
SqlConnection con = new SqlConnection();
con.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ToString();
con.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "update [usertable] set Name=@nm where Id=@id1";
cmd.Parameters.AddWithValue("@id1", l1.Text);
cmd.Parameters.AddWithValue("@nm", t1.Text);
cmd.Connection = con;
cmd.ExecuteNonQuery();
g1.EditIndex = -1;
bindgrid();
}
}
Code Generates the following output
