[Tutorial] Biblia del Gridview en Aplicaciones Web (VB || C#)

[Hadess_inf]

Usos del Gridview
Aplicaciones Web en .NET 2005

Hola a todos, cansado de recibir, me anime a escribir este documento, mi primer tuto especialmente hecho para elhacker.net, esperando que sea útil a la toda la gente del foro y comunidad de programadores, tratare de hacer una guía de los usos que se le pueden dar al control Gridview, sin más que decir empecemos:

Trabajaremos con la siguiente Base de Datos:

Create database ejemplo
Go
Use ejemplo
Go

Create table categoría
(id_categoria int primary key,
Categoría varchar(30))
Go

Create table sub_categoria
(id_sub_categoria int primary key,
Id_categoria int foreign key references categoría(id_categoria),
Sub_categoria varchar(30),
vacantes int)
Go

Insert into categoría values (1,'Matematica')
Insert into categoría values (2,'Lenguaje')
Insert into categoría values (3,'Ciencias')

Insert into sub_categoria values (1,1,'Algebra',0)
Insert into sub_categoria values (2,1,'Geometria',0)
Insert into sub_categoria values (3,1,'Trigonometria',0)
Insert into sub_categoria values (4,2,'Gramatica',0)
Insert into sub_categoria values (5,2,'Literatura',0)
Insert into sub_categoria values (6,3,'Fisica Elemental',0)
Insert into sub_categoria values (7,3,'Quimica Elemental',0)
Insert into sub_categoria values (8,3,'Biologia',0)

Para empezar crearemos un nuevo Sitio Web:

Por defecto aparecerá el WebForm Default.aspx en blanco. Dentro de esta página agregaremos el control Gridview y empezaremos con los posibles usos que le podemos dar a este control.

Vista antes de realizar alguna conexion

Por medio del SmartTag realizaremos la conexión a la base de datos Ejemplo, tabla categoría:

Vista despues de realizar conexion con tabla Categoria

En este caso no se desea mostrar el campo código de la categoría (id_categoria) para ocultarlo damos clic en el smartTag y seleccionamos Editar Columnas, de la nueva ventana que nos muestra seleccionamos la columna id_categoria y le cambiamos la propiedad Visible a False y aceptamos:

Ocultamos la columna id_categoria

Gridview con la columna id_categoria oculta

Los ejemplos que se vallan adicionando, tomaran como inicio este Primer Post.
Edito: Por favor abstenerse de publicar comentarios hasta que se terminen los articulos. Gracias por su comprencion.
Comentarios ¿? ---- Sugerencias ¿? ---- Recomendaciones ---- Enviar Mensaje Privado.
Me interesaria saber que piensan los usuarios acerca del tuto.

[Hadess_inf]

Uso de TemplateField

Caso 1 - Button

Bueno supongamos que se desea agregar un botón al final de cada fila y que al pulsarlo, se abra una nueva página con las subcategorías de la categoría seleccionada, veamos un ejemplo:

Elemento adicional para el ejemplo: WebForm llamado Subcategoría.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados. Para terminar por ahora damos clic en aceptar.

Ahora para agregar el boton, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A), de la barra de herramientas arrastraremos un Botón (Button1) al cuadro, una vez hecho esto daremos nuevamente en el smartTag y seleccionaremos el link Terminar edición de Plantilla (Imagen B).

Imagen A

Imagen B

Una vez hecho esto, el aspecto del Gridview habrá cambiado, en el caso que el botón no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código:

<asp:TemplateField>
<ItemTemplate>
   <asp:Button ID="Button1" runat="server" Text="Button"  style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>

Una vez hallado, eliminaremos todo el style del botón, con esto el botón se colocara dentro de la columna del gridview (donde corresponde Imagen C).

<asp:TemplateField>
<ItemTemplate>
   <asp:Button ID="Button1" runat="server" Text="Button" />
</ItemTemplate>
</asp:TemplateField>

Imagen C

Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control Button, una vez encontrado se le agregara una función en javascript.

Finalmente abrimos la pagina subcategoría.aspx, damos doble clic en la pagina, y en el evento load de la pagina mostramos el codigo de la categoría (el codigo se le fue enviado de la pagina default.aspx en la variable id), en este caso solo lo mostraremos ya que existen mil formas de uso que se le pueden dar.

