How to edit Master-Detail form using GridView and DetailsView control in ASP.NET

In this article I will explain how to edit master-detail form using GridView and DetailsView control in ASP.NET

Download source code

Introduction

In one of my previous article I explained how to Master-Detail form using GridView and DetailsView in ASP.NET. In this ariticle I will explain how to edit a master/detail form in ASP.NET from code behind

 Edit Master-Detail Form

Description

Go to this article to see how to create a Master-Detail form in ASP.NET. After that follow these steps to enable this Master-Detail form to edit data

Step 1:

Set AutoGenerateEditButton property of the GridView and DetailsView to true to show edit buttons in these controls

AutoGenerateEditButton=”true”

Step 2:

Write code in RowEditing, RowCancelingEdit, and RowUpdating events of the GridView control

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
     GridView1.SelectedIndex = -1;
     GridView1.EditIndex = e.NewEditIndex;
     BindGridView();

     // Currently editing row of GridView is set to editingRow
     GridViewRow editingRow = GridView1.Rows[GridView1.EditIndex];

     // TextBox control of TitleID column of currently editing row is set to
     // txtTitleID and its text is set to TitleID
     TextBox txtTitleID = (TextBox)editingRow.Cells[1].Controls[0];
     TitleID = txtTitleID.Text;
     BindDetailsView(TitleID);
}

RowEditing event fires when Edit button of a GridView row is clicked. SelectedIndex property of GridView is set to -1 to remove selection of any selected row. EditIndex property of GridView is used to set index of the row to edit and BindGridView method is called to bind GridView with the editing row. Then TitleId of editing row is retrieved from the GridView and passed to BindDetailsView method to show Author’s detail in the DetailsView

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
     GridView1.EditIndex = -1;
     BindGridView();
}

RowCancelingEdit event fires when Cancel button of a row in edit mode is clicked. EditIndex property of GridView is set to -1 to change edit mode of any row being edited to normal mode.

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
     string TitleID, BookTitle;
     GridViewRow currentRow = GridView1.Rows[e.RowIndex];
     TextBox txtTitleID = (TextBox)currentRow.Cells[1].Controls[0];
     TextBox txtTitle = (TextBox)currentRow.Cells[2].Controls[0];
     TitleID = txtTitleID.Text;
     BookTitle = txtTitle.Text;

     using (con = new SqlConnection(ConString))
     {
          CmdString = "UPDATE titles SET title=@title WHERE title_id=@title_id";
          cmd = new SqlCommand(CmdString, con);
          cmd.Parameters.Add("@title_id", SqlDbType.VarChar, 6);
          cmd.Parameters.Add("@title", SqlDbType.VarChar, 80);
          cmd.Parameters["@title_id"].Value = TitleID;
          cmd.Parameters["@title"].Value = BookTitle;
          con.Open();
          cmd.ExecuteNonQuery();
          con.Close();
          GridView1.EditIndex = -1;
          BindGridView();
     }
}

RowUpdating event is fired when Update button of row being edited is clicked. This event is used to update data of GridView row in the database.

Step 3:

Write code in ModeChanging and ItemUpdating events of the DetailsView control

protected void DetailsView1_ModeChanging(object sender, DetailsViewModeEventArgs e)
{
     DetailsView1.ChangeMode(e.NewMode);
     string TitleID;

     if (GridView1.SelectedIndex >= 0)
     {
          TitleID = GridView1.SelectedValue.ToString();
          BindDetailsView(TitleID);
     }
     else if(GridView1.EditIndex>=0)
     {
          GridViewRow editingRow = GridView1.Rows[GridView1.EditIndex];
          TextBox txtTitleID = (TextBox)editingRow.Cells[1].Controls[0];
          TitleID = txtTitleID.Text;
          BindDetailsView(TitleID);
     }
}

ModeChanging event of DetailsView control is fires before its mode is changed. DetailsViewModeEventArgs.NewMode is passed to ChangeMode method of DetailsView to change its mode from ReadOnly to Edit. TitleID is retrieved from GridView selected or editing row and passed to BindDetailsView to populate DetailsView with editing data.

