RadDatePicker MultiViewColumns set stops navigation

[Duane]

Hi Guys,

I wonder if any one can shed some light on an issue we are having?

The webpage we have an issue with has a telerik:RadDateTimePicker. If the 'MultViewColumns' and 'MultiViewRow' properties are not set then the navigation works on the calendar when it pops up works fine, as does the quick month/Year selection.

However as soon as we set the 'MultiViewColumns' to 2 or more the navigation quits working, along with the quick Month/Year selection. The List of months and years pops up but selecting anything does not refresh the calendar to teh correct new month.

The html code we are using below:

<telerik:RadDateTimePicker ID="fdCourseStartDateDateTimePicker"
        runat="server"
        Skin="GCI"
        EnableEmbeddedSkins="false" AutoPostBackControl="Calendar" >
    <DateInput ID="DateInput2" runat="server" DateFormat="D" ReadOnly="true" >
    </DateInput>
    <TimePopupButton runat="server" Visible="false" />
    <Calendar ID="fdCourseStartDateCalendar"
            runat="server"
            EnableEmbeddedSkins="false"
            Skin="GCI"
            UseRowHeadersAsSelectors="False"
            UseColumnHeadersAsSelectors="False"
            MultiViewColumns="2" >
        <FastNavigationSettings
            DateIsOutOfRangeMessage="Erk!"
            EnableTodayButtonSelection="true" />
    </Calendar>
</telerik:RadDateTimePicker>

If any one can advise it will be aprreciated.

Best regards,
Dib.

[Dimo]

Hello Duane,

Your scenario is not supported out-of-the-box, because RadCalendar must postback if it is used in multimonth mode in order to navigate and select dates. However, in this case the RadCalendar is a child control of another control and posting back during navigation will cause that the calendar popup to close.

A workaround exists:

http://www.telerik.com/community/code-library/aspnet-ajax/calendar/how-to-use-raddatepicker-with-multimonthview-calendar.aspx

Sincerely yours,
Dimo
the Telerik team

[Duane]

Hi Dimo,

Thank you for that. I'll take a look at implementing that solution and report back.

Best regards,
Duane.

[Duane]

Hi Dimo,

I have tried to slip your example into our current page but am hitting all kinds of errors like:

Sys.webForms.PageRequestManagerParserErrorException - "Error parsing near '5pHw8FAjQ4HxBozGQUKw'" When I tried to change the values in one of the Telerik DropDownLists on the page.

Or "Sys.InvalidOperationException: Could not find UpdatePanel with ID RadCalendar1Panel'" If it is being updated dynamicall then it must be inside another UpdatePanel."

I assume this is because the DatePicker is already inside an update panel?

Any help appreciated...

Best regards,
Duane.

[Dimo]

Hello Duane,

Please provide a simple standalone runnable demo for us to inspect locally.

Sincerely yours,
Dimo
the Telerik team

[Duane]

Hi Dimo,

Thanks for your help. We have changed the implementation slightly now, so this is no longer an issue.

Thanks again.

Best regards,
Duane.

[Ashwini]

Hi,

I am getting "Sys.InvalidOperationException: Could not find UpdatePanel with ID RadCalendar1Panel'" If it is being updated dynamicall then it must be inside another UpdatePanel" error when I put my user control having RadDatePicker MultiViewColumns inside Update Panel. My project have requirement to wrap all control in Update panel so that they post back asynchronously, all are working well but navigation of RadCalendar fails.

I have sample application ready which will help you explain more abotu this issue. Please let me know where can I attach this solution.

[Richard]

Ashwini:

I am not sure which version of the RadControls for ASP.NET AJAX you are using, but if it is Q3 2011 SP1 or older, then you could be facing a bug that was fixed in Q1 2012 Beta,

When set dynamically the FocusedDate property of RadCalendar in multi month view is not applied before the next Post Back.

Otherwise, I'd suggest that you post your code using the Format Code Block tool in the forum poster tool bar. Be sure to set the .aspx code as markup and your code behind as C# or VB.NET. This will help us to better understand your problem.

Cheers!

[Ashwini]

Hi Jumpstart,

Thanks for your reply.

Here I am pasting my User Conrol code and the way it is used in parent. I am facing this issue for  RAdControls 3.5 as well as 4.0 dlls
PickerControl.ascx code:-

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PickerControl.ascx.cs" Inherits="PickerControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<style type="text/css">
        .nowHidden
        {
            display: none;
        }

        .nowVisible
        {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var PickerClientID = "";
            var CalendarClientID = "";
            var HiddenCalendarClientID = "";

            var shouldInvokeAjax = false;
            function ToggleCalendar(hiddenCalWrapperId, calID, sender, event) {
                PickerClientID = sender.id.replace("_popupButton", "");
                CalendarClientID = calID;
                SetCalendarIdInHidden(hiddenCalWrapperId);
                HiddenCalendarClientID = hiddenCalWrapperId;
                var cal = $find(CalendarClientID);
                var todaysDate = new Date();
                var todayTriplet = [todaysDate.getFullYear(), todaysDate.getMonth() + 1, todaysDate.getDate()];
                SetCalendar();
            }

            function SetCalendar() {
                var tb = $find(PickerClientID).get_textBox();
                var calWrapper = $get(HiddenCalendarClientID);
                var tbLocation = $telerik.getLocation(tb);
                calWrapper.style.top = tbLocation.y + tb.offsetHeight + "px";
                calWrapper.style.left = tbLocation.x + "px";
                calWrapper.className = calWrapper.className.indexOf("nowHidden") != -1 ? "nowVisible" : "nowHidden";
                shouldInvokeAjax = calWrapper.className.indexOf("nowHidden") != -1 ? false : true;
            }

            function myUserControlClickHandler() {
                $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(["focusSelectedDate"]);
            }
            function HideCalendar() {
                $get(HiddenCalendarClientID).className = "nowHidden";
                ResetHidden();
                if (shouldInvokeAjax) {
                    shouldInvokeAjax = false;
                    myUserControlClickHandler();
                }
            }

            function DateSelected(sender, args) {
                if (args.get_renderDay().IsSelected) {
                    var selectedDate = args.get_renderDay().get_date();
                    var newPickerDate = new Date();
                    newPickerDate.setFullYear(selectedDate[0]);
                    newPickerDate.setMonth(selectedDate[1] - 1);
                    newPickerDate.setDate(selectedDate[2]);
                    $find(PickerClientID).get_dateInput().set_selectedDate(newPickerDate);
                    HideCalendar();
                }
                else {
                    $find(PickerClientID).get_dateInput().clear();
                }
            }

            function ValueChanged(sender, args) {
                var cal = $find(CalendarClientID);
                var calDates = cal.get_selectedDates();

                if (args.get_newDate()) {
                    var NewCalDate = [args.get_newDate().getFullYear(), args.get_newDate().getMonth() + 1, args.get_newDate().getDate()];
                    cal.selectDate(NewCalDate);
                }
                else if (calDates.length != 0) {
                    var CurrentCalDate = [calDates[0][0], calDates[0][1], calDates[0][2]];
                    cal.unselectDate(CurrentCalDate);
                }
            }

            document.documentElement.onclick = function (event) {
                if (shouldInvokeAjax) {
                    if (window.event) {
                        var eventTarget = window.event.srcElement;
                    }
                    else {
                        var eventTarget = event.target;
                    }
                    if (eventTarget.id == PickerClientID + "_popupButton") {
                        return;
                    }
                    while (eventTarget = eventTarget.parentNode) {
                        if (eventTarget.id == CalendarClientID) {
                            return;
                        }
                    }
                    shouldInvokeAjax = false;
                    HideCalendar();
                }
            }

        </script>
    </telerik:RadCodeBlock>
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
<div>
        <div>
        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Calendar-Visible="false">
            <DateInput  runat="server" OnTextChanged="SetOthersMinDate" ClientEvents-OnValueChanged="ValueChanged" AutoPostBack="true" />
        </telerik:RadDatePicker>
        <br />
        <br />
    </div>
    <div id="HiddenCalendarWrapper" class="nowHidden" runat="server">
        <telerik:RadCalendar ID="RadCalendar1" runat="server" SelectedDate=""
            FirstDayOfWeek="Monday" ShowRowHeaders="false" UseRowHeadersAsSelectors="false"
            UseColumnHeadersAsSelectors="false" EnableMultiSelect="false" AutoPostBack="true"
            MultiViewColumns="2" ClientEvents-OnDateSelected="DateSelected"
            ShowOtherMonthsDays="false" />
    </div>
    </div>

PickerControl.ascx.cs:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class PickerControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDatePicker1.DatePopupButton.Attributes.Add("onclick", "ToggleCalendar('" + HiddenCalendarWrapper.ClientID + "', '" + RadCalendar1.ClientID + "', this, event);return false;");
        //This will take care of requirement where they want to restrict navigation back from current month
        RadCalendar1.RangeMinDate = DateTime.Now;
        RadCalendar1.FastNavigationSettings.DateIsOutOfRangeMessage = string.Empty;
    }

    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "focusSelectedDate" && RadCalendar1.SelectedDates.Count > 0)
        {
            RadCalendar1.FocusedDate = RadCalendar1.SelectedDates[0].Date;
        }
        else if (e.Argument == "focusSelectedDate")
        {
            RadCalendar1.FocusedDate = DateTime.Now;
        }

    }

    protected void SetOthersMinDate(object sender, EventArgs e)
    {
        if (((PickerControl)this.Parent.FindControl("picker2")).ID != this.ID)
        {
            ((RadCalendar)((PickerControl)this.Parent.FindControl("picker2")).FindControl("RadCalendar1")).RangeMinDate = (DateTime)RadDatePicker1.DbSelectedDate;
            ((RadCalendar)((PickerControl)this.Parent.FindControl("picker2")).FindControl("RadCalendar1")).FastNavigationSettings.DateIsOutOfRangeMessage = string.Empty;
        }
    }
}

Here my Default.aspx:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register Src="~/PickerControl.ascx" TagName="pickerControl" TagPrefix="customControl" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
     <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function SetCalendarIdInHidden(shownCalendarID) {
                var shownCalendar = document.getElementById("hiddenShownCalendar").value;
                if (shownCalendar != "" && shownCalendar != shownCalendarID) {
                    $get(shownCalendar).className = "nowHidden";
                }
                document.getElementById("hiddenShownCalendar").value = shownCalendarID;
            }
            function ResetHidden() {
                document.getElementById("hiddenShownCalendar").value = "";
            }
        </script></telerik:RadCodeBlock>

    <div>
    <asp:HiddenField ID="hiddenShownCalendar" runat="server" />
    <asp:UpdatePanel ID="updatePanel1" runat="server"><ContentTemplate>
    <customControl:pickerControl ID="picker1" runat="server" />
    <br /><br /><br />
    <customControl:pickerControl ID="picker2" runat="server" />
    <br /><br /><br />
    </ContentTemplate></asp:UpdatePanel>

    </div>
    </form>
</body>
</html>

This is all I have done. If you will remove update panel, navigation works fine. But inside user control it wont.

Thanks in advance

[Andrey]

Hi,

I am not sure that I understand your requirements correctly. What I see from your code is that you are handling
every Ajax request manually, then why you need to use ASP UpdatePanel?

Could you elaborate a bit more about your scenario?

Regards,
Andrey
the Telerik team

[Ashwini]

Hey Andrey,

Actually my parent page, say Default.aspx in this case, have some controls like Asp DropDownList which need to be postback and so some stuff on Selected index change. Now if I wont put all controls in Asp Update Panel page flickers and for sure I wont like that nor will my client. So, it is required to put it in Update Panel in which one of may control is this user control. Ajax request is handles manually is only RadCalendar.

Any changes I need to make in my user control to handle navigation error ?

Thanks,
Ashwini

[Andrey]

Hello,

The problems comes from that you are using both update panels and RadAjaxManager to handle the Ajax requests. You should choose one approach, either to stick to the update panels or to continue using RadAjaxManager. Using both is not supported scenario.

Give this suggestion a try and check whether the issue is resolved.
Regards,
Andrey
the Telerik team