Default.aspx

VB
Protected Sub Page_PreRender(ByVal sender As Object...)...
Dim i As Integer
Dim row As GridViewRow
Dim but As Button
For i = 0 To GridView1.Rows.Count - 1
  row = GridView1.Rows(i)
If row.RowType = DataControlRowType.DataRow Then
  but = row.FindControl("Button1")
  but.Attributes.Add("onclick", "javascript:window.open('subcategoria.aspx?id=" & GridView1.DataKeys(i).Value.ToString & "','','menubar=no');")
End If
Next
End Sub

C#
protected void Page_PreRender(object sender, EventArgs e)
{
  int i;
  GridViewRow row;
  Button but;
  for(i=0;i<GridView1.Rows.Count ;i++)
  {
    row = GridView1.Rows[ i ];
    if (row.RowType == DataControlRowType.DataRow)
    {
         but = (Button)row.FindControl("Button1");
            but.Attributes.Add("onclick", "javascript:window.open('subcategoria.aspx?id=" + GridView1.DataKeys[ i ].Value.ToString() + "','','menubar=no')");
    }
  }
}

Subcategoria.aspx

VB
Protected Sub Page_Load(ByVal sender As Object,...) Handles Me.Load
Response.Write(Request.Params("id").ToString())
End Sub

C#
protected void Page_Load(object sender, EventArgs e)
{
  Response.Write(Request.Params["id"].ToString());
}

Ejecurar y aplicarlo a lo que se desee

[Hadess_inf]

Uso de TemplateField

Caso 2 - Checkbox

Se desea agregar un checkbox al final de cada fila y que solo se pueda marcar uno de todos los mostrados, veamos un ejemplo:

Elemento adicional para el ejemplo: JScript: llamado JScript.js.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados. Para terminar por ahora damos clic en aceptar.

Ahora para agregar el checkbox, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A), de la barra de herramientas arrastraremos un checkbox (CheckBox1) al cuadro, una vez hecho esto daremos nuevamente en el smartTag y seleccionaremos el link Terminar edición de Plantilla (Imagen B).

Imagen A

Imagen B

Una vez hecho esto, el aspecto del Gridview habrá cambiado, en el caso que el checkbox no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código:

<asp:TemplateField>
<ItemTemplate>
   <asp: CheckBox ID="CheckBox1" runat="server"   style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>

Una vez hallado, eliminaremos todo el style del checkbox, con esto el checkbox se colocara dentro de la columna del gridview (donde corresponde Imagen C). Y agregaremos los parámetros AutoPostBack="False" y name="CheckBox1"

<asp:TemplateField>
<ItemTemplate>
   <asp: CheckBox ID="CheckBox1" name="CheckBox1" runat="server" Autopostback="false"/>
</ItemTemplate>
</asp:TemplateField>

Imagen C

Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control CheckBox1, una vez encontrado se le agregara una función en javascript.

Default.aspx

VB
Protected Sub Page_PreRender(ByVal sender As Object...)...
Dim i As Integer
Dim row As GridViewRow
Dim ch As CheckBox
For i = 0 To GridView1.Rows.Count - 1
  row = GridView1.Rows(i)
  If row.RowType = DataControlRowType.DataRow Then
      ch  = row.FindControl("CheckBox1")
      ch.Attributes.Add("onclick", "javascript:valida(this.name)")
  End If
Next
End Sub

C#
protected void Page_PreRender(object sender, EventArgs e)
{
  int i;
  GridViewRow row;
  Checkbox ch;
  for(i=0;i<GridView1.Rows.Count ;i++)
  {
    row = GridView1.Rows[ i ];
    if (row.RowType == DataControlRowType.DataRow)
    {
         ch = (CheckBox)row.FindControl("CheckBox1");
        ch.Attributes.Add("onclick", "javascript:valida(this.name)");
    }
  }
}

Abrimos el archivo JScript.js y colocamos lo siguiente:

function valida(obj){
  for (i=0;i<document.form1.elements.length;i++)
  {
    if(document.form1.elements[ i ].type == "checkbox")   
    {
      if(obj!=document.form1.elements[ i ].name)
      {
        document.form1.elements[ i ].checked=0;
      }
    }
  }
}

Recordar agregar la referencia al inicio de la pagina Default.aspx