protected void DetailsView1_ItemUpdating(object sender, DetailsViewUpdateEventArgs e)
{
     string AuthorID, FirstName, LastName, Phone, Address, City, State, Zip, TitleID = string.Empty;

     TextBox txtAurhorID = (TextBox)DetailsView1.Rows[0].Cells[1].Controls[0];
     TextBox txtFirstName = (TextBox)DetailsView1.Rows[1].Cells[1].Controls[0];
     TextBox txtLastName = (TextBox)DetailsView1.Rows[2].Cells[1].Controls[0];
     TextBox txtPhone = (TextBox)DetailsView1.Rows[3].Cells[1].Controls[0];
     TextBox txtAddress = (TextBox)DetailsView1.Rows[4].Cells[1].Controls[0];
     TextBox txtCity = (TextBox)DetailsView1.Rows[5].Cells[1].Controls[0];
     TextBox txtState = (TextBox)DetailsView1.Rows[6].Cells[1].Controls[0];
     TextBox txtZip = (TextBox)DetailsView1.Rows[7].Cells[1].Controls[0];

     AuthorID = txtAurhorID.Text;
     FirstName = txtFirstName.Text;
     LastName = txtLastName.Text;
     Phone = txtPhone.Text;
     Address = txtAddress.Text;
     City = txtCity.Text;
     State = txtState.Text;
     Zip = txtZip.Text;

     if (GridView1.SelectedIndex >= 0)
     {
          TitleID = GridView1.SelectedValue.ToString();
     }
     else if (GridView1.EditIndex >= 0)
     {
          GridViewRow editingRow = GridView1.Rows[GridView1.EditIndex];
          TextBox txtTitleID = (TextBox)editingRow.Cells[1].Controls[0];
          TitleID = txtTitleID.Text;
     }

     using (con = new SqlConnection(ConString))
     {
          CmdString = "UPDATE authors SET au_fname=@au_fname, au_lname=@au_lname, Phone=@Phone, Address=@Address, city=@city, state=@state, Zip=@Zip WHERE au_id=@au_id";
          cmd = new SqlCommand(CmdString, con);
          cmd.Parameters.Add("@au_id", SqlDbType.VarChar, 11);
          cmd.Parameters.Add("@au_fname", SqlDbType.VarChar, 20);
          cmd.Parameters.Add("@au_lname", SqlDbType.VarChar, 40);
          cmd.Parameters.Add("@Phone", SqlDbType.VarChar, 12);
          cmd.Parameters.Add("@Address", SqlDbType.VarChar, 40);
          cmd.Parameters.Add("@city", SqlDbType.VarChar, 20);
          cmd.Parameters.Add("@state", SqlDbType.VarChar, 2);
          cmd.Parameters.Add("@Zip", SqlDbType.VarChar, 5);
          cmd.Parameters["@au_id"].Value = AuthorID;
          cmd.Parameters["@au_fname"].Value = FirstName;
          cmd.Parameters["@au_lname"].Value = LastName;
          cmd.Parameters["@Phone"].Value = Phone;
          cmd.Parameters["@Address"].Value = Address;
          cmd.Parameters["@city"].Value = City;
          cmd.Parameters["@state"].Value = State;
          cmd.Parameters["@Zip"].Value = Zip;
          con.Open();
          cmd.ExecuteNonQuery();
          con.Close();
     }

     DetailsView1.ChangeMode(DetailsViewMode.ReadOnly);
     BindDetailsView(TitleID);
}

ItemUpdating event fires when Update button of DetailsView in EditMode is clicked. Data of DetailsView is updated in this event. After that mode of DetailsView is changed from DetailsViewMode.Edit to DetailsViewMode.ReadOnly using ChangeMode method and BindDetailsView is called with TitleID from selected or editing row of the GridView

One thought on “How to edit Master-Detail form using GridView and DetailsView control in ASP.NET

  1. erjoell

    This is all very well and good. However, in many cases the gridview row is showing some of the data in the details view. So how would you update the grid after updating the details view if say the Author’s Name was listed in the gridview row?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *