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.