El control GridView (II)

Copyright Computer Aided Elearning, S.A. 1

1. SELECCIONAR FILAS DEL GRIDVIEW
l control GridView de ASP .NET proporciona mucha
funcionalidad por s mismo, por lo que nos permite desarrollar
escenarios habituales con poco esfuerzo y poco cdigo.
Uno de los escenarios que podemos requerir en una aplicacin
como la que estamos desarrollando es la posibilidad de seleccionar filas
o registros de un GridView.
Podemos configurar el control GridView de distintas formas para
conseguir esta funcionalidad, pero la ms sencilla es establecer su
propiedad AutoGenerateSelectButton al valor True.
Con esto, se aade una nueva columna en el GridView que consta
de un botn para seleccionar la fila. Obsrvelo en la figura siguiente.

Fjese que en el GridView ya aparece la nueva columna, que
consta, en este caso, de un hipervnculo que permite seleccionar la fila
correspondiente.
Con esto sera suficiente para proporcionar esta funcionalidad,
aunque despus veremos que podemos personalizar el aspecto del botn
o hipervnculo si no utilizamos la propiedad AutoGenerate
SelectButton.
Es importante recordar que la pgina se recarga cada vez que se
selecciona una fila.
E
El control GridView (II)
2
Normalmente, y para dejar ms clara esta situacin, se muestra con
un color de fondo distinto la fila seleccionada. Esto se consigue a travs
de la propiedad SelectedRowStyle del control GridView.
Sin embargo, si se utiliza paginacin u ordenacin adems de la
seleccin, puede producirse un pequeo problema y es que si se
selecciona una fila y despus se pasa a una pgina distinta de resultados
o simplemente se ordena el mismo, la misma fila (la misma posicin)
quedar seleccionada aunque realmente sea un registro distinto.
Normalmente ste no es el resultado deseado, ya que, por ejemplo,
si se trata de un producto, tendremos un producto distinto al que
inicialmente habamos seleccionado.
Para evitar que quede seleccionada la fila una vez hemos cambiado
de pgina (o incluso tambin si hemos elegido otro criterio de
ordenacin pulsando en un encabezado de columna), debemos
establecer la propiedad SelectedIndex del control GridView.
Pr ot ect ed Sub Gr i dVi ew1_PageI ndexChanged( )
Gr i dVi ew1. Sel ect edI ndex = - 1
End Sub
El evento PageIndexChanged ocurre justamente cuando cambia el
ndice de la pgina seleccionada si utilizamos paginacin. Estableciendo
en dicho evento la propiedad SelectedIndex del GridView al valor -1 lo
que realmente estamos haciendo es eliminar la seleccin si hay alguna
fila seleccionada en el GridView.
Si necesitramos hacer esto pero atendiendo a la ordenacin,
utilizaramos el mismo cdigo para el evento Sorted del GridView.

2. PERSONALIZAR LA SELECCIN
omo hemos podido comprobar, utilizando la propiedad
AutoGenerateSelectButton conseguimos la funcionalidad de
seleccin que seguramente necesitaremos en algn momento de nuestra
aplicacin.
Bien es cierto que con lmites, ya que no podemos configurar el
botn o hipervnculo que se incluye en la primera columna del
GridView para ello.
Si deseamos establecer esta funcionalidad de otra forma, podemos
aadir una columna de tipo CommandField y personalizarla
adecuadamente o incluso utilizar una columna de datos del GridView.
C
El control GridView (II)
Copyright Computer Aided Elearning, S.A. 3
Por lo tanto, estableceremos la propiedad AutoGenerate
SelectButton a False y editaremos la propiedad Columns para aadir
una columna de tipo CommandField (Select).

Se puede establecer la propiedad ButtonType para indicar que la
columna muestre un hipervnculo (Link), un botn (Button) o incluso
una imagen (Image).
Como se ha comentado, otra alternativa es utilizar una de las
columnas de datos para seleccionar la fila. Para ello, puede utilizar el
tipo de columna ButtonField.

