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
