Rank 1
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.
3 Answers, 1 is accepted
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.
Rank 1
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.
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.