El control GridView (II)
4
Por ejemplo, en este caso parece que es adecuado hacerlo
simplemente pulsando en la columna del identificador del producto.
En este caso, adems de la propiedad ButtonType, donde
elegiremos el aspecto de la columna, lo ms importante es elegir Select
en la propiedad CommandName.
De esta forma, la columna ButtonField funciona prcticamente
igual que una columna CommandField de tipo Select, como hemos
hecho antes.
Finalmente, debe establecer adecuadamente la propiedad
DataTextField. Si se trata de una columna de datos, el editor lo hace
por nosotros, enlazndola con un campo de la tabla Products.
Sin embargo, al crear una columna de tipo ButtonField, tenemos
que hacerlo nosotros expresamente.
Observe el resultado.

Fjese que ahora la columna ID no slo sirve para mostrar el
identificador del producto, sino que, si pulsamos en l tambin se
selecciona la fila.
Por lo tanto ya sabe que puede personalizar como desee la
funcionalidad de seleccin: desde lo ms rpido y sencillo a conseguir
el aspecto deseado.

Puede utilizar
los eventos
SelectedIndex
Changing y
SelectedIndex
Changed para
escribir cdigo
asociado al
momento
previo y
posterior a
seleccionar
una fila.
El control GridView (II)
Copyright Computer Aided Elearning, S.A. 5
3. USAR LA SELECCIN EN UN FORMULARIO
MAESTRO/DETALLE
amos a utilizar esta funcionalidad en un caso concreto. La
idea es crear una pgina web donde en la parte superior
aparecer la lista de clientes de la tienda virtual y, en la parte inferior,
las rdenes o pedidos que han realizado. Es la tpica pgina o formulario
maestro/detalle.

Aqu tenemos el ejemplo que hemos comentado. En la parte
superior aparece un control GridView asociado con un control
SqlDataSource que da acceso a los detalles de la tabla Customers y el
cual ya tiene configurada la seleccin de filas (fjese en la primera
columna). Esto ya sabemos hacerlo.
Por su parte, el control GridView de la parte inferior muestra las
rdenes o pedidos de compra del cliente seleccionado.
Para ello, el origen de los datos que tiene que mostrar este segundo
GridView est en funcin del cliente seleccionado, por lo que ser
necesario establecerlo a travs de un parmetro.
Sin embargo, qu valor debe tener este parmetro?
Si lo rellenamos con el ndice correspondiente a la fila
seleccionada en la lista de clientes, no funcionar, ya que lo que
realmente necesitamos es el identificador del cliente en s.
V
Otro ejemplo
de este tipo de
formularios es
visualizar las
rdenes y las
lneas de
detalle de
cada una de
ellas.
El control GridView (II)
6
Por ello, antes de configurar este segundo control GridView,
debemos establecer una propiedad del primero. Dicha propiedad es
DatakeyNames, donde indicamos el campo o lista de campos que son
claves para los registros que se muestran en el GridView.
Visual Studio establece esta propiedad por defecto, indicando que
el campo clave es CustomerID. Por lo tanto, no necesitamos hacer nada
si ya se ha establecido.
Una vez hecho esto, configuraremos el origen de los datos del
segundo control GridView. Por lo tanto, lo mejor es hacer clic en el
botn de etiqueta inteligente que aparece al seleccionarlo, desplegar
la lista Choose Data Source y elegir New Data Source.
Debe seguir el asistente para crear un origen de datos asociado con
una base de datos, pero cuando acceda al paso en el que se indica el
conjunto de datos requerido, debe elegir la opcin Specify a custom
SQL statement or stored procedure, ya que no desea acceder a todos
los registros de la tabla Orders, sino nicamente a los relacionados con
el cliente seleccionado en el primer control GridView.

Al continuar, deber escribir la correspondiente consulta SQL,
como puede ver en la figura de la pgina siguiente, donde se consigue el
conjunto de rdenes relacionadas gracias al uso del operador INNER
JOIN y del parmetro @CustomerID.
El control GridView (II)
Copyright Computer Aided Elearning, S.A. 7

En el siguiente paso deber configurar dicho parmetro.