<head runat="server">
    <script src="JScript.js" type="text/javascript"></script>
</head>

Ejecutar y aplicar para lo que se necesite.

[Hadess_inf]

Uso de TemplateField

Caso 3 – TextBox ( Validación )

Se desea agregar 2 textbox al final de cada fila, en el primero solo se podran ingresar numeros y en el segundo solo letras:

Elemento adicional para el ejemplo: JScript: llamado JScript.js.
Para este ejemplo seleccionamos el GridView, nos dirigimos al SmartTag y seleccionamos Editar Columnas. En campos disponibles seleccionamos TemplateField y damos clic en Agregar, esto agregara el TemplateField a la lista de Campos Seleccionados(Repetir el proceso 2 veces). Para terminar por ahora damos clic en aceptar.

Ahora para agregar el TextBox, nos dirigimos al smartTag y seleccionamos Editar Plantillas, esto nos abrirá una nueva vista (imagen A).

Imagen A

Para este ejemplo hemos agregado 2 TemplateField, para poder agregar un textbox para cada uno, seleccionamos el smart Tag y clickeamos en el combo(Imagen B). Como se puede apreciar en la imagen se tienen las Column [2] y [3], en nuestro caso necesitamos agregar 1 textbox para cada calumna TextBox1 y Textbox2 respectivamente. Para esto seleccionamos la opcion ItemTemplate de cada Column, y agregamos el Textbox.

Imagen B

Este proceso se repite tanto para la column [2] (TextBox1) y [3] (TextBox2).

Repetir proceso para Column [2] y Column [3]

Bien, nuevamente, el aspecto del Gridview habrá cambiado, en el caso que el TextBox no se encuentre dentro del gridview, daremos clic en la pestaña Código (Source) de la página, y dentro del código del Gridview buscaremos el siguiente bloque de código (debido a que hemos agregado dos TextBox, debemos repetir el mismo proceso para ambos):

<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox1" runat="server"   style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox2" runat="server"   style="position:absolute;left:15 px "/>
</ItemTemplate>
</asp:TemplateField>

Una vez hallado, eliminaremos todo el style del TextBox, con esto el TextBox se colocara dentro de la columna del gridview (donde corresponde Imagen C), en el caso que se quiera dar un tamaño y que el texto salga centrado se definen los atributos siguientes: width="60px" y style="text-align:center":

<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox1" runat="server" width="60px"  style="text-align:center"/>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField>
<ItemTemplate>
<asp: TextBox ID="TextBox2" runat="server" width="60px"  style="text-align:center"/>
</ItemTemplate>
</asp:TemplateField>

Imagen C

Hacemos doble clic en la pagina y nos mostrara el código ASPX de la pagina, del combo de eventos seleccionamos: PreRender (este ocurre cuando la pagina termina de cargarse). Lo que se hará será recorrer cada fila del gridview y buscar el control TextBox1 y TextBox2, una vez encontrado se le agregara una función en javascript, el TextBox1 solo permitira letras y el TextBox2 solo numeros.

VB
Protected Sub Page_PreRender(ByVal sender As Object...)...
Dim i As Integer
Dim row As GridViewRow
Dim t1,t2 As TextBox
For i = 0 To GridView1.Rows.Count - 1
  row = GridView1.Rows(i)
  If row.RowType = DataControlRowType.DataRow Then
      t1  = row.FindControl("TextBox1")
      t2  = row.FindControl("TextBox2")
      t1.Attributes.Add("onkeypress", "javascript:return validaletra(event);")
      t2.Attributes.Add("onkeypress", "javascript:return validanumero(event);")
  End If
Next
End Sub

C#
protected void Page_PreRender(object sender, EventArgs e)
{
  int i;
  GridViewRow row;
  TextBox t1,t2;
  for(i=0;i<GridView1.Rows.Count ;i++)
  {
    row = GridView1.Rows[ i ];
    if (row.RowType == DataControlRowType.DataRow)
    {
      t1 = (TextBox)row.FindControl("TextBox1");
      t2 = (TextBox)row.FindControl("TextBox2");
      t1.Attributes.Add("onkeypress", "javascript:return validaletra(event);");
      t2.Attributes.Add("onkeypress", "javascript:return validanumero(event);");
    }
  }
}

