Trouble with RadCalendar + RadDatePicker in selected range

[Nikolay]

Hello.
I have a trouble with RadCalendar with MultiViewColumns in connection with two RadDatePicker.
When I choose range in RadCalendar (by clicking on cells with [Shift]) and then trying to change this range with two RadDatePickers(with help of javascript function), it change it in small period of time, but after postback it suddenly change selection back to that was selected previously (in RadCalendar with key [Shift]).
This trouble happen when I set RadCalendar.set_datesInRange(startDate, endDate) and then  call RadCalendar.navigateToDate(triplet).
Here is my code:

ASPX:

<telerik:RadDatePicker ID="rdpStartDate" runat="server">
     <ClientEvents OnDateSelected="DatePicker_OnDateSelected"/>
</telerik:RadDatePicker>

<telerik:RadDatePicker ID="rdpEndDate" runat="server">
       <ClientEvents OnDateSelected="DatePicker_OnDateSelected"/>
</telerik:RadDatePicker>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>

     <telerik:RadCalendar ID="activityCalendar" AutoPostBack="true" CssClass="calendar" EnableNavigation="false"          EnableMonthYearFastNavigation="false" UseColumnHeadersAsSelectors="false"
UseRowHeadersAsSelectors="false" MultiViewColumns="3" MultiViewRows="1" runat="server" RangeSelectionMode="OnKeyHold">
            <ClientEvents OnDateClick="onDateClick"  OnLoad ="OnLoadCalendar" />
    </telerik:RadCalendar>

    </ContentTemplate>
</asp:UpdatePanel>

Javascript:

    function onDateClick(sender, eventArgs) {

        var clientId = sender.get_id();
        var baseName = clientId.substr(0, clientId.lastIndexOf("_") + 1);

        var rdpStartDate = $find(baseName.concat("rdpStartDate"));
        var rdpEndDate = $find(baseName.concat("rdpEndDate"));
        var activityCalendar = $find(baseName.concat("activityCalendar"));

        var startDate = activityCalendar.get_rangeSelectionStartDate();
        var endDate = activityCalendar.get_rangeSelectionEndDate();
        if (endDate && startDate) {
            rdpStartDate.set_selectedDate(startDate);
            rdpEndDate.set_selectedDate(endDate);
        }
        else {
            rdpStartDate.clear();
            rdpEndDate.clear();
        }
    }

    function OnLoadCalendar(sender) {
        var id = sender.get_id();
        sender.get_element().getElementsByTagName("table")[0].style.display = "none";
    }

    function DatePicker_OnDateSelected(sender, e) {

        var clientId = sender.get_id();
        var baseName = clientId.substr(0, clientId.lastIndexOf("_") + 1);

        var rdpStartDate = $find(baseName.concat("rdpStartDate"));
        var rdpEndDate = $find(baseName.concat("rdpEndDate"));
        var activityCalendar = $find(baseName.concat("activityCalendar"));

        var startDate = rdpStartDate.get_selectedDate();
        var endDate = rdpEndDate.get_selectedDate();

        if (endDate && startDate) {

            activityCalendar.set_datesInRange(startDate, endDate);

        }
        else {

            activityCalendar.unselectDates(activityCalendar.get_selectedDates());
        }

        if (sender.get_id() == baseName.concat("rdpStartDate") && startDate) {
             if (!endDate) {
                activityCalendar.unselectDates(activityCalendar.get_selectedDates());
            }
            var triplet = [startDate.getFullYear(), startDate.getMonth()+1, startDate.getDate()];
            activityCalendar.selectDate(triplet, false);
            if (endDate && endDate.getMonth() != startDate.getMonth()) {
                activityCalendar.navigateToDate(triplet);
            }
            else{
            activityCalendar.navigateToDate([startDate.getFullYear(), startDate.getMonth(), startDate.getDate()]);
            }
        }
        if (sender.get_id() == baseName.concat("rdpEndDate") && endDate) {
            if (!startDate) {
                activityCalendar.unselectDates(activityCalendar.get_selectedDates());
            }
            var triplet = [endDate.getFullYear(), endDate.getMonth()+1, endDate.getDate()];
            activityCalendar.selectDate(triplet, false);
            activityCalendar.navigateToDate([endDate.getFullYear(), endDate.getMonth(), endDate.getDate()]);
        }
};

 
Why overwrite this new selection with old selection after calling navigateToDate() ???

Thank you.

[Radoslav]

Hi Nikolay,

Unfortunately set_datesInRange() client side function is not supported in scenarios when you use the Multi Month View or Calendar's AutoPostBack property is true. In this cases you could set the range selection start date and end date on the server.
For example:

protected void Page_Load(object sender, EventArgs e)
    {
        if (rdpStartDate.SelectedDate.HasValue && rdpEndDate.SelectedDate.HasValue)
        {
            activityCalendar.RangeSelectionStartDate = rdpStartDate.SelectedDate.Value;
            activityCalendar.RangeSelectionEndDate = rdpEndDate.SelectedDate.Value;
        }
    }

Additionally I am sending you a simple example based on your code with the suggested changes. Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
the Telerik team

[Nikolay]

Hello.
It's very pity that we can't work with RadCalendar using client-side functionality and without many postback to the server.

Thank you for reply.