ValidatorCalloutExtender Doesn't Show for RadDatePicker

[Sam]

Hello

I am validating a RadDatePicker control using a RequiredFieldValidator and a ValidatorCalloutExtender.

The control is being validated successfully but the ValidatorCalloutExtender is not showing/popping up when the input date is invalid/empty. It also doesn't highlight the RadDateTime input box yellow when its empty/invalid.

Any ideas why this would be failing to display when other widgets (regular TextBoxes, etc.) have their ValidatorCalloutExtender's working?

<telerik:RadDatePicker ID="Expiry" runat="server" ClientIDMode="Static"> ... </telerik:RadDatePicker>
<asp:RequiredFieldValidator ID="rfvExpiry" runat="server" ErrorMessage="Expiry is a required field" SetFocusOnError="true"
    ControlToValidate="Expiry" Text="*"  ClientIDMode="Static" />
<ajaxtoolkit:ValidatorCalloutExtender ID="vcerfvExpiry" runat="Server" TargetControlID="rfvExpiry" Width="350px" HighlightCssClass="highlight"
    WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />

[Maria Ilieva]

Hi Sam,

I tested the described scenario on my end and it appears to work correctly. Find attached my tests applictaion and verify what the difference in your case is.


Regards,
Maria Ilieva
Telerik

[Sam]

Hi Maria

 Thanks for your response. Below is a simple example that demonstrates the error. There are multiple RadDatePickers (RDP). The first RDP's Callout Extender works fine but if I fill in the top/first picker then click 'Next' in the wizard the ValidatorCalloutExtender for the others does not appear (sometimes the 4th one will). In this case the second ValidatorCalloutExtender should show but it doesn't.

If I put the focus in the second picker then click 'Next' sometimes the ValidatorCalloutExtender will show.

 Any ideas how to fix this?

 

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Debug.aspx.vb" Inherits="D_Debug" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" Assembly="AjaxControlToolkit" %>

<asp:Content ID="Content2" ContentPlaceHolderID="cphBody" runat="Server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"> </telerik:RadAjaxManager>

    <div id="checkApp">

        <telerik:RadTabStrip ID="rtsReports" runat="server" Skin="Outlook" MultiPageID="rnpReports" SelectedIndex="3">
            <Tabs>
                <telerik:RadTab Text="Start" SelectedCssClass="SelectedTab" />
                <telerik:RadTab Text="Middle" Enabled="false" SelectedCssClass="SelectedTab" />
                <telerik:RadTab Text="Finish" Enabled="false" SelectedCssClass="SelectedTab" />
            </Tabs>
        </telerik:RadTabStrip>

        <div id="body">
            <asp:Wizard ID="wzdRegister" runat="server" DisplaySideBar="False" FinishCompleteButtonText="Submit" ActiveStepIndex="0">

                <WizardSteps>
                    <asp:WizardStep ID="wzsIdentification" runat="server" Title="Identification">

                        <telerik:RadDatePicker ID="Expiry" runat="server" ClientIDMode="Static"></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="rfvExpiry" runat="server" ErrorMessage="Expiry is a required field" SetFocusOnError="true"
                            ControlToValidate="Expiry" Text="*"  ClientIDMode="Static" />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="vcerfvExpiry" runat="Server" TargetControlID="rfvExpiry" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" ClientIDMode="Static"></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Expiry is a required field" SetFocusOnError="true"
                            ControlToValidate="RadDatePicker1" Text="*"  ClientIDMode="Static" />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="Server" TargetControlID="RequiredFieldValidator1" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" ClientIDMode="Static"></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Expiry is a required field" SetFocusOnError="true"
                            ControlToValidate="RadDatePicker2" Text="*"  ClientIDMode="Static" />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="Server" TargetControlID="RequiredFieldValidator2" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker3" runat="server" ClientIDMode="Static"></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Expiry is a required field" SetFocusOnError="true"
                            ControlToValidate="RadDatePicker3" Text="*"  ClientIDMode="Static" />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="Server" TargetControlID="RequiredFieldValidator3" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />
                    </asp:WizardStep>

                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Identification">
                        Step 2
                    </asp:WizardStep>

                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Identification">
                        Final Step
                    </asp:WizardStep>

                </WizardSteps>

                <StartNavigationTemplate>
                    <input type="button" id="btnAccept" class="hidden" title="Accept" value="Accept" onclick="return false;" class="btn" />
                    <asp:Button ID="btnNext" runat="server" CommandName="MoveNext" Text="Next" class=" btnNext" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Visible="false" class="btn" CausesValidation="false" />
                    <asp:Button ID="btnSave" runat="server" Text="Submit" OnClick="btnSave_Click" Visible="false" class="btn" />
                </StartNavigationTemplate>

                <StepNavigationTemplate>
                    <asp:Button ID="btnPrevious" runat="server" CommandName="MovePrevious" Text="Previous" CausesValidation="false" class="btn" />
                    <asp:Button ID="btnNext" runat="server" CommandName="MoveNext" Text="Next" class="btn" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Visible="false" class="btn" CausesValidation="false" />
                    <asp:Button ID="btnSave" runat="server" Text="Submit" OnClick="btnSave_Click" Visible="false" class="btn" />
                </StepNavigationTemplate>

                <FinishNavigationTemplate>
                    <asp:Button ID="btnSubmit" runat="server" CommandName="MoveComplete" Text="Submit" class="btnNext" />
                </FinishNavigationTemplate>
            </asp:Wizard>

        </div>
    </div>
