Home > DeveloperSection > Blogs > Editable GridView in Asp.Net

Editable GridView in Asp.Net


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 1733  View(s)
Rate this:

Editable GridView in Asp.Net

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:GridView ID="gridViewEmployee" runat="server" AutoGenerateDeleteButton="True"

AutoGenerateEditButton="True" BackColor="#6699FF" BorderColor="#CCFF66"

BorderWidth="3px">

<AlternatingRowStyle BackColor="#FF33CC" BorderColor="#FFFF99" BorderStyle="Solid" BorderWidth="3px" />

<EditRowStyle BackColor="#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();

            }

        }

public void bindData()

{

  SqlConnection conn = new SqlConnection(WebConfigurationManager.ConnectionStrings["Connect"].ToString());

            conn.Open();

            SqlCommand cmd = new SqlCommand();

            cmd.CommandText = "select * from Employee";

            cmd.Connection = conn;

            cmd.ExecuteNonQuery();

            SqlDataAdapter adap = new SqlDataAdapter(cmd);

            DataTable dt = new DataTable();

            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:GridView ID="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">

AlternatingRowStyle BackColor="#FF33CC" BorderColor="#FFFF99" BorderStyle="Solid"

BorderWidth="3px" />

<EditRowStyle BackColor="#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.

 

 


Don't want to miss updates? Please click the below button!

Follow MindStick