Menu

Utilizar un GridView en un PopUp que retorne el valor seleccionado a la ventana padre

diciembre 23, 2010 - ASP.NET

Si, apenas lo escribí supe que el título de esta entrada era demasiado largo, pero no se de que manera explicar el codigo que voy a poner a continuacion, y es que esto lo necesite hace años, cuando inicie mi carrera de desarrollador y aun estaba aprendiendo .NET, resulta que necesitabamos cargar una serie de valores y que el usuario seleccionara uno de ellos, pero la lista de valores era tan grande que simplemente era engorroso hacer un ComboBox con 1000 valores, mi jefe (y amigo) de esa época nos dijo “Busquen meter eso en un PopUp y que al darle clic retorne el valor al TextBox”, yo pense “WTF!!!!????, eso es imposible!!!!!”, al final logramos hacerlo pero ya ni me acuerdo como lo hicimos aquella vez, primero veamos el resultado:

El código

Bueno, llego la hora de ensuciarnos las manos, primero que todo el codigo consta de dos partes, uno es el JavaScript que va en la ventana padre y otro es el código .NET y JavaScript que va en el PopUp, manos a la obra.

Ventana padre

Pues como ves hay un HyperLink que dispara el PopUp, acá les dejo el código que realiza esta función,:

protected void Page_Load(object sender, EventArgs e)
{
HyperLink1.Attributes.Add("onclick", "window.open('ProductsPopUp.aspx',null,'left=400, top=100, height=450, width= 450, status=no, resizable=no, scrollbars=no, toolbar=yes,location= no, menubar=yes');");
}

y éste es el código JavaScript que debe estar en el Head de la página padre:

function Update(elemValue)
{
document.getElementById('MainContent_TextBox2').value = elemValue;
}

Esta función lo que hará sera colocar el valor que se seleccione en el PopUp y lo colocara en el TextBox, cabe anotar que donde dice “MainContent_TextBox2” es el nombre del TextBox, asi que cámbialo por el nombre de tu control.

PopUp

Para el PopUp como podemos ver hay una grilla (No mostrare como llenarla) a la que se debe agregar una columna de tipo HyperLink, esto se logra convirtiéndola en TemplateField. Luego personalizamos el evento OnClick a nivel de cliente mediante el siguiente código:


protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

if (e.Row.RowType == DataControlRowType.DataRow)
{
HyperLink hl = (HyperLink)(e.Row.FindControl("Hyperlink1"));
hl.Attributes.Add("onclick", "javascript:select(" + e.Row.Cells[1].Text + ")");
}

}

Lo que hacemos acá es primero filtrar que lo que vamos a tratar es una fila no queremos tratar los títulos o los footers, una vez estemos seguros de que lo que tenemos es una fila de datos en el evento RowDataBound capturamos el HyperLink que pusimos en la columna adicional, y en el evento OnClick le decimos que ejecute la funcion “select” (La implementaremos un poco mas adelante) enviadole el valor que queremos que se devuelva, es decir, en la posicion Cells[1] esta el numero de ID que es el que se ve en mi ejemplo que se devuelve, si tu quieres devolver el nombre u otra cosa solo cambias el [1] por la posicion donde esta el valor que deseas. Para completar este ejemplo hace falta la funcion select, no es mas que el JavaScript que se encarga de llamar a la funcion Update de la ventana padre (Te acuerdas), y ésta a su vez se encarga de colocar el valor seleccionado en la caja de texto:

function select(value)
{
var ret = value;
window.opener.Update(ret);
window.close();
}

y eso es todo amigos, les dejo el proyecto de WebApplication1 (Hecho en Visual Studio 2012) para que puedan ver todo el tutorial con mas precisión. Happy coding!!

31 pensamientos sobre “Utilizar un GridView en un PopUp que retorne el valor seleccionado a la ventana padre

michael

sta bacan pero esta en c# y no pasa nada y otro esta en visual 2010 alo mucho la gente sabe visual 2008 pero de todas formas se agredece

Respuesta
Eduardo

Hola michael, gracias por comentar, el ejemplo esta en C# (pasarlo a VB.NET no es muy complicado) y te comento que el hecho de que este en Visual Studio 2010 no tiene nada que ver, es decir, esto es JavaScript que es independiente del lenguaje de servidor que se use…, tal vez descargaste el archivo y lo intentaste abrir en VS 2008 y por eso no funciono, si tienes alguna duda por favor házmela saber. Gracias por comentar!

Respuesta
John rios

