Validator Callout doesn't work for Telerik Inputs

[Travis]

I'm currently using Telerik v2008.2.723.35. My problem is the Ajax Tookit control 'Validator Callout' won't do an onfocus fire for any of the Telerik input controls.  My shop is looking into updating our subscription to Telerik so that we can get a fix to this issue.  However, when I researched this issue I only found an update listed for the Calander controls. Can I be assured that if we update our subscription, this problem will be resolved for all Telerik input conrols?

[Pavel]

Hello Travis,

You are right that currently our RadInput controls do not work with the ValidatorCalloutExtender from the Ajax Toolkit. I will inform our developers about this issue and they will hopefully fix it soon. Your Telerik points are updated for bringing this problem to our attention.

As another solution I can suggest you to use our RadInputManager. I have prepared a small sample to illustrate the functionality. You can modify it so that it meets your requirements and ensure everything is working properly. You can also read the following help article for more details about the RadInputManager.

I hope this helps.

Kind regards,
Pavel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Travis]

Thanks for the response.  Can you give me an idea for ETA on the fix for this issue?  It would help my shop's decision on what direction to take.

[Dimo]

Hi Travis,

I am glad to inform you that the issue with the callout extender popup not moving to the focused RadTextBox has been just fixed and changes will take effect in our next release, which would be Q3 2008 SP2. We still haven't scheduled a date for it, but it would be in about a month.

In the meantime, you can use the following workaround:


ASPX

<telerik:RadTextBox runat="server" ID="NameTextBox">
    <ClientEvents OnFocus="FireFocusEvent" />
</telerik:RadTextBox>


Javascript

function FireFocusEvent(sender, args)
{
    var eventName = "focus";
    var eventSource = sender._hiddenElement;

    if(!eventName || eventName == "" || !eventSource)
        return;
       
    if (eventSource.fireEvent && document.createEventObject)
    {
        var eventObject = document.createEventObject();           
        eventSource.fireEvent(String.format("on{0}", eventName), eventObject);
    }
    else if (eventSource.dispatchEvent)
    {
        var canBubble = true;
        var eventObject = document.createEvent("HTMLEvents");
        eventObject.initEvent(eventName, canBubble, true);
        eventSource.dispatchEvent(eventObject);
    }
}



Sincerely yours,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Travis]

Sorry, this is probably a dumb question.  I can't figure out how to implement the script you gave me as a work around.  The following lists a bit of the code I'm currently working with.  I made sure that the function is getting hit (I placed an alert popup in the function), but the bubble is still not displaying onfocus.  Is there something I'm missing?

<telerik:RadNumericTextBox ID="rntProceeds" Type="Currency" runat="server" EnabledStyle-HorizontalAlign="Right"
    Font-Size="Small" MaxLength="13" Width="150px" MinValue="0" FocusedStyle-PaddingRight="1px"
    NumberFormat-AllowRounding="false" DecimalDigits="2">
    <ClientEvents OnFocus="FireFocusEvent" />
</telerik:RadNumericTextBox>
<asp:RequiredFieldValidator ID="rfvProceeds" runat="server" ErrorMessage="Proceeds must have a valid value to calculate"
    ControlToValidate="rntProceeds" Display="None">
</asp:RequiredFieldValidator>
<ajaxToolkit:ValidatorCalloutExtender runat="Server" ID="rfvProceedsE" TargetControlID="rfvProceeds"
    Width="350px" />

   function FireFocusEvent(sender, args) {
    //alert(["This Worked"]);
    var eventName = "focus";
    var eventSource = sender._hiddenElement;

    if (!eventName || eventName == "" || !eventSource)
        return

    if (eventSource.fireEvent && document.createEventObject) {
        var eventObject = document.createEventObject();
        eventSource.fireEvent(String.format("on{0}", eventName), eventObject);
    }
    else if (eventSource.dispatchEvent) {
        var canBubble = true;
        var eventObject = document.createEvent("HTMLEvents");
        eventObject.initEvent(eventName, canBubble, true);
        eventSource.dispatchEvent(eventObject);
    }
}

[Dimo]

Hello Travis,

The Javascript code should be wrapped in a <script type="text/javascript"> tag. Please find attached a working example.

Kind regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Travis]

Sorry, there are several other functions within my javascript so I just pulled out that particular function.  I'm aware that I need to encase my script in script tags.  So that is not the issue.  Any other suggestions?

[Travis]

I should mention.  I did get your script to work with regular RadTextBoxes.  It was when I tried to use it with my RadNumericTextBoxes that it didn't work.

[Dimo]

Hi Travis,

Did you review the attached sample page? It can give you some clues what is the problem, if you compare it with your project.

I am afraid I can't think of another reason why the focus event is not fired. If the problem persists, please send us a complete sample web page, so that we can investigate locally. Thanks.

Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Travis]

I've looked thru your code example.  I can't see anything that I'm missing.  I'm guessing that in your example, if you changed those RadTextBoxes to RadNumericTextBoxes, it wouldn't work for you either.

[Dimo]

Hello Travis,

You are right. Please change the previously provided Javascript as follows:

old

var eventSource = sender._hiddenElement;

new

var eventSource = $get(sender._clientID);


All the best,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Travis]

That worked.  Thanks!