Cuando uno mas quiere utilizar un elemento en programación seguro que le falta la propiedad que desea…esto podría ser tranquilamente una Ley de Murphy, como en este caso donde por razones de UI: el control se escondía mas allá de límite de la página
Y cuando me dispongo a buscar una propiedad para posicionar o visualizar a la izquierda (tipo el control HoverMenu que tiene una propiedad PopupPosition="Left") no la tiene, pero lo bueno que es código abierto así que podemos "poner nuestras manos en el asunto"
Como utilizar el control ValidatorCalloutExtender
Cuando insertamos el control ValidatorCalloutExtender
Tenemos la posibilidad de "extender" los controles de validación, dando a estos un mecanismo de UI mas "sensible al usuario"
Ejemplo:
Si tenemos un formulario con controles de validación
Al validar…
El código que nos define (la parte del los controles)
<tr> <td style="width: 56px"> Nombre:</td> <td style="width: 296px"> <asp:TextBox ID="txtNombre" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvNombre" runat="server" Display="Dynamic" ErrorMessage="El campo <strong>NOMBRE</strong> es requerido. Verifique" ControlToValidate="txtNombre" CssClass="itemError"> </asp:RequiredFieldValidator> <cc1:ValidatorCalloutExtender ID="vceNombre" runat="server" TargetControlID="rfvNombre" Width="200px" HighlightCssClass="highlight" WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" > </cc1:ValidatorCalloutExtender> </td> </tr> <tr> <td style="width: 56px; height: 24px;"> Email:</td> <td style="width: 296px; height: 24px;"> <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="Dynamic" ErrorMessage="El campo <strong>EMAIL</strong> es requerido. Verifique" ControlToValidate="txtEmail" CssClass="itemError"> </asp:RequiredFieldValidator> <cc1:ValidatorCalloutExtender ID="vceEmail" runat="server" TargetControlID="rfvEmail" Width="200px" HighlightCssClass="highlight" WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" > </cc1:ValidatorCalloutExtender> </td> </tr>
Este mismo ejemplo o similar lo podemos encontrar en aquí en la Demo de ValidatorCalloutExtender
¿Como desplegar a la izquierda el Validator Callout?
Como comente no existe tal propiedad, pero como no fui el único que la solicito existe un "fix" entre los varios Issues que lo podemos ver en el Issue Tracker de AjaxControlToolkit
– ValidatorCallout positioning problem
Para eso hay que descargarse un fix (CalloutPosition.zip) y agregarlo al proyecto y compilarlo de nuevamente
Si descargamos los archivos del codigo fuente tenemos una estructura de directorio asi
y cuando descomprimo el archivo CalloutPosition.zip, aparecen los tres archivos que necesitamos cargar al proyecto
Donde iria?.. si no queremos pensar mucho va aqui
AjaxControlToolkitAjaxControlToolkitValidatorCallout
El único archivo que tenemos que agregar al proyecto es CalloutPosition.cs, lo otros lo sobreescribimos.
Abrimos la solucion
La compilamos… y si tenemos la referencia en el VS2005 en la barra de herramientas a una ubicación que se actualiza con dicha compilación no tendríamos que hacer nada.
Sino tenemos que quitar la referencia al componente antiguo y agregar el nuevo.
y Ahora si!
Tenemos la propiedad CalloutPosition, y lo posicionamos a la izquierda
y el resultado
En este ejemplo no es el perfecto, ya que no se visualiza el label "Nombre" pero en el proyecto teníamos fondos ya predefinidos donde el nombre del label era una imagen arriba del control
Listo para utilizar
Aquí tiene ya el componente listo para utilizar (sin descargar nada mas, sin compilar)
- AjaxControlToolkit ConCalloutPosition
http://geeks.ms/files/folders/fernandezja/entry69631.aspx
mm creo que por un tema de usabilidad, es preferible los mensajes a la derecha.
saludos.
Hola Jose
Creeme que en mi caso era conveniente a la izquierda.
(actualice la ultima imagen del post para que mires el por que)
No me acepta el metodo… tengo vb 2008 🙁
pkeeeeeeeee!!!
Hola @Luis
Si lees atentamente el post dice que no existe el metodo CalloutPosition «de fabrica»
Para ello tienes que descargarte el fix y compilarlo nuevamente en el proyecto de AjaxControlToolkit
(PD: Tendriamos que ver si en la nueva version para vs2008 este metodo ya lo insertaron)
Hola, Jose, la ultima version del AjaxToolkit ya incluye la posicion con muchas opciones, sin embargo esta genera un efecto extraño:
Cuando el textbox esta dentro de un frame con un scroll, tal como el de la imagen inicial que presentas; si se baja el scroll cuando sale el popup del ValidatorCallOut aparece arriba (no junto al componente validado) como si la posicion que tomara fuera absoluta….
Por desgracia aun no busco como solventarlo…
Hola, donde puedo descargar el zip ya que sigo utilizando la version para asp.net y ya no esta disponible.
Saludos
Hola @Jose Robert al final del articulo dice «Listo para utilizar» alli esta el .zip (avisame si no puedes)
como comenta Erik desde la ultima version de Ajax control Toolkit ya viene con este «metodo»