Introducci�n

Cuando utilizamos un DataGrid en ASP .NET podemos necesitar tener acceso a m�s de un elemento de este, como por ejemplo, en el caso de que queramos llamar a otra p�gina pas�ndole m�s de un argumento.

El Problema

Por ejemplo, si tenemos este DataGrid:

Nos puede interesar abrir una p�gina con el nombre del beneficiario y el n�mero del cliente.

Por supuesto, desde el evento OnSelectedIndexChanged del DataGrid podr�amos tener acceso a esos elementos, pero eso supone un roolback al servidor, con la p�rdida de tiempo que eso supone.

Tambi�n tenemos la opci�n de utilizando una HyperLinkColumn en el DataGrid, asociarle un campo del DataSet, pero solo podemos asignarle un campo, pero no varios.

En este ejemplo, nos interesa abrir una p�gina pop-up de env�o de mensajes, y le queremos pasar el n�mero del cliente y el nombre del beneficiario.

La Soluci�n

La soluci�n a este problema pasa por utilizar una funci�n JavaScript para navegar por el DOM del documento y acceder a los valores de las columnas que nos interesen.

En primer lugar, agregamos a nuestro DataGrid una columna HyperLinkColumn:

<asp:HyperLinkColumn Text="Enviar Mensaje" NavigateUrl="javascript:NuevoMensaje(this)"></asp:HyperLinkColumn>

De esta manera, cuando hagamos clic en esta columna, llamamos a la funci�n JavaScript NuevoMensaje, pasandole como argumento this, que es una referencia al enlace donde hemos pulsado. 

La funci�n JavaScript es la siguiente: 

function NuevoMensaje(obj) {   
	
	Numero = obj.document.activeElement.parentElement.parentElement.firstChild.innerText;
	Nombre = obj.document.activeElement.parentElement.parentElement.firstChild.nextSibling.innerText;
			
	direccion = "NuevoMensaje.aspx";
	
	direccion += "?Numero=" + Numero;
	direccion += "&Nombre=" + Nombre;
	
	window.open(direccion,"Mensajes","width=500,height=400,toolbars=no,menubar=no,scrollbars=yes,resizable=yes");

}

Para obtener tanto el n�mero como el nombre, navegamos por el objeto actual (obj.document.activeElement) hacia arriba, recorriendo el arbol de la estructura del elemento Table (la representaci�n en HTML del DataGrid) hasta el elemento TR (mediante parentElement), que ser�a:

	
	obj.document.activeElement.parentElement.parentElement

Para obtener el n�mero, una vez que estamos en el elemento TR, en la fila, descendemos por el �rbol hasta la primera celda TD (mediante firstChild), y obtenemos el texto representado en ella (mediante innerText).

Para obtener el nombre, una vez que estamos en el elemento raiz de nuestro �rbol (TR), nos movemos hacia la siguiente celda (mediante nextSibling) y obtenemos de nuevo el contenido de esa celda (mediante innerText)

De esta manera, podemos navegar por la fila seleccionada para conseguir los valores que necesitemos. 

 Una vez que tenemos los valores deseados, creamos una variable donde ponemos la direcci�n de la p�gina y le agregamos en la QueryString estos dos valores. En la p�gina "NuevoMensaje.aspx" los leeremos de esta manera:

    Request.QueryString["Numero"]
    Request.QueryString["Nombre"]

Para abrir esta p�gina mediante una ventana pop-up, utilizamos el m�todo window.open, donde el primer argumento es la p�gina. El segundo argumento, optativo, es el nombre de la ventana, y el tercer argumento, tambi�n optativo son atributos de la ventana.

Conclusi�n

Con este art�culo hemos aprendido como podemos navegar por un DataGrid en el cliente, lo que nos puede ser util para realizar ciertas acciones sin tener que realizar un roolback al servidor, ganando en eficiencia de nuestra aplicaci�n.

Si te ha gustado, te ha dado alguna buena idea o te ha servido este art�culo, puedes votarlo. Por supuesto, si consideras que el art�culo no merece la pena, tambi�n lo puedes puntuar como tal.

Fichero con el c�digo de ejemplo: DiegoRodero_NuevoMensajeJS.zip - 1.0 KB