</asp:Content>

[Maria Ilieva]

Hi,

Please remove the ClienIDMode that is set to Static from the controls on the page and see how it goes.

Regards,
Maria Ilieva
Telerik

[Sam]

Hi Maria,

I tried this but it doesn't work - see code below. Have you been able to replicate the error aswell? Its a funny thing where the 2nd, 3rd and 4th ValidatorCalloutExtender's dont show.

 

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Debug.aspx.vb" Inherits="D_Debug" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" Assembly="AjaxControlToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cphBody" runat="Server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1"> </telerik:RadAjaxManager>

    <div id="checkApp">

        <telerik:RadTabStrip ID="rtsReports" runat="server" Skin="Outlook" MultiPageID="rnpReports" SelectedIndex="3">
            <Tabs>
                <telerik:RadTab Text="Start" SelectedCssClass="SelectedTab" />
                <telerik:RadTab Text="Middle" Enabled="false" SelectedCssClass="SelectedTab" />
                <telerik:RadTab Text="Finish" Enabled="false" SelectedCssClass="SelectedTab" />
            </Tabs>
        </telerik:RadTabStrip>

        <div id="body">
            <asp:Wizard ID="wzdRegister" runat="server" DisplaySideBar="False" FinishCompleteButtonText="Submit" ActiveStepIndex="0">

                <WizardSteps>
                    <asp:WizardStep ID="wzsIdentification" runat="server" Title="Identification">

                        <telerik:RadDatePicker ID="Expiry" runat="server" ></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="rfvExpiry" runat="server" ErrorMessage="Expiry is a required field"
                            ControlToValidate="Expiry" Text="*"   />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="vcerfvExpiry" runat="Server" TargetControlID="rfvExpiry" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" ></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Expiry is a required field"
                            ControlToValidate="RadDatePicker1" Text="*"   />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="Server" TargetControlID="RequiredFieldValidator1" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker2" runat="server" ></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Expiry is a required field"
                            ControlToValidate="RadDatePicker2" Text="*"   />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="Server" TargetControlID="RequiredFieldValidator2" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />

                        <telerik:RadDatePicker ID="RadDatePicker3" runat="server" ></telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Expiry is a required field"
                            ControlToValidate="RadDatePicker3" Text="*"   />
                        <ajaxtoolkit:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="Server" TargetControlID="RequiredFieldValidator3" Width="350px" HighlightCssClass="highlight"
                            WarningIconImageUrl="warning.gif" CloseImageUrl="close.gif" />
                        <br />
                    </asp:WizardStep>

                    <asp:WizardStep ID="WizardStep1" runat="server" Title="Identification">
                        Step 2
                    </asp:WizardStep>

                    <asp:WizardStep ID="WizardStep2" runat="server" Title="Identification">
                        Final Step
                    </asp:WizardStep>

                </WizardSteps>

                <StartNavigationTemplate>
                    <input type="button" id="btnAccept" class="hidden" title="Accept" value="Accept" onclick="return false;" class="btn" />
                    <asp:Button ID="btnNext" runat="server" CommandName="MoveNext" Text="Next" class=" btnNext" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Visible="false" class="btn" CausesValidation="false" />
                    <asp:Button ID="btnSave" runat="server" Text="Submit" OnClick="btnSave_Click" Visible="false" class="btn" />
                </StartNavigationTemplate>

                <StepNavigationTemplate>
                    <asp:Button ID="btnPrevious" runat="server" CommandName="MovePrevious" Text="Previous" CausesValidation="false" class="btn" />
                    <asp:Button ID="btnNext" runat="server" CommandName="MoveNext" Text="Next" class="btn" />
                    <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click" Visible="false" class="btn" CausesValidation="false" />
                    <asp:Button ID="btnSave" runat="server" Text="Submit" OnClick="btnSave_Click" Visible="false" class="btn" />
                </StepNavigationTemplate>

                <FinishNavigationTemplate>
                    <asp:Button ID="btnSubmit" runat="server" CommandName="MoveComplete" Text="Submit" class="btnNext" />
                </FinishNavigationTemplate>
            </asp:Wizard>

        </div>
    </div>
</asp:Content>

[Maria Ilieva]

Hi,

I tested the code on my end and actually showing the extended message on the first picker only when next button is clicked is the expected behavior. You can see that after selecting a date for it the extender appears for the second one and the same is done for all pickers one by one till they become valid.

Do let me know if you are expecting different behavior.

Regards,
Maria Ilieva
Telerik