Haga grande
este cuadro de
dilogo para
poder trabajar
con las
propiedades
avanzadas del
parmetro.
El control GridView (II)
8
El origen del valor del parmetro vendr dado por la seleccin del
control grdCustomers, es decir, de la rejilla con los datos de los
clientes de la parte superior de la pgina. Por ello, debe elegir Control
en la lista Parameter source y dicho control en la lista inferior.
Adems, al pulsar en Show advanced properties puede establecer las
propiedades necesarias del parmetro.
La cuestin aqu es indicar de dnde se recoger el valor para el
parmetro @CustomerID.
Sabemos que podemos hacerlo a travs de la propiedad
DataKeyNames del control GridView de la parte superior de la pgina.
Pues deberemos establecerlo en la propiedad PropertyName del
parmetro.
Si se fija en la figura anterior, comprobar que el valor dado para
dicha propiedad es la expresin:
SelectedDataKey.Values(CustomerID).
Como SelectedDataKey es una coleccin, debemos indicar
exactamente qu campo, para lo que utilizamos la propiedad Values y el
nombre del campo entre parntesis.
Con esto conseguimos el resultado deseado, es decir, que cada vez
que queda seleccionado un cliente en el control GridView superior,
aparece sus rdenes en el control GridView inferior.
Para ello, es necesario realizar un postback de la pgina y,
seguramente, volver a realizar la consulta en la base de datos.
Con todo ello, ya sabemos cmo preparar un formulario
maestro/detalle, tarea habitual en el desarrollo de una aplicacin de base
de datos.
El control GridView tambin proporciona funcionalidad para
editar, es decir, aadir, eliminar o modificar registros de un origen de
datos.
Sin embargo, normalmente es mejor utilizarlo para mostrar
informacin de la base de datos y realizar estas operaciones de edicin
utilizando acceso conectado a la base de datos, es decir, mediante
comandos SQL.



El control GridView (II)
Copyright Computer Aided Elearning, S.A. 9
4. EL CONTROL GRIDVIEW Y EL VIEWSTATE
hora que conocemos mejor el control GridView, que es uno
de los ms utilizados en escenarios web de acceso a datos, es
el momento de comentar su dependencia (o no) del ViewState.
Y por qu es importante conocer la relacin entre GridView y
ViewState? Pues porque la informacin almacenada en el ViewState
para un control de este tipo puede ser grande, lo que aumentar el
tamao de la pgina web considerablemente, como puede ver en el
cdigo HTML siguiente.

Aqu podemos ver el aspecto del ViewState, que no es tanto como
podamos pensar ya que el resultado del acceso a la base de datos est
paginado, por lo que el control GridView muestra nicamente algunos
registros.
Sin embargo, incluso as podemos darnos cuenta de que este
aspecto del GridView puede ser un serio problema (piense en una tabla
con cientos de filas).
Bien, inicialmente tenemos que tener en cuenta que es conveniente
habilitar el ViewState para el control GridView si realmente ste lo va a
utilizar.
A
El control GridView (II)
10
Esto quiere decir que si el control GridView se enlaza cada vez que
ocurre un postback, entonces no tiene sentido habilitar su ViewState, ya
que en todas las ocasiones que se accede al servidor web se realizar la
correspondiente consulta a la base de datos.
En nuestro caso esto es as por varios motivos: primero porque se
utiliza paginacin, lo que hace que se realice la consulta a la base de
datos cada vez que el usuario solicita una pgina distinta del conjunto de
resultados; y segundo porque no tenemos el control para evitarlo al
utilizar un objeto SqlDataSource como origen de los datos al que est
enlazado el GridView.
Por lo tanto, parece obvio que ser conveniente deshabilitar el
ViewState, ya que realmente no se utiliza para rellenar los datos en este
escenario. Recuerde que simplemente tiene que establecer el valor False
en la propiedad EnableViewState del control GridView.
En versiones anteriores de este tipo de controles, no se poda
deshabilitar el ViewState si se utilizaba alguna de las funcionalidades de
paginacin u ordenacin.
Afortunadamente esto no es as con el control GridView, ya que
los detalles necesarios para realizar esas funciones no los guarda en el
ViewState sino en una parte de ste que no puede deshabilitarse, el
Control State.
Se podra decir que hemos visto la mitad de la ecuacin porque en
el escenario planteado tiene sentido deshabilitar el ViewState de
controles como el GridView ya que cada vez que se realiza un postback,
vuelve a accederse a la base de datos.
Sin embargo, puede que sta no sea la mejor solucin y que otras
alternativas, como almacenar el resultado de la consulta en cach y
utilizarla cada vez, sean incluso mejor.
La segunda parte de la ecuacin es precisamente estudiar la cach
de ASP .NET.
Conociendo este componente de ASP .NET ser capaz de decidir
la mejor alternativa en cada caso.