Editar registros dentro del GridView

La historia empieza hacia ..

Cierto día estaba trabajando con el control GridView el cual lo utilizo para mostrar información hasta que llego el momento de editar esos registros lo primero que se me vino a la mente fue armar una nueva pagina donde pudiera editar cada uno de ellos pero reaccione y dije es mucho en rollo ademas el control GridView proporciona ciertas columnas para poder manipular la información.

Lo primero que tenemos que hacer es agregar una columna de de tipo CommandField solo tenemos que seleccionar el el control GridView en la parte superior del lado derecho aparece una flecha ,que al seleccionar nos desplegara un menu de opciones elegimos la opción de Editar Columnas

Fig1. Edicion de Columnas

Fig1. Edicion de Columnas

Habilitando la opción tenemos que buscar en la lista de campos disponibles   CommandField  y en sus opciones seleccionar Editar,Actualizar,Cancelar por ultimo damos agregar y en la parte de campos nos mostrara las columnas de nuestro  GridView

Fig.2 Definición de columnas

Fig.2 Definición de columnas

Al agregar esta columna lo primero que tendremos que hacer es agregar los siguientes métodos a nuestro control   GridView :

  • RowEditing
  • RowCancelingEdit
  • RowUpdating

El método RowEditing   se produce cuando se hace clic en el botón Editar de una fila y en code-behind quedaría de esta manera :

protected void gvPrefijos_RowEditing(object sender, GridViewEditEventArgs e)
{
  this.gvPrefijos.EditIndex = e.NewEditIndex;

  DataTable dt = new DataTable();
  dt = (DataTable)ViewState["Data"];

  this.gvPrefijos.DataSource = dt;
  this.gvPrefijos.DataBind();

}

El método RowCancelingEdit se produce cuando se hace clic en el botón Cancelar de una fila en modo de edición, pero antes de que la fila salga del modo de edición y en code-behind quedaría de esta manera :

//
protected void gvPrefijos_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
    this.gvPrefijos.EditIndex = -1;
    CargaPrefijos();
}
//

Finalmente en el metodo RowUpdating se produce cuando se hace clic en el botón Actualizar de una fila y en code-behind quedaría de esta manera :

protected void gvPrefijos_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
     int resultInt = 0;
     bool resultado = new Prefijos_CN().ModificarPrefijos(new Prefijos_CN
          {
            IdPrefijo = int.TryParse(this.gvPrefijos.DataKeys[e.RowIndex].Values["IdPrefijo"].ToString(), out resultInt) ? resultInt : 0,
            Nombre = ((TextBox)this.gvPrefijos.Rows[e.RowIndex].Cells[0].Controls[0]).Text,
            Descripcion = ((TextBox)this.gvPrefijos.Rows[e.RowIndex].Cells[1].Controls[0]).Text
         });

     if (resultado)
     {
        gvPrefijos.EditIndex = -1;
        CargaPrefijos();
     }
    else
    {

    }
}

En nuestro control GridView nos debe de quedar de la siguiente manera(Codigo) ..

<asp:GridView runat="server" ID="gvPrefijos" AutoGenerateColumns="False" DataKeyNames="IdPrefijo" onrowediting="gvPrefijos_RowEditing" onrowupdating="gvPrefijos_RowUpdating" onrowcancelingedit="gvPrefijos_RowCancelingEdit"></pre>
<Columns>
<asp:BoundField DataField="Nombre" HeaderText="Nombre" />
<asp:BoundField DataField="Descripcion" HeaderText="Descripcion" />
<asp:CommandField ShowEditButton="True"/>
</Columns>
</asp:GridView>

Finalmente al editar los registros de nuestro control GridView nos debe de quedar de la siguiente manera(Diseño) ..

Fig.3 Edición de registros

Fig.3 Edición de registros

 

Saludos...