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

Calendar popup is not hiding on tab off

5 Answers 409 Views

Calendar

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

Atul Srivastav asked on 12 May 2009, 10:41 AM

I am using this code to display a RAD Date Picker (I am using Rad Ajax Control for ASP .Net Version Q3 2008) . My requirement is on Tab off(lost focus) calendar popup should be hide. This is working while I added “OnBlur” event on “DateInput” control. But now it is creating a new problem. It is not showing new selected date in DatePicker control. For example if DatePicker already have “09/09/2008” as date value and now I have selected “09/08/2008” as new date, This new selected date is not coming in DatePicker control (If I commented ctl.hidePopup() statement from _txtClaimantDOI_OnBlur() Then I am able to see new selected date in date picker control).

<telerik:RadDatePicker ID="txtClaimantDOI" runat="server" Skin="Office2007" EnableEmbeddedSkins="false" Width="70px">

</DateInput>

<Calendar DayNameFormat="FirstLetter" FirstDayOfWeek="Default" EnableMultiSelect="false"

UseColumnHeadersAsSelectors="False"

UseRowHeadersAsSelectors="False" TabIndex="0">

</Calendar>

</telerik:RadDatePicker>

<telerik:RadScriptBlock ID="txtClaimantDOIScriptBlock" runat="server">

//<![CDATA[

function _txtClaimantDOI_OnFocus() {

var ctl = $find("<%= txtClaimantDOI.ClientID %>");

ctl.showPopup();

}

function _txtClaimantDOI_OnBlur() {

var ctl = $find("<%= txtClaimantDOI.ClientID %>");

ctl.hidePopup();

}

//]]>

</script>

</telerik:RadScriptBlock>

Please help me in this.

Regards
Atul Kumar Srivastav

5 Answers, 1 is accepted

Accepted

answered on 12 May 2009, 11:32 AM

Hi Atul,

The problem in your case is caused by the fact that the DateInput Blur event is fired also when you click on a date in the popup calendar. In this case the popup should not be hidden by custom Javascript - the control will take care of this.

Since it will be relatively hard to distinguish what user action has caused the Blur event to be fired, I suggest you another approach - close the calendar popup when the TAB key is pressed. Actually, in all other cases (selecting a date, clicking somewhere else on the page) the control will close the popup automatically.

    
            <%@ Page Language="C#" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadDatePicker ID="txtClaimantDOI"  runat="server" Skin="Office2007"> 
        
                <DateInput onkeydown="_txtClaimantDOI_OnKeyDown(event)"> 
        
                    <ClientEvents OnFocus="_txtClaimantDOI_OnFocus" /> 
        
                </DateInput> 
        
            </telerik:RadDatePicker> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
            <script language="javascript" type="text/javascript"> 
        
            //<![CDATA[
        
            function _txtClaimantDOI_OnFocus(sender, args)
        
            {
        
                sender.get_owner().showPopup();
        
            }
        
            function _txtClaimantDOI_OnKeyDown(e)
        
            {
        
                if (e.keyCode == 9)
        
                {
        
                    $find("<%= txtClaimantDOI.ClientID %>").hidePopup();
        
                }
        
            }
        
            //]]> 
        
            </script> 
        
            </telerik:RadCodeBlock> 
        
            </form> 
        
            </body> 
        
            </html>

Regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 03 Aug 2010, 11:12 PM

For anyone interested I came up with a cleaner way to do this using jquery, especially if you have lots of calendar controls on a page, all you need to do is set the cssClass on each calendar control and this will work for all of them.

<script>

$(document).ready(function () {

$('.calendar input').keydown(function (event) {

if (event.keyCode == 9) {

var inputID = $(this).context.id;

var id = inputID.substring(0, inputID.length - 15); //strip the "_dateInput_text" from the end to get the id of the telerik calendar object

$find(id).hidePopup();

}

});

</script>

<tel:RadDatePicker ID="txtBirthDate" CssClass="calendar" runat="server" />