Abrimos el archivo JScript.js y colocamos lo siguiente:

function validanumero(e)
{
        tecla = (document.all)?e.keyCode:e.which;
        if (tecla==8) return true;
        patron = /\d/;
        return patron.test(String.fromCharCode(tecla));
}
function validaletra(e) {
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla==8) return true;
    patron =/[A-Za-z\s]/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}

Recordar agregar la referencia al inicio de la pagina Default.aspx

<head runat="server">
    <script src="JScript.js" type="text/javascript"></script>
</head>

Ejecutar y aplicar para lo que se necesite.

[Hadess_inf]

Mostrar campo cambiado de una BD

Caso 4 - Definir Sexo

Para este ejemplo se creara una nueva tabla en la base de datos Ejemplo y se trabajara con la misma:

Create table usuario
(id_usuario int primary key,
usuario varchar(30),
sexo char(1))
go

insert into usuario values (1,'Jose',1)
insert into usuario values (2,'Maria',0)
insert into usuario values (3,'Silvia',0)
insert into usuario values (4,'Carlos',1)

En la tabla usuario, se tiene el campo sexo los valores son 0=mujer | 1=hombre, mostrar el sexo del usuario.

Agregar un Gridview a la pagina, realizar la conexión a la tabla usuario (imagen A) y ocultar el id_usuario, habiendo realizado todo ese procedimiento el gridview quedara como se ve en la imagen B.

Imagen A

Se seleccionan todos los campos

Imagen B

El id_usuario esta oculto

Acontinuacion seleccionamos el Gridview y del panel de Propiedades seleccionamos la vista de eventos y damos doble click en el evento RowDataBound (Imagen C), esto nos mostrara el codigo ASP.

Imagen C

En aquel evento RowDataBound ejecutamos el siguiente codigo:

VB
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ...) Handles ...
        If e.Row.RowType = DataControlRowType.DataRow Then
            If e.Row.Cells(2).Text = "0" Then
                e.Row.Cells(2).Text = "Mujer"
            Else
                e.Row.Cells(2).Text = "Hombre"
            End If
        End If
    End Sub

C#
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
  if (e.Row.RowType == DataControlRowType.DataRow)
  {
    if (e.Row.Cells[2].Text == "0")
    {
      e.Row.Cells[2].Text = "Mujer";
    }
    else
    {
      e.Row.Cells[2].Text = "Hombre";
    }
  }
}

Ejecutar y aplicar para lo que se necesite.

[Hadess_inf]

GridView sin datos

Caso 5 - EmptyDataTemplate

Para este caso se usara la tabla Usuarios y se debera eliminar todo el contenido

Delete usuarios

Bueno, hay pocas personas que usan esto debido a que lo desconocen, en el caso que el control Gridview se le enlace a una tabla y que esta tabla no contenga datos se opta por agregar un label, y hacerlo visible si el gridview no retorna filas.

VB
If gridview1.rows.count = 0 then
  label1.text = "No se encontraron registros"
  label1.visible = true
end if

C#
if(gridview1.rows.count == 0)
{
  label1.text = "No se encontraron registros";
  label1.visible = true;
}

Al hacer esto estaremos generando codigo extra en ASP, a mi criterio no es recomendado usar ese medio para informarle al usuario que no existen registros en dicha tabla, para este caso usaremos la propiedad EmptyDataTemplate, esta propiedad se ejecutara y/o activara en el caso que el gridview no retorne registros. Para activarla seleccionamos el SmartTag del control Gridview y seleccionamos Editar Plantillas (Imagen A), en el caso que el gridview no tenga ningun TemplateField la vista nos aparecera como lo indica la Imagen B, en el caso que el control contenga uno o mas TemplateField (imagen C) se debera seleccionar el combo y buscar la opcion que diga EmptyDataTemplate, sea cual sea el caso, una vez selecionada la propiedad EmptyDataTemplate, escribir "No se encontraron registros" (Imagen D). Para finalizar, selecionamos el SmartTag y elejimos Terminar edicion de plantilla.

Imagen A

Seleccion Editar Plantillas

Imagen B

Gridview sin TemplateFields

Imagen C

Gridview con mas de un TemplateField

Seleccione EmptyDataTemplate de todas las opciones

Imagen D

Ingrese mensage que se mostrara en el caso que no hallan registros

