Month Year picker and Ajax update panel problem.

4 posts, 1 answers
  1. Igor Koretsky
    Igor Koretsky avatar
    5 posts
    Member since:
    Aug 2009

    Posted 28 Aug 2009 Link to this post

    Hi everyone,

     

    I am using RadDatePicker control customized to a month/year picker with solution found here:

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

     

    My date picker control resides on the Ajax update panel.

    After postback Calendar popup defaults back to simple calendar with days. 
    What can be done to ensure that this Month/Year picker persists after an ajax postback?
     

    Here is my sample 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>  
        <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() { setCalendarTable(); }, 200)  
                }  
     
                function setCalendarTable()  
                {  
     
                    var picker = $find("<%= RadDatePicker1.ClientID %>");  
                    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>  
              
           <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
           <ContentTemplate>  
              <telerik:RadDatePicker ID="RadDatePicker1" runat="server">  
                   <DateInput DateFormat="MMMM yyyy">  
                   </DateInput>  
                   <Calendar>  
                       <FastNavigationSettings TodayButtonCaption="current date" />  
                   </Calendar>  
               </telerik:RadDatePicker>    
           </ContentTemplate>  
              <Triggers>  
                 <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />  
              </Triggers>  
           </asp:UpdatePanel>  
          
        <asp:Button ID="Button1" runat="server" Text="PostBack" OnClick="Button1_Click" />      
          
        </div>  
        </form>  
    </body>  
    </html> 

     protected void Button1_Click(object sender, EventArgs e)  
       {  
          this.RadDatePicker1.SelectedDate = DateTime.Now;   
        } 

    I am using 2008.1.515.20 version of RadDatePicker control.

    Please help me to fix/solve this.

    Thanks in advance,

     

    Igor.

     

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 31 Aug 2009 Link to this post

    Hi Igor,

    I am sending you a simple runnable application that demonstrates the desired functionality. Please give it a try and let me know if it works for you or if I am leaving something out.

    Hope this helps.

    All the best,
    Pavlina
    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.
  3. Igor Koretsky
    Igor Koretsky avatar
    5 posts
    Member since:
    Aug 2009

    Posted 31 Aug 2009 Link to this post

    Hi Pavlina,

    Thanks for reply. However this is not what I am looking for.

    I need update panel to convert postback into Ajax request.

    In your application even picker resides on the panel when you press the button there is a simple postback.

    I need picker and button on the same update panel or better like in my example picker on the panel and panel update mode: conditional and panel triggers: button click event registered.

  4. Answer
    Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 03 Sep 2009 Link to this post

    Hello Igor,

    Attached to this message is a modification of the project, which is working as expected on Ajax request.
    Please give it a try and let me know if you have other questions or problems. 

    Regards,
    Pavlina
    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.
Back to Top