RadTimePicker show above control

5 posts, 1 answers
  1. Steve Todd
    Steve Todd avatar
    31 posts
    Member since:
    Dec 2005

    Posted 15 Jun 2009 Link to this post

    Hi Guys

    I've been searching for a way to show the RadTimePicker popup above the control. There are examples using the datetime picker but nothing with just the radTimePicker. Is this possible?

    If I have to resort to usign the datetimepicker then looking at the examle here http://www.telerik.com/help/aspnet-ajax/calendar_howtodisplayingthepopupabovetheinputarea.html how could I adapt this to take in a parameter of the control as the javascript seems to only search for one control named RadDateTimePicker1, I have 14 timepickers linked to shared timeviews so I owuld rather not adopt the datetimepicker solution if possible.

    Regards

    Steve
  2. Veli
    Admin
    Veli avatar
    2002 posts

    Posted 16 Jun 2009 Link to this post

    Hello Steve,

    Displaying the popup control above the input in all related RadCalendar controls is currently implemented in the beta release of RadControls for ASP.NET AJAX Q2.2009, the official release coming soon (approx. beginning of June). You can test a demo here. The related property is called PopupDirection.

    Additionally, here is a workaround solution to implement the displacement of the popup for RadDateTimePicker. The provided javascript needs to be attached to the OnPopupOpening client-side event of RadDatePicker, RadTimePicker or RadDateTimePicker. The script works for all of the three controls:

    <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server"
        <ClientEvents OnPopupOpening="showPopUpAbove" /> 
    </telerik:RadDateTimePicker> 
     
    <telerik:RadDatePicker ID="RadDatePicker1" runat="Server"
        <ClientEvents OnPopupOpening="showPopUpAbove" /> 
    </telerik:RadDatePicker> 
     
    <telerik:RadTimePicker ID="RadTimePicker1" runat="Server"
        <ClientEvents OnPopupOpening="showPopUpAbove" /> 
    </telerik:RadTimePicker> 

    Here is the javascript:

    var flag = 0; 
     
    function showPopUpAbove(sender, args) 
    {    
        if(flag == 0) 
        { 
            flag = 1; 
             
            args.set_cancel(true); 
             
            var picker = sender; 
            var textBox = picker.get_textBox(); 
             
            var popupElement = null
             
            if(picker.get_popupContainer()) 
            { 
                popupElement = picker.get_popupContainer(); 
            } 
            else 
            { 
                popupElement = picker.get_timePopupContainer(); 
            } 
             
            var dimensions = picker.getElementDimensions(popupElement); 
            var position = picker.getElementPosition(textBox); 
             
            if(args.get_popupControl().DivElement) 
            { 
                picker.showTimePopup(position.x, position.y - dimensions.height); 
            } 
            else 
            { 
                picker.showPopup(position.x, position.y - dimensions.height); 
            } 
        } 
        else 
        { 
            flag = 0; 
        } 

    Note, that we do not use any client IDs, making this script suitable for any number of pickers on the page.

    Greetings,
    Veli
    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. Steve Todd
    Steve Todd avatar
    31 posts
    Member since:
    Dec 2005

    Posted 16 Jun 2009 Link to this post

    Hi 

    Thanks for the reply but execution stops on some javascript which is invoking Ajax. I am using an ascx user control if that makes a difference.

    //----------------------------------------------------------  
    // Copyright (C) Microsoft Corporation. All rights reserved.  
    //----------------------------------------------------------  
    // MicrosoftAjax.js  
    Function.__typeName="Function";Function.__class=true;Function. 

    It actually stops on command a(this,Sys.EventArgs.Empty) within the piece of code with the error showPopUpAbove is undefined. I've tried the script in the page, rad control bloack and in the master page button still hit the same problem.

    add_init:function(a){if(this._initialized)a(this,Sys.EventArgs.Empty);else this.get_events(). 
  4. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 18 Jun 2009 Link to this post

    Hi Steve Todd,

    If your user control is ajaxified, you need to place your javascript in the user control inside a RadScriptBlock control for proper reference. I believe this is an issue with the javascript in the user control not being able to load properly on the page

    Best wishes,
    Veli
    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.
  5. Steve Todd
    Steve Todd avatar
    31 posts
    Member since:
    Dec 2005

    Posted 18 Jun 2009 Link to this post

    Perfect thanks a lot for your help.

    Steve
Back to Top