En el caso que ud quiera mostrar no simplemente un mensaje sino una tabla o alguna imgen, seleccione Codigo (Source) de la pagina, en el codigo html del Gridview busque el siguiente bloque de codigo (Imagen E), simplmente tendria que poner la tabla entre las etiquetas EmptyDataTemplate (Imagen F)(Recuesde que cualquier elemento que quiera mostrar tendra que ir entre las etiquedas EmptyDataTemplate que se detallan en las imagenes E y F).

Imagen E

Imagen F

Ejecutar y aplicar para lo que se necesite.

[Hadess_inf]

Uso de TemplateField

Caso 6 - Dropdownlist

Se desea visualizar todas las subcategorias y ver la categoria a la que pertenecen:

SmartTag = ST
Para este ejemplo la conexion por medio del ST se hara a la tabla SubCategoria campos id_subcategoria, id_categoria, categoria (imagen A). Una vez realizada la conexion nos dirigimos al ST, click en editar columnas y se ocultaran los campos id_subcategoria, id_categoria y se agregaran 1 TemplateField (Ubicar el TemplateField 1 posicion antes del campo Sub_Categoria, Imagen B).

Imagen A

Seleccion de campos de tabla SubCategoria

Imagen B

Ubicar el TemplateField 1 posicion antes del campo Sub_categoria

Una vez mas nos dirigimos al ST y seleccionamos editar Plantillas, nuevamente nuestra vista del gridview cambiara por la de un cuadrado dentro de otro. Del panel de herramientas arrastramos un Dropdownlist y lo ubicamos dentro del recuadro(Imagen C), una vez que el control este dentro de recuadro seleccionamos el ST del dropdownlist y seleccionamos Elegir origen de datos, esto nos abrira una nueva ventana de la cual seleccionaremos la opcion <Nuevo origen de datos...> del Combo - Seleccionar un origen de datos (Imagen D).

Imagen C

Imagen D

Bueno pues esto nos permitira conectar el dropdownlist a cualquier tabla de nuestra base de datos, en este caso la conexion se realizara a la tabla Categoria campos id_categoria, categoria. Una vez hallamos realizado la conexion a la tabla nos aparecera nuevamente la ventana que nos aparecio anteriormente (Imagen E) pero en esta ocacion ya estaran activados los 2 dropdownlist inferiores, en el primero se selecciona lo que mostrara el dropdownlist (en este caso el campo categoria) y en el segundo el valor del elemento (en este caso el campo id_categoria), una vez acabado aparecera el SqlDataSource debajo del dropdownlist (Imagen F).

Imagen E

Imagen F

Antes de terminar la edicion de plantilla, seleccionamos el dropdownlist, seleccionamos el ST y clickeamos en la opcion Editar DataBinding, esto nos mostrara una nueva ventana, seleccionamos la propiedad SelectedValue, marcamos la opcion Enlace a campo y del combo seleccionamos el campo id_categoria y aceptamos (Imagen G).

Imagen G

Una vez hallamos aceptado, click en el ST del gridview y seleccionamos Terminar edicion de plantilla. Bien, nuevamente, el aspecto del Gridview habrá cambiado, en el caso que el Dropdownlist no se encuentre dentro del gridview, dar clic en la pestaña Código (Source) de la página, y buscar el bloque de codigo (Imagen H) recuerden que en el caso que ubiera el atributo style se debe eliminar con esta accion el dropdownlist se deberia de colocar en la posicion correcta dentro del gridview(Imagen I).

Imagen H

Imagen I

Ejecutar y aplicar para lo que se necesite.

[Hadess_inf]

ToolTips Personalizados y Ventanas Pop up estilo Modal

Caso 7 - Integrando DOM al .Net

Preparando la clase

Agregar una clase al proyecto (class1.vb), y agregar el siguiente codigo en la misma:

Imports Microsoft.VisualBasic
Imports System.Data.SqlClient
Public Class Class1
    Dim con As New SqlConnection("integrated security=sspi;data source=(local);initial catalog=ejemplo")
    Dim da As SqlDataAdapter
    Dim dtb As Data.DataTable
    Public Function subcateroria(ByVal id_categoria As Integer) As Data.DataTable
        da = New SqlDataAdapter("select * from sub_categoria where id_categoria=" & id_categoria & "", con)
        dtb = New Data.DataTable
        da.Fill(dtb)
        Return dtb
    End Function
