RadDatePicker MultiViewColumns set stops navigation

12 posts, 0 answers
  1. Duane
    Duane avatar
    37 posts
    Member since:
    Sep 2010

    Posted 30 Sep 2010 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 30 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Duane
    Duane avatar
    37 posts
    Member since:
    Sep 2010

    Posted 04 Oct 2010 Link to this post

    Hi Dimo,

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

    Best regards,
    Duane.
  4. Duane
    Duane avatar
    37 posts
    Member since:
    Sep 2010

    Posted 04 Oct 2010 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8471 posts

    Posted 04 Oct 2010 Link to this post

    Hello Duane,

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

    Sincerely yours,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Duane
    Duane avatar
    37 posts
    Member since:
    Sep 2010

    Posted 08 Nov 2010 Link to this post

    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.
  7. Ashwini
    Ashwini avatar
    4 posts
    Member since:
    Sep 2011

    Posted 19 Mar 2012 Link to this post

    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.
  8. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 21 Mar 2012 Link to this post

    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!
  9. Ashwini
    Ashwini avatar
    4 posts
    Member since:
    Sep 2011

    Posted 22 Mar 2012 Link to this post

    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" %>
    <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
  10. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 22 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Ashwini
    Ashwini avatar
    4 posts
    Member since:
    Sep 2011

    Posted 22 Mar 2012 Link to this post

    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

  12. Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 23 Mar 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top