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

Rad date picker calender pop problem

10 Answers 291 Views

Input

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

10 Answers, 1 is accepted

answered on 04 Nov 2009, 12:40 PM

Hi Harry,

Customizing the popup can be done by setting the popup direction explicitly from client side code in PopUpAbove event handler. You need to register the PopupAbove() event with DatePopupButton’s click attribute in order to get it execute on clicking the DatePopup button. Try the following code snippets.

CS:

    
             protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    RadDatePicker2.DatePopupButton.Attributes.Add("onclick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;");  
        
                }

ASPX:

    
                <telerik:RadDatePicker ID="RadDatePicker2" runat="server"> 
        
                </telerik:RadDatePicker>

JavaScript:

    
            <script type="text/javascript"> 
        
                function PopupAbove(e, pickerID) { 
        
                    var datePicker; 
        
                    if (pickerID == null) { 
        
                        datePicker = $find("<%= RadDatePicker2.ClientID %>"); 
        
                    } 
        
                    else { 
        
                        datePicker = $find(pickerID); 
        
                    }        datePicker.set_popupDirection(Telerik.Web.RadDatePickerPopupDirection.TopRight); // Set the popup direction to TopRight 
        
                    datePicker.showPopup(); 
        
                    datePicker.set_popupDirection(Telerik.Web.RadDatePickerPopupDirection.BottomRight); // Set the popup direction back to default (BottomRight) 
        
                } 
        
            </script>

-Shinu.

answered on 05 Nov 2009, 06:03 AM

popup-problem.JPG

sorry shinu sir...i use ur code but it shows error Telerik.Web.RadDatePickerOpenPopUp.TopRight is null not an object.......plz tell me solution of this error or any way to open date picker pop up on top side?????????

answered on 05 Nov 2009, 07:22 AM

Hello Harry,

I guess you are not using the latest version of RadControls. I tried the code and it is working fine on my end with the latest version (2009.02.0826.35).

Give a try with the following code and see whether it helps in achieving the functionality?
JavaScript:

    
            <script type="text/javascript"> 
        
            function PopupAbove(e, pickerID)  
        
            {  
        
                var datePicker;  
        
                if (pickerID == null)  
        
                {  
        
                    datePicker = $find("<%= RadDatePicker1.ClientID %>");  
        
                }  
        
                else  
        
                {  
        
                    datePicker = $find(pickerID); 
        
                } 
        
                var textBox = datePicker.get_textBox();  
        
                var popupElement = datePicker.get_popupContainer();      
        
                var dimensions = datePicker.getElementDimensions(popupElement);  
        
                var position = datePicker.getElementPosition(textBox);      
        
                datePicker.showPopup(position.x, position.y - dimensions.height);   
        
            }  
        
            </script>

Could you provide the version of RadControls that you are using if this does not help?

-Shinu.

answered on 09 Nov 2009, 08:33 AM

Hello Harry,

Well, you have to calculate the size of the page (e.g. with $telerik.getViewPortSize() ), then the position of the picker's textbox on the page (e.g. use $telerik.getLocation() ) and then set the correct popup coordinates manually.

I recommend you to simply upgrade to the latest RadControls version and you will get the functionality out-of-the-box.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.