In this blog, I’m explaining how to make a gridview editable in asp.net Step 1:
First create an asp.net empty web application and add a web form to the solution.
Step 2:
Now add a gridview by drag and drop from the toolbox and true these properties:
· AutoGenerateDeleteButton
· AutoGenerateEditButton
As you make true to these properties, your gridview will look like this:
<asp:GridViewID="gridViewEmployee"runat="server"AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True"BackColor="#6699FF"BorderColor="#CCFF66"
BorderWidth="3px">
<AlternatingRowStyleBackColor="#FF33CC"BorderColor="#FFFF99"BorderStyle="Solid"BorderWidth="3px"/>
<EditRowStyleBackColor="#FFFF99"BorderColor="Lime"BorderWidth="3px"/>
</asp:GridView>
Step 3:
Now add the below code in the .aspx.cs file:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindData();
}
}
publicvoid bindData()
{
SqlConnection conn = newSqlConnection(WebConfigurationManager.ConnectionStrings["Connect"].ToString());
conn.Open();
SqlCommand cmd = newSqlCommand();
cmd.CommandText = "select * from Employee";
cmd.Connection = conn;
cmd.ExecuteNonQuery();
SqlDataAdapter adap = newSqlDataAdapter(cmd);
DataTable dt = newDataTable();
adap.Fill(dt);
gridViewEmployee.DataSource = dt;
gridViewEmployee.DataBind();
}
When you run the above code, this will display all values from Employee table.
Step 4:
To make the gridview editable – add the following events to the gridview:
· RowEditing
· RowUpdating
· RowDeleting
· RowCancelingEdit
When you add the above events to the gridview , the code in aspx file will look like this:
<asp:GridViewID="gridViewEmployee"runat="server"AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True"OnRowCancelingEdit="gridViewEmployee_RowCancelingEdit"
OnRowDeleting="gridViewEmployee_RowDeleting"OnRowEditing="gridViewEmployee_RowEditing"
OnRowUpdating="gridViewEmployee_RowUpdating"BackColor="#6699FF"BorderColor="#CCFF66"
BorderWidth="3px">
AlternatingRowStyleBackColor="#FF33CC"BorderColor="#FFFF99"BorderStyle="Solid"
BorderWidth="3px"/>
<EditRowStyleBackColor="#FFFF99"BorderColor="Lime"BorderWidth="3px"/>
</asp:GridView>
Step 5:
Now add the code to the events:
RowEditing
protected void gridViewEmployee_RowEditing(object sender, GridViewEditEventArgs e)
{
gridViewEmployee.EditIndex = e.NewEditIndex;
bindData();
}
RowDeleting
protected void gridViewEmployee_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
string id = gridViewEmployee.Rows[e.RowIndex].Cells[1].Text;
SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["Connect"].ToString());
conn.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "delete from Employee where id="+id+"";
cmd.Connection = conn;
cmd.ExecuteNonQuery();
bindData();
}
RowUpdating
protected void gridViewEmployee_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
string id = ((TextBox)gridViewEmployee.Rows[e.RowIndex].Cells[1].Controls[0]).Text;
string name = ((TextBox)gridViewEmployee.Rows[e.RowIndex].Cells[2].Controls[0]).Text;
string designation = ((TextBox)gridViewEmployee.Rows[e.RowIndex].Cells[3].Controls[0]).Text;
string salary = ((TextBox)gridViewEmployee.Rows[e.RowIndex].Cells[4].Controls[0]).Text;
string telephone = ((TextBox)gridViewEmployee.Rows[e.RowIndex].Cells[5].Controls[0]).Text;
SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["Connect"].ToString());
conn.Open();
SqlCommand cmd = new SqlCommand();
cmd.CommandText = "Update Employee set name='"+name+"',designation='"+designation+"',salary='"+salary+"',telephone='"+telephone+"' where id="+id+"";
cmd.Connection = conn;
cmd.ExecuteNonQuery();
gridViewEmployee.EditIndex = -1;
bindData();
}
RowCancelingEdit
protected void gridViewEmployee_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
gridViewEmployee.EditIndex = -1;
bindData();
}
Adding the above codes to the appropriate events will make the gridview editable and allow you to edit, update and delete the records from gridview.
Output
When you run the project, it will show you all the values from the database.
When you click the edit button:
Update the values according to your need or you can cancel it:
I have updated the salary of “Mark David” from 180000 to 100000:
When you click the delete button:
I have deleted the “Mark David” record.
Leave Comment