ValidatorCalloutExtender: Como posicionar/desplegar a la izquierda

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

image

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

image

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

image

Al validar…

image

 

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 &lt;strong>NOMBRE</strong> es requerido. Verifique" 
                               ControlToValidate="txtNombre" CssClass="itemError">&nbsp;&nbsp;&nbsp;&nbsp;</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 &lt;strong>EMAIL</strong> es requerido. Verifique" 
                       ControlToValidate="txtEmail" CssClass="itemError">&nbsp;&nbsp;&nbsp;&nbsp;</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

image

y cuando descomprimo el archivo CalloutPosition.zip, aparecen los tres archivos que necesitamos cargar al proyecto

image

Donde iria?.. si no queremos pensar mucho va aqui

     AjaxControlToolkitAjaxControlToolkitValidatorCallout

image

El único archivo que tenemos que agregar al proyecto es CalloutPosition.cs, lo otros lo sobreescribimos.

Abrimos la solucion

image

image

image

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

image

y el resultado

image

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

 image

 

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

7 comentarios sobre “ValidatorCalloutExtender: Como posicionar/desplegar a la izquierda”

  1. 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)

  2. 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…

  3. 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»

Deja un comentario

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