Mensajes

Puede buscar informacion sobre la funcion SUBSTRING, podras extraer una cadena de otra, es todo lo que necesitas. saludos.

Es algo muy sencillo, recuerda que el diseño lo pones tu, una vez hecho eso lo demas es sencillo, aunque no entiendo muy bien que es lo que deseas hacer, podras recorrer las posiciones de la cadena con la funcion (SUBSTRING), Saludos.

Seria bueno que nos mostraras un ejemplo para enterder bien, cual es tu problema.

Que es lo que necesitas saber ¿?
Porque sobre esos controles si hay informacion en Google.

Que es lo que deseas hacer especificamente.

png ¿?

No entiendo la pregunta. Lo que quieres hacer es igualar 2 menus ¿?
Te refieres a igualar sus elementos ¿?

[ToolTips Personalizados y Ventanas Pop up estilo Modal]

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.

Una Base de Datos ¿?
un archivo txt ¿?

[Uso de TemplateField]

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.