Trouble with RadCalendar + RadDatePicker in selected range

3 posts, 0 answers
  1. Nikolay
    Nikolay avatar
    7 posts
    Member since:
    Jun 2011

    Posted 06 Jul 2011 Link to this post

    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.
  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 12 Jul 2011 Link to this post

    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

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  3. Nikolay
    Nikolay avatar
    7 posts
    Member since:
    Jun 2011

    Posted 13 Jul 2011 Link to this post

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