JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Selección o edición de una fila de un DataGrid pulsando en cualquier lugar.

Seguimos con algunos consejos referentes a controles Web DataGrid.

Para poner una fila de un DataGrid en modo edición o para seleccionarla, normalmente añadimos un botón en la primera o la última columna que, al pulsarlo, hace un PostBack al sevidor y muestra los controles de edición o cambia la fila seleccionada (normalmente ésta aparece resaltada).
Podemos facilitarle mucho la vida a los usuarios si permitimos que la acción selección o la edición se obtenga pulsando en cualquier parte de una fila, y no sólo en el botón de edición.

¿Cómo se consigue esto?

Imaginemos que nuestro DataGrid tiene un botón de tipo LinkButton (o CommandButton) en la primera fila, que es el encargado de lanzar la edición o la selección de la fila. Podemos ocultarlo si queremos. Lo que tenemos que conseguir es que, cuando el usuario pulse en cualquier lugar de la fila, se envíe al servidor exactamente la misma información que si se hubiese pulsado sobre el botón, es decir, debemos simular el PostBack del botón concreto en cada fila. Aunque esto se puede intentar hacer "a pelo" es decir, viendo qué parámetros le pasa el botón a las funciones de JavaScript es mucho más sencillo que sea la propia página ASP.NET la que nos devuelva esta información. Para ello el objeto Page proporciona los métodos GetPostBackClientEvent y GetPostBackClientHyperlink.

Éstos devuelven la cadena JavaScript que utiliza un control a la hora de lanzar su PostBack al servidor. La diferencia es que el segundo le añade la cadena "javascript:" delante al código.

Teniendo en cuenta esto la solución es sencilla utilizando el evento ItemDataBound del control DataGrid:

private void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
      if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
   {
      //Aquí podríamos usar cualquier otra técnica para obtener una referencia al botón, como por ejemplo 'FindControl'
      LinkButton boton = (LinkButton)e.Item.Cells[0].Controls[0];
      e.Item.Attributes["onclick"] =
      Page.GetPostBackClientHyperlink(boton, "");
   }
}

Como se puede observar lo único que hacemos es asignar un atributo "onclick" a la fila del DataGrid, es decir, al elemento HTML 'TR' correspondiente que se genera, lo que hace que cuando se pulse en cualquier elemento que ése contenga se lanzará el PostBack, que es lo que buscábamos.
Al método GetPostBackClientHyperlink se le pasa una referencia al control cuyo código de PostBack queremos obtener, y una cadena con el parámetro adicional que debe pasar dicho método al servidor. Esto puede ser útil si, por ejemplo, queremos pasar directamente desde cada fila un identificador de la base de datos por ejemplo (aunque para eso hay métodos nativos más eficientes como los DataKey).

Creo que es un truco bastante interesante.

José Manuel Alarcón
Banner

Agregar comentario