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