End Class

Agregando las referencias a la pagina

Agregar un archivo *.css con el nombre de popup.css y agregarle las siguientes lineas, el usuario podra modificar el estilo de las ventanas modificando los valores de este documento:

div.popup {
  max-width: 600px;
  background-color: white;
  position: absolute;
}

#popup_overlay {
  background-color:aliceblue;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
}

span.popup_link, a.popup_link {
  cursor: pointer;
}

.popup_draghandle {
  cursor: move;
}
.ventana
{
   background-color:#F4F6EB;
   border-collapse:collapse;
   font-size:smaller ;
   font-family:Verdana;
}
.titulo
{
   height:17px;
   background-image:url(bar.jpg);
   background-repeat:repeat-x
}

Agregar la siguiente imagen al proyecto.

Agregar los siguientes archivos al proyecto:

dragdrop
effects
popup
prototype

Agregarlos al head de la pagina:

<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="dragdrop.js" type="text/javascript"></script>
<script src="popup.js" type="text/javascript"></script>
<link rel="stylesheet" href="popup.css" type="text/css" />

Preparando el Gridview
SmartTag = ST
Acontinuacion se dara un ejemplo de como podemos generar ventanas pop up al estilo modal asi como tambien tooltips personalizados. Seguir los pasos del primer post para realizar la conexion del gridview a la tabla Categoria de la BD Ejemplo, ocultar el id_categoria, el gridview debera quedar como en la imagen A.

Imagen A

A continuacion seleccionamos el ST del gridview y seleccionaremos la opcion editar columnas una vez que estemos en la nueva ventana, agregaremos 1 TemplateField (El template field debe de estar entre los campos  id_categoria y Categoria) terminado de agregar el templatefield click en Aceptar.

Nuevamente seleccionamos el ST del Gridview y seleccionamos la opcion Editar Plantillas, el diseño del gridview cambiara por la de un cuadro, del panel de herramientas arrastramos un control HyperLink y sin cambiar el Text del hyperlink damos click en el ST del gridview y seleccionamos Terminar edicion de la plantilla(Imagen B), en el caso que el control HyperLink no este dentro del gridview, ir a Codigo (Source) ubicar el control Hyperlink y eliminar todo el Style (Ver Post Anteriores).

Gridview despues de agregar el templatefield && Hyperlink

Imagen B

Una vez que el gridview este como se muestra en la imagen B, debemos escoger una imagen para mostrar como icono y agregarla al proyecto (Imagen C), en mi caso he seleccionado esta (la guardare en el proyecto con el nombre de eye), acontinuacion nos dirigiremos a Codigo (Source) de la pagina y buscaremos el bloque de codigo que corresponde al TemplateField del Gridview (<asp:TemplateField> - </asp:TemplateField>).

Imagen C

Una vez hallamos encontrado las etiquetas de apertura y cierre del TemplateField, buscaremos en su interior la etiqueda HyperLink, eliminaremos el texto e insertaremos la imagen que elegimos anteriormente (en mi caso eye.gif, recordar ponerle un width=15px en el caso que la imagen sea demasiado grande), la linea completa debera quedar como se indica y el diseño del gridview como se indica en la imagen D:

<asp:HyperLink ID="HyperLink1" runat="server"><img src="eye.gif" width="15px"/></asp:HyperLink>

Diseño del Gridview con el control HyperLink y la Imagen

Imagen D

Añadiendo div para el tooltip

Nos iremos al Codigo (Source) de la pagina y nos situaremos antes de la etiqueta de cierre del form (</form>) y colocaremos los siguiente.

<div id="tooltip" class="popup" style="width:150px">
<table border="1" cellspacing='0' cellpadding='0' class='ventana'>
<tr><td align="center">Aqui ira el mensaje para el tooltip, poner una imagen o lo que ud desee.</td></tr>
</table>
</div> 

<script type="text/javascript">
//<![CDATA[
new Popup('tooltip','',{modal:true})
//]]>
</script>

Recordar que tanto el id del div debe ser igual al primer parametro de la funcion new popup

Añadiendo codigo para las ventanas modal y lanzadores.

Agregar el siguiente bloque de codigo entre el codigo anterior y la etiqueta de cierre del form (</form>):