yo opino q lo mejor es programar en VB6

Respuesta
Franklin Crespo

Gracias por tu aporte, pero tengo un problemita ojala me pueda ayudar, hice lo mismo q esta aca pero cuando quiero seleccionar la celda[2] simplemente no hace nada, si pongo celda [1] funciona me selecciona el Id pero necesito el nombre q esta en celda[2], y otra preguntita si quiero seleccionar los dos y pasarlo al form padre..Espero su repuesta Gracias

Respuesta
Eduardo

Franklin, lamento haber respondido tan tarde, gracias por comentar, si aun necesitas el codigo te puedo ayudar solo coloca otro comentario y con gusto te ayudare…

Respuesta
Franklin Crespo

No gracias a ti por contestar si necesito su ayuda no logro pasar los valores, tengo un grid cargado en un pop up como tu lo indicas pero no logro pasar los dos valores. aqui le dejo la linea de codigo
hl.Attributes.Add(“onclick”, “javascript:select(” + e.Row.Cells[1].Text + ” , ” + e.Row.Cells[2].Text + “)”);
pero no funciona. Ayuda por favor

Respuesta
Eduardo

bueno aunque estas concatenando los dos valores (e.Row.Cells[1].Text y e.Row.Cells[2].Text) no va a funcionar porque por ejemplo si el valor en la columna 1 es 50 y el de la columna dos es 60 la llamada al método quedaría asi: javascript:select(50,60) y el metodo select solo soporta un parametro, por el momento estoy un poco maniatado porque mi procesador se daño y ando con un Pentium IV (es extremadamente lento) voy a ver si en la oficina puedo ayudarte con algo…

Gracias por comentar!

Respuesta
Franklin Crespo

Nuevamente gracias, en realidad la instruccion que esta en el grid funciona asi como le puse pero creo q en el java es el problema por q si pasa dos valores el problema surge cuando quiero pasar el Id por ejemplo 1 y el nombre por ejemplo Juan cuando tengo que pasar letras ahi me surge el problema por q con numeros funciona bien espero me pueda ayudar muchisimas gracias de antemano

Respuesta
Eduardo

Hola franklin, pues mira esto fue lo que pude adelantar en mi ratos libre en la ofi, la verdad las pruebas que hice las realice pasando dos números ubicados en las posiciones 1 y 2 de la grilla, acá esta el código que cambie:

Ventana padre:
function Update(elemValue1, elemValue2)
{
document.getElementById(‘TextBox1’).value = elemValue1 + “,” + elemValue2
}

Ventana hija:
function Select(elemValue1, elemValue2)
{
var returnValue1 = elemValue1;
var returnValue2 = elemValue2;
window.opener.Update(elemValue1, elemValue2);
window.close();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
//Cambie esta parte y en vez de un FindControl tomo directamente el control que esta en la celda
HyperLink Link = (HyperLink)(e.Row.Cells[0]).Controls[0];
Link.Attributes.Add(“OnClick”, “javascript:Select(” + e.Row.Cells[1].Text + “,” + e.Row.Cells[2].Text + “)”);
}
}

Como te comente estos cambios funcionan con dos numeros, sin embargo mañana nuevamente tratare de ayudarte pasando un numero y un texto.

PD: Me demoro hasta tarde en contestar porque en mi trabajo no tengo internet.

Respuesta
David Calderon

Una pregunta.
estoy haciendo un proyecto muy similar, me da un problema cuando la primer celda, el hyperlinkfield me redirecciona a otra pagina, como hago para que cuando le de click me llame al evento RowDataBound y no a otra pagina?
muchas gracias

Respuesta
Eduardo

Hola david,

Crep que estas un poco confundido y es que el evento RowDataBound se ejecuta cuando se enlaza el origen de datos a la fila, es decir, cuando esta cargando los datos, si quieres controlar cuando se hace clic en la fila debe usar el evento SelectedIndexChaged.

Gracias por comentar!

Respuesta
Juan Camilo

Buenas Tardes,

Mira estoy haciendo un programa en asp.net 2008, lo que requiero y realmente no se me ocurre como hacerlo es:
tengo mi pagina Padre con un gridview en blanco, luego de dar click en un textbox este me abre una pagina con un gridview lleno, en este gridview tengo un Template con un link donde selecciono la fila deseada, luego esta informacion va a mi gridview de la pagina padre. esta informacion se carga en la primera fila, luego al agregar la siguiente informacion haciendo click en mi textbox vuelve y abre la pagina con el gridview con la informacion, pero al seleccionar otra fila o la misma este no se agrega al griview de la pagina padre y me borra el dato anterior, mi pregunta es que debo hacer, he estado buscando y la verdad no encuentro algo que me lo solucione, de antemano muchas gracias

