Calendar popup is not hiding on tab off

6 posts, 1 answers
  1. Atul Srivastav
    Atul Srivastav avatar
    65 posts
    Member since:
    Jun 2007

    Posted 12 May 2009 Link to this post

    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

  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 May 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom Robertson
    Tom Robertson avatar
    4 posts
    Member since:
    Apr 2010

    Posted 02 Aug 2010 Link to this post

    The  <DateInput onkeydown

    event no longer exists, can you update this example to show how to do this with the latest release?
  5. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 03 Aug 2010 Link to this post

    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
  6. Tom Robertson
    Tom Robertson avatar
    4 posts
    Member since:
    Apr 2010

    Posted 03 Aug 2010 Link to this post

    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
  7. Tom Robertson
    Tom Robertson avatar
    4 posts
    Member since:
    Apr 2010

    Posted 03 Aug 2010 Link to this post

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

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017