VB
    <%
        Dim cls As Class1
        Dim a, b As Integer
        Dim row As GridViewRow
        cls = New Class1
        Dim cod As String
        If GridView1.Rows.Count > 0 Then
            For a = 0 To GridView1.Rows.Count - 1
                cod = GridView1.DataKeys(a).Value.ToString
                Response.Write("<div id='panel" & a + 2 & "' class='popup' style='width:200px'>" & Chr(13))
                Response.Write("<table border='1' cellspacing='0' cellpadding='0' width='100%' class='ventana'><tr><td class='titulo'><table border='0' width='100%' style='border-collapse:collapse'><tr class='popup_draghandle'><td align='left'><font color='white'><b>Detalles de Categoria</b></font></td><td align='right' style='width: 15px'><table border='0' width='100%'><tr><td align='right'><a class='popup_closebox' href='#'><font style='font-size:smaller' color='white'>X</font></a></td></tr></table></td></tr></table></td></tr>" & Chr(13))
                Response.Write("<tr>" & Chr(13))
                Response.Write("<td align='center'>" & Chr(13))
                Response.Write("<table border ='0' width='95%' style='border-collapse:collapse'>" & Chr(13))
                Response.Write("<tr><td>&nbsp;</td></tr>")
                Response.Write("<tr><td align='center' style='width:110px'><b>Sub Categorias</b></td></tr>" & Chr(13))
                If (cls.subcateroria(cod).Rows.Count = 0) Then
                    Response.Write("<tr><td align='center' style='width:110px'>No se encontraron Sub Categorias</td></tr>" & Chr(13))
                Else
                    For b = 0 To cls.subcateroria(cod).Rows.Count - 1
                        Response.Write("<tr><td align='center' style='width:110px'>" & cls.subcateroria(cod).Rows(b)("sub_categoria").ToString & "</td></tr>" & Chr(13))
                    Next
                End If
                Response.Write("<tr><td>&nbsp;</td></tr>")
                Response.Write("</table>" & Chr(13))
                Response.Write("</td>" & Chr(13))
                Response.Write("</tr>" & Chr(13))
                Response.Write("</table>" & Chr(13))
                Response.Write("</div>" & Chr(13))
            Next
           
            Response.Write("<script type='text/javascript'>" & Chr(13))
            Response.Write("//<![CDATA[" & Chr(13))
            Dim button1 As HyperLink
            For a = 0 To GridView1.Rows.Count - 1
                row = GridView1.Rows(a)
                button1 = row.FindControl("HyperLink1")
                Response.Write("new Popup('panel" & a + 2 & "','" & button1.ClientID & "',{modal:true})" & Chr(13))
                Response.Write("new Popup('tooltip','" & button1.ClientID & "')" & Chr(13))
            Next
            Response.Write("//]]>" & Chr(13))
            Response.Write("</script>" & Chr(13))
        End If
    %>

Ejemplo finalizado

ToolTip al pasar el puntero por la imagen.

Ventana modal. Bloqueando el contenido detras de ella.

Para activarla, dar click en la imagen

Ventana modal en movimiento.

Para mover, click en la barra y arrastrar

Ejecutar y aplicar para lo que se necesite.

[Meta]

Un tutorial muy bueno.

Cuando lo saquen el 2010 lo actualizas.

Una pregunta.

Tengo intención de comunicarme con el puerto serie. ¿Con Web Developer Express 2008 se puede hacer?

Es decir, tengo una Web hecha, de alguna manera me entran en mi ordenador por vía Web o Internet, y ya puedo manejar el puerto serie.

[youtube=425,350]http://www.youtube.com/watch?v=8koidQrv4Kg[/youtube]

Saludo.

[Megan]

Muchas gracias señor Hadess_inf por este tutorial y por ser generoso de poner a nuestro alcance esto, yo estoy aprendiendo .NET poco a poco (desde cero jaja), una pregunta quizas tonta, si yo hago una base de datos que en mi pc funciona, ahora suponiendo que le haga para un cliente, que debo de instalarle en su pc?, si es una pagina web con base de datos que debo de instalarle en su pc?, soy nueva-cero, y se que esta  pregunta es para avanzados, pero quisiera saber si no es mucha molestia. Muchas Gracias