Respuesta
Carlos

trato de descargar el archivo y no se encuentra me podrías ayudar lo necesito

Respuesta
Nombre (requerido)


Eduardo:

Hola michael, gracias por comentar, el ejemplo esta en C# (pasarlo a VB.NET no es muy complicado) y te comento que el hecho de que este en Visual Studio 2010 no tiene nada que ver, es decir, esto es JavaScript que es independiente del lenguaje de servidor que se use…, tal vez descargaste el archivo y lo intentaste abrir en VS 2008 y por eso no funciono, si tienes alguna duda por favor házmela saber. Gracias por comentar!

Respuesta
Carlos

Hola Eduardo me podrias hacer le favor de regalarme el proyecto del popup el hiper que esta ahi no me muestra nada dice un error

Respuesta
Eduardo

Listo carlos, lo monte nuevamente… gracias por comentar!

Respuesta
Mario

Necesito el codigo del proyecto por favor….

Respuesta
Eduardo

Hola Mario gracias por comentar, actualicé la URL del link del proyecto para que puedas descargarlo, recuerda que debes cambiar el ConnectionString a tu servidor de BD y debes tener AdventureWorks para que funcione perfectamente, saludos y Happy Coding!

Respuesta
Mario

Necesito el codigo por favor¡¡¡¡¡¡¡

Respuesta
Mario

Gracias Eduardo¡¡¡¡ Te estoy agradecido

Respuesta
Mario

Perdon por la molestia nuevamente. como puedo hacer para pasarle texto al Textbox? ya que solo pasa numeros. desde ya muchas gracias¡¡¡

Respuesta
Eduardo

Hola mario gracias por el comentario nuevamente, lamentablemente no puedo ayudarte por ahora porque intentando re dimensionar mi .vdi de Visual Studio (Estaba colocando el Visual Studio y el SQL server en la misma máquina) el archivo ha quedado corrupto, y con ello todos los proyectos de este blog :(… tendré que comenzar nuevamente…

Respuesta
Cesar

Estimado Mario, para pasar texto debes colocarlo entre comillas simples.. ahi va el ej.
hl.Attributes.Add(“onclick”, “javascript:select(‘” + e.Row.Cells[1].Text + “‘)”);

Respuesta
Mario

ok. no hay problema. gracias por la predisposicion

Respuesta
Eduardo

Cesar muchas gracias por la ayuda. Gracias por comentar!

Respuesta
alexis

hola eduardo esta muy bueno tu post pero un favor podrias pasarme el codigo para poder verlo y ayudarme creo q lo nesecito e buscado y aun no lo encuentra gracias!.

Respuesta
Proco

Hola alexis gracias por comentar, a pesar de tener muy poco tiempo libre para dedicarle al blog (Estoy haciendo un posgrado), logré sacar 10 minutos para hacer un pequeñisimo ejemplo y montarlo en el link del post, si puedo serte de mas ayuda con gusto.

Happy coding!

Respuesta
Jose

Hola Eduardo, enhorabuena por tu post, es de mucha ayuda y en pocos sitios lo he encontrado tan bien explicado. Yo tengo un problema a la hora de darle click al hyperlink, ya que no hace nada. He intentado bajarme el proyecto para verlo pero no me deja ya que solo me aparece el .sl. Mi idea era hacerlo con un ImageButton, supongo que sería más o menos igual.

Respuesta
Proco

Hola jose gracias pro comentar!, tienes toda la razón en el ZIP solo hay sln (Mea culpa!) y también disculpa la tardanza por contestar, pero en estos momentos estoy finalizando un proyecto en mi trabajo y estoy en parciales en el posgrado así que tengo muy poco tiempo, sin embargo saqué un poco de tiempo y subí nuevamente el proyecto para que todos puedan usarlo. Happy coding!

Respuesta
Mauricio Gomez

Men por favor ayudame.

Como paso un arreglo de valores a la ventana padre, o como pasaria el viewstate de la ventana hija a la ventana padre por js.

Gracias si me puedes dar una mano.

Respuesta
Proco

Hola mauricio gracias por comentar, no debes pasar el viewstate de la ventana hija al padre, puedes cambiar el código en la parte de e.Row.Cells[1].Text y mandas lo que desees…

Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *