Bloquear campos de DataGrid en Modo Edición


Hace poco estaba trabajando en un proyecto para la escuela, en el cual tenía que crear una aplicación web sencilla utilizando ASP.NET. Dicha aplicación tendría que utilizar una base de datos y realizara los famosos CRUDS (Create, Update, Delete, Select).

Las consultas de CREATE y SELECT funcionaron sin problemas, pero dentro de los requisitos de la aplicación, se pedía que se mostraran registros de la BD en un DataGrid, el cual tenía que ser editable para que el usuario de la aplicación pudiera actualizar los datos desde dicho DataGrid.

El DataGrid cuando se ve en vista de diseño, tiene una opción de editar columnas; en esta sección se agrega un campo del tipo CommandField (Editar,Actualizar, Cancelar), el cual será el control que nos permitirá modificar un registro de nuestro DataGrid.

Al agregar el CommandField a nuestro DataGrid, tenemos que agregar ciertos atributos al mismo:

  • OnRowEditing=” “
  • OnRowCancelingEdit=” “
  • OnRowUpdating=” “

<asp:GridView ID="Tabla" runat="server"
 AutoGenerateColumns="False" BackColor="White" BorderColor="#999999" BorderStyle="None"
 BorderWidth="1px" CellPadding="10" GridLines="Vertical" CellSpacing="5"
 OnRowEditing="RowEditing" OnRowCancelingEdit="RowCancelingEdit" OnRowUpdating="RowUpdating" >
 <AlternatingRowStyle BackColor="Gainsboro" />
 <Columns>
 <asp:BoundField HeaderText="Id" DataField="id" />
 <asp:BoundField HeaderText="Producto" DataField="producto" />
 <asp:BoundField HeaderText="Descripción" DataField="descripcion" />
 <asp:BoundField HeaderText="Existencia" DataField="existencia" />
 <asp:BoundField HeaderText="Precio" DataField="precio" DataFormatString="{0:c}" />
 <asp:BoundField HeaderText="Ultima Modificación" DataField="ultimaModificacion" />
 <asp:CommandField ShowEditButton="True" />
 </Columns>
 </asp:GridView>

Estos atributos son indispensables cuando se agrega un CommandField de este tipo, ya que al activar la edición del DataGrid, se crean dos botones, uno para actualizar los datos, y otro para cancelar la edición.

Los atributos mencionados anteriormente desencadenan eventos que se encuentran en el codebehind (C#).
En mi proyecto yo utilicé el siguiente código:

protected void RowEditing(object sender, GridViewEditEventArgs e){

int indice = Tabla.EditIndex = e.NewEditIndex;

loadDataToGrid();
 Tabla.Rows[indice].Cells[0].Enabled = false;
 Tabla.Rows[indice].Cells[5].Enabled = false;

}

El método recibe 2 parámetros, uno de tipo object que indica quien disparó el evento y otro de tipo GridViewEditEventArgs, que son los argumentos de un evento del tipo GridView Edit.

Básicamente lo que hago en este método es:

  1. En la primera línea obtengo el índice de la fila que quiero editar en el DataGrid  y lo asigno a una variable indice de tipo entero.
  2. Después mando a llamar a un método que se encarga de obtener los datos de la BD, crear un DataTable y hacer un DataBinding.
  3. Finalmente deshabilito dos campos de mi DataGrid, para que el usuario no pueda modificarlos. En este caso deshabilito mi primer campo, que indica el id del registro y el ultimo campo que es un timestamp que lo modifico desde el MySQL

Espero que esto sea de ayuda para personas que como yo, apenas comienzan a utilizar este lenguaje de programación.

En mi siguiente post mostraré cómo una vez modificados los campos de una fila en el DataGrid, actualizar la BD y volver a crear el DataGrid con los datos actualizados.

Anuncios
Esta entrada fue publicada el 27 noviembre, 2012 a las 0:20. Se guardó como Tech y etiquetado como , , , , , , , , . Añadir a marcadores el enlace permanente. Sigue todos los comentarios aquí gracias a la fuente RSS para esta entrada.

4 pensamientos en “Bloquear campos de DataGrid en Modo Edición

  1. Badillo en dijo:

    Hola, una preguntilla un poco noob. ¿Donde se encuentra el método RowEditing?

    • Hola, casi al final del post, puedes ver que yo generé ese metodo de RowEditing que recibe 2 parámetros.
      Lo puedes llamar como quieras, yo le puse RowEditing, pero lo podrías llamar edición o como quieras.
      Como te mencioné al final explico con detalle ese método.

      Espero te sirva, gracias por leerme 😀

  2. Naye en dijo:

    HOLA! Muy buen ejempl, solo que tengo problema al actualizar los datos. Me podrias mandar el codigo que utilizaste en el
    OnRowEditing=” “
    OnRowCancelingEdit=” “
    OnRowUpdating=” “

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: