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

Calendar popup is not hiding on tab off

5 Answers 355 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Atul Srivastav
Top achievements
Rank 1
Atul Srivastav asked on 12 May 2009, 10:41 AM

Hi

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 onfocus="_txtClaimantDOI_OnFocus()"  OnBlur="_txtClaimantDOI_OnBlur()"  >

</DateInput>

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

    UseColumnHeadersAsSelectors="False" 

    UseRowHeadersAsSelectors="False" TabIndex="0">

</Calendar>

<ClientEvents OnDateSelected="DateSelected" />

<DatePopupButton Visible="true" Style="display: none;" TabIndex="0" />

</telerik:RadDatePicker>

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

<script language="javascript" type="text/javascript">

//<![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

Sort by
0
Accepted
Dimo
Telerik team
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.
0
Tom Robertson
Top achievements
Rank 1
answered on 02 Aug 2010, 11:00 PM
The  <DateInput onkeydown

event no longer exists, can you update this example to show how to do this with the latest release?
0
Pavel
Telerik team
answered on 03 Aug 2010, 09:33 AM
Hi Tom,

The example seems to work as expected with the latest release. Could you elaborate what is the problem on your end?

Greetings,
Pavel
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
Tom Robertson
Top achievements
Rank 1
answered on 03 Aug 2010, 04:14 PM
My fault, for some reason IntelliSense isn't showing that event in VS 2010, but it does appear to work fine, thanks for the reply
0
Tom Robertson
Top achievements
Rank 1
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" />

Tags
Calendar
Asked by
Atul Srivastav
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tom Robertson
Top achievements
Rank 1
Pavel
Telerik team
Share this question
or