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

Problem with two Month Year Pickers and Shared Calendar.

1 Answer 76 Views

Calendar

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

Igor Koretsky asked on 20 Aug 2009, 01:49 PM

Hi everyone,

I am using many RadDatePicker controls on the form that are customized to a month/year pickers with solution found here:

http://www.telerik.com/community/code-library/submission/b311D-mdkhb.aspx

Because of performance issue I have to use shared calendar for all date pickers on the form. When I set SharedCalendarID property for each RadDatePicker there is a problem.

No matter witch picker I set date on it sets date on one picker only.

Here is my simple web page:

    
            <%@ Page Language="C#" AutoEventWireup="true" Culture="en-US" CodeFile="Default.aspx.cs" 
        
                Inherits="_Default" %> 
        
            <%@ 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">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                   <br /> 
        
                   <br /> 
        
                <div> 
        
                    <script type="text/javascript">  
        
                        //override the onload event handler to change the picker after the page is loaded  
        
                        window.onload = function()  
        
                        {  
        
                           window.setTimeout(function() {setCalendars();}, 200)    
        
                        }  
        
                        function setCalendars()  
        
                        {  
        
                           setCalendarTable($find("<%= RadDatePicker1.ClientID %>"));  
        
                           setCalendarTable($find("<%= RadDatePicker2.ClientID %>"));  
        
                        }     
        
                        function setCalendarTable(picker)  
        
                        {  
        
                            var calendar = picker.get_calendar();  
        
                            var fastNavigation = calendar._getFastNavigation();  
        
                            $clearHandlers(picker.get_popupButton());  
        
                            $addHandler(picker.get_popupButton(), "click", function()  
        
                            {  
        
                                var textbox = picker.get_textBox();  
        
                                //adjust where to show the popup table   
        
                                var x, y;  
        
                                var adjustElement = textbox;  
        
                                if (textbox.style.display == "none")  
        
                                    adjustElement = picker.get_popupImage();  
        
                                var pos = picker.getElementPosition(adjustElement);  
        
                                x = pos.x;  
        
                                y = pos.y + adjustElement.offsetHeight;  
        
                                var e = {  
        
                                    clientX: x,  
        
                                    clientY: y  
        
                                };  
        
                                //synchronize the input date if set with the picker one  
        
                                var date = picker.get_selectedDate();  
        
                                if (date)  
        
                                {  
        
                                    calendar.get_focusedDate()[0] = date.getFullYear();  
        
                                    calendar.get_focusedDate()[1] = date.getMonth() + 1;  
        
                                }  
        
                                $get(calendar._titleID).onclick(e);  
        
                            });  
        
                            fastNavigation.OnOK =  
        
                                function()  
        
                                {  
        
                                    var date = new Date(fastNavigation.Year, fastNavigation.Month, 1);  
        
                                    picker.get_dateInput().set_selectedDate(date);  
        
                                    fastNavigation.Popup.Hide();  
        
                                }  
        
                            fastNavigation.OnToday =  
        
                                function()  
        
                                {  
        
                                    var date = new Date();  
        
                                    picker.get_dateInput().set_selectedDate(date);  
        
                                    fastNavigation.Popup.Hide();  
        
                                }  
        
                        }     
        
                    </script> 
        
                    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" SharedCalendarID="sharedCalendar">  
        
                        <DateInput DateFormat="MMMM yyyy" runat="server">  
        
                        </DateInput> 
        
                        <Calendar ID="Calendar1" runat="server" > 
        
                        </Calendar> 
        
                    </telerik:RadDatePicker> 
        
                    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" SharedCalendarID="sharedCalendar">  
        
                        <DateInput DateFormat="MMMM yyyy" runat="server">  
        
                        </DateInput> 
        
                        <Calendar ID="Calendar2" runat="server" > 
        
                        </Calendar> 
        
                    </telerik:RadDatePicker> 
        
                    <telerik:RadCalendar runat="server" ID="sharedCalendar" Width="100px">  
        
                      </telerik:RadCalendar> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

I am using 2008.1.515.20 version of RadDatePicker control.

Please help me to fix/solve this.

Thanks in advance,

Igor.

1 Answer, 1 is accepted

Accepted

answered on 21 Aug 2009, 01:08 PM

monthyearpickerssharedcalendar.zip

Hello Igor,

Please find attached a modified sample project running as expected.

Hope this helps.

Regards,
Martin
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.