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

RadDatePicker - FastNavigationPopup position static when popupCalender over

1 Answer 94 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
guillaume.lebel
Top achievements
Rank 1
Iron
Iron
guillaume.lebel asked on 03 Feb 2009, 06:49 PM

Hi, I've tried to set a static position on my fastnavigationpopu when we click on title of the calendar inside the RadDatePicker and i also add an other function to show the calendar over the dateInput when there's not enough space on bottom of the screen. But the thing is that when the calendar is showing over the dateInput the fastnavigationpopup show where he should be when the calendar is under the dateInput.

Is there anyway to set the position on click of the calendarTitle? or simply get the fastnavigationpopup

Here,s the javascript i used to implement both function:

FastNavigationPopup: (OnLoad / OnCalendarViewChange - Calendar)

function SetUpNavigation (sender)  
{  
    var datePickerTitle = sender._titleID;  
    var titleElement = $get(datePickerTitle);  
    var pickerID = datePickerTitle.replace("_calendar_Title""");  
    var calendarPosition = GetCalendarElement(pickerID);  
    var oldOnclick = titleElement.onclick;  
      
    var onclickHandler = function()  
                        {  
                            var e = {  
                                        clientX : calendarPosition.x - 75,  
                                        clientY : calendarPosition.y + 30  
                                    };  
                                      
                            oldOnclick(e);  
                            window.setTimeout(function()  
                                {  
                                    titleElement.onclick = onclickHandler;  
                                }, 20);  
                         };  
                           
    titleElement.onclick = onclickHandler;  
}  
 
function GetCalendarElement (datePickerID)  
{  
    var datePicker = $find(datePickerID);  
    var calendar = datePicker.get_popupContainer();  
    return datePicker.getElementPosition(calendar);  

For the calendarPopup (OnClick - DatePopupButton)

functionShowPopupCorrectPosition (pickerID)  
{  
           
    var dpWrapper = document.getElementById(pickerID).parentNode  
    var picker = $find(pickerID);               
    var dpOffsetTop = GetElementPosition(pickerID).y + dpWrapper.offsetHeight;  
    var pageHeight = document.body.offsetHeight;                                 
    var calHeight = GetCalendarHeight(pickerID);  
 
    if((dpOffsetTop + calHeight) > pageHeight)  
    {  
       shouldSkip = true;  
       PopupAbove(pickerID);  
       SetUpNavigationPopupOpenning(pickerID);                 
    }  
    else 
    {  
       var datePicker = $find(pickerID);    
       datePicker.showPopup();  
    }  
}  
 
function GetCalendarHeight (pickerID)  
{  
    var datePicker = $find(pickerID);   
    var popupElement = datePicker.get_popupContainer();  
    var dimensions = datePicker.getElementDimensions(popupElement);  
    return dimensions.height;  
}  
 
function GetElementPosition(pickerID)  
{  
    var datePicker = $find(pickerID);   
    var textBox = datePicker.get_textBox();  
    var position = datePicker.getElementPosition(textBox);  
    return position;  
}  
 
function PopupAbove(pickerID)  
{  
    var datePicker = $find(pickerID);                 
    var popupElementHeight = GetCalendarHeight(pickerID);                 
    var position = GetElementPosition(pickerID);  
      
    datePicker.showPopup(position.x, (position.y - popupElementHeight) + 18);  
}  
 

Thanks

1 Answer, 1 is accepted

Sort by
0
guillaume.lebel
Top achievements
Rank 1
Iron
Iron
answered on 05 Feb 2009, 07:57 PM

I've finally got a solution for my fastNavigationPopup. I've just put the function together with the showPopupAbove function like this :

ShowPopupCorrectPosition (pickerID)  
{  
           
    var dpWrapper = document.getElementById(pickerID).parentNode  
    var picker = $find(pickerID);               
    var dpOffsetTop = GetElementPosition(pickerID).y + dpWrapper.offsetHeight;  
    var pageHeight = document.body.offsetHeight;                                 
    var calHeight = GetCalendarHeight(pickerID);  
    var fastNavigationPopup = picker.get_calendar()._getFastNavigation();  
    var titleElement = GetTitleElement(pickerID);  
    $clearHandlers(titleElement);  
    $addHandler(titleElement, "click"function()  
    {  
        var posY = 0;  
        var calendar = picker.get_calendar();  
        var elementPosition = GetElementPosition(pickerID);  
        if((dpOffsetTop + calHeight) > pageHeight)  
        {  
            posY = -120;  
        }  
        else 
        {  
            posY = 30;  
        }  
        var e = {  
                    clientX : elementPosition.x,  
                    clientY : elementPosition.y + posY  
                }  
        $get(calendar._titleID).onclick(e);  
    });  
      
    if((dpOffsetTop + calHeight) > pageHeight)  
    {  
       shouldSkip = true;  
       PopupAbove(pickerID);  
    }  
    else 
    {  
       var datePicker = $find(pickerID);  
       datePicker.showPopup();  
    }  

Thanks
Tags
Calendar
Asked by
guillaume.lebel
Top achievements
Rank 1
Iron
Iron
Answers by
guillaume.lebel
Top achievements
Rank 1
Iron
Iron
Share this question
or