This is a migrated thread and some comments may be shown as answers.

ValidatorCalloutExtender Doesn't Show for RadDatePicker

5 Answers 36 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Sam
Top achievements
Rank 1
Sam asked on 29 Oct 2015, 02:27 AM

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" />

5 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 30 Oct 2015, 12:55 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sam
Top achievements
Rank 1
answered on 01 Nov 2015, 11:43 PM

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>

0
Maria Ilieva
Telerik team
answered on 02 Nov 2015, 01:22 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sam
Top achievements
Rank 1
answered on 03 Nov 2015, 12:27 AM

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>

0
Maria Ilieva
Telerik team
answered on 03 Nov 2015, 12:22 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
DatePicker
Asked by
Sam
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Sam
Top achievements
Rank 1
Share this question
or