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

RadTimePicker show above control

4 Answers 89 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Steve Todd
Top achievements
Rank 1
Steve Todd asked on 15 Jun 2009, 02:00 PM
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

4 Answers, 1 is accepted

Sort by
0
Veli
Telerik team
answered on 16 Jun 2009, 03:12 PM
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.
0
Steve Todd
Top achievements
Rank 1
answered on 16 Jun 2009, 05:29 PM
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(). 
0
Accepted
Veli
Telerik team
answered on 18 Jun 2009, 01:18 PM
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.
0
Steve Todd
Top achievements
Rank 1
answered on 18 Jun 2009, 03:22 PM
Perfect thanks a lot for your help.

Steve
Tags
Calendar
Asked by
Steve Todd
Top achievements
Rank 1
Answers by
Veli
Telerik team
Steve Todd
Top achievements
Rank 1
Share this question
or