using client side functionality to replicate the "fastNavigationStep" behaviour

11 posts, 0 answers
  1. Chris Yoker
    Chris Yoker avatar
    411 posts
    Member since:
    Jul 2005

    Posted 14 May 2008 Link to this post

    hiya,

    We have a requirement where we need to do the above.
    (the customer wants to be able to navigate forward amd backwards by using buttons at the side of the radDatePicker textbox, instead of having to  open up the pop-up)

    I have seen a good example where the calendar date can be moved forward by a day.

    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Calendar/Examples/DatePicker/ClientAPI/DefaultCS.aspx

    The client side code is as follows:

     date.setDate(date.getDate() + 1);
     datePicker.set_selectedDate(date);

    My question:

    How can I get it to replicate the "fastNavigationStep" behaviour?

    In other words, when the user presses the button, then the date "steps" forward 3 months.

    How can this be done?

    many thanks,

    yogi





  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 14 May 2008 Link to this post

    Hi Chris,

    Here is a sample code that achieves this using external buttons. You can configure the navigation and step as you need it to be:

         <asp:ScriptManager ID="ScriptManager1" runat="server"
            </asp:ScriptManager> 
     
            <script type="text/javascript">       
                function NavigateNext()       
                {                   
                     var calendar = $find("<%=RadCalendar1.ClientID%>"); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]]; 
                     calendar.navigateToDate(triplet);  
                }       
                      
                function NavigatePrev()       
                {                   
                     var calendar = $find("<%=RadCalendar1.ClientID%>"); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] -1, calendar.FocusedDate[2]]; 
                     calendar.navigateToDate(triplet);                 
                }       
            </script> 
     
            <asp:Button ID="Button1" runat="server" OnClientClick="NavigatePrev(); return false;" 
                Text="Previous" />&nbsp; 
            <asp:Button ID="Button2" runat="server" OnClientClick="NavigateNext(); return false;" 
                Text="Next" /> 
            <telerik:RadCalendar ID="RadCalendar1" runat="server" OnDayRender="RadCalendar1_DayRender"
            </telerik:RadCalendar> 

    Hope this helps.

    Regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. Chris Yoker
    Chris Yoker avatar
    411 posts
    Member since:
    Jul 2005

    Posted 14 May 2008 Link to this post

    hiya Steve,

    Thanks for the reply.

    I see that in the example, it uses a radCalendar.
    I have it working with a radCalendar.

    I actually need to use a radDatePicker (the customer just wants to use the radDatePicker, without having to popup the calendar)

    I have treid to swap the tags, to use radDatePicker, but the date now doesn't change when I click the button.

    The functionality is obviously slightly different for a radDatePicker..
    <telerik:RadDatePicker>

    yet I can't see where it would be different.

    Any ideas?

    I was hoping to get this ready for a proof of concept very soon.

    many thanks,

    yogi

  4. Chris Yoker
    Chris Yoker avatar
    411 posts
    Member since:
    Jul 2005

    Posted 15 May 2008 Link to this post

    hiya,

    No response yet.

    I suspect that the radDatePicker doesn't have a "navigateToDate"  method, but I need to someone from the Telerik team to confirm this.

    If I'm correct, and the radDatePicker doesn't have this method, how  can I get the above functionality working with a radDatePicker, instead of a calendar?

    Please reply asap.

    many thanks,

    yogi
  5. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 16 May 2008 Link to this post

    Hi Chris,

    You need just two more lines of javascript to achieve this for the DatePicker control - one to cancel the synchronization of the calendar/input on popupopening and one to get the calendar instance from the picker. Here is the modified code:

    JavaScript:
    <script type="text/javascript"
                function CancelCalendarSynchronization(sender, args) 
                { 
                    args.set_cancelCalendarSynchronization(true); 
                }       
                function NavigateNext()        
                {                    
                     var picker = $find("<%=RadDatePicker1.ClientID%>"); 
                     var calendar = picker.get_calendar(); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]];  
                     calendar.navigateToDate(triplet);   
                }        
                       
                function NavigatePrev()        
                {                    
                     var picker = $find("<%=RadDatePicker1.ClientID%>"); 
                     var calendar = picker.get_calendar(); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] -1, calendar.FocusedDate[2]];  
                     calendar.navigateToDate(triplet);                  
                }        
            </script>  

    ASPX:
       <asp:Button ID="Button1" runat="server" OnClientClick="NavigatePrev(); return false;"  
                Text="Previous" />&nbsp;  
            <asp:Button ID="Button2" runat="server" OnClientClick="NavigateNext(); return false;"  
                Text="Next" />  
            <telerik:RadDatePicker ID="RadDatePicker1" runat="server"
            <ClientEvents OnPopupOpening="CancelCalendarSynchronization" /> 
            </telerik:RadDatePicker>  

    Hope this helps.

    Best wishes,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Chris Yoker
    Chris Yoker avatar
    411 posts
    Member since:
    Jul 2005

    Posted 19 May 2008 Link to this post

    hiya Steve,
    Thanks for the reply.

    Looking at the code, I see that the date is being assigned to the calendar, but I need to assign it to the datePicker (the whole object is to avoid the user having to popup the calendar)

    current code below.

    calendar.navigateToDate(triplet);


    I have tried the following, but obviously, it didn't work.

    picker.set_selectedDate(triplet);


    How can I get it to set the date to the datePicker?

    many thanks,

    yogi



  7. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 21 May 2008 Link to this post

    Hello Chris,

    Sorry for the misunderstanding of your requirement. The picker does not accept triplet date array, but rather a js Date object. So the code should change like this:

     <script type="text/javascript">        
                function NavigateNext()         
                {                     
                     var picker = $find("<%=RadDatePicker1.ClientID%>");  
                     var calendar = picker.get_calendar(); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 1, calendar.FocusedDate[2]]; 
                     calendar.navigateToDate(triplet); 
                     var date = new Date(calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2] ); 
                     picker.set_selectedDate(date); 
                        
                }         
                        
                function NavigatePrev()         
                {                     
                     var picker = $find("<%=RadDatePicker1.ClientID%>");  
                     var calendar = picker.get_calendar(); 
                     var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]]; 
                     calendar.navigateToDate(triplet); 
                     var date = new Date(calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2] ); 
                     picker.set_selectedDate(date);              
                }         
            </script>   


    Regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Martin
    Martin  avatar
    13 posts
    Member since:
    Nov 2007

    Posted 19 Oct 2009 Link to this post

    I need to navigate through months when MultiviewColumns and MultiViewRows is set to 2. but without doing a postback.

    I tried your exampel and it works fine. But when i set MultiViewColumns to 2 it does not work, why?

    Do you have any ideas on how to do this.

    <asp:ScriptManager ID="ScriptManager1" runat="server">  
            </asp:ScriptManager>  
      
            <script type="text/javascript"
                function NavigateNext() { 
                    var calendar = $find("<%=RadCalendar1.ClientID%>"); 
                    var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] + 2, calendar.FocusedDate[2]];                 
                    calendar.navigateToDate(triplet); 
                } 
     
                function NavigatePrev() { 
                    var calendar = $find("<%=RadCalendar1.ClientID%>"); 
                    var triplet = [calendar.FocusedDate[0], calendar.FocusedDate[1] - 1, calendar.FocusedDate[2]]; 
                    calendar.navigateToDate(triplet); 
                }        
            </script>  
      
            <asp:Button ID="Button1" runat="server" OnClientClick="NavigatePrev(); return false;"  
                Text="Previous" />&nbsp;  
            <asp:Button ID="Button2" runat="server" OnClientClick="NavigateNext(); return false;"  
                Text="Next" />  
            <telerik:RadCalendar ID="RadCalendar1" runat="server" OnDayRender="RadCalendar1_DayRender" MultiViewColumns="2">  
            </telerik:RadCalendar>  
      

  9. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 22 Oct 2009 Link to this post

    Hello Martin ,

    You need to set the AutoPostBack property of RadCalendar to true when using Multi-Month mode.
    Please take a look at the Multi-View Mode help topic for more information.

    Greetings,
    Mira
    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.
  10. Martin
    Martin  avatar
    13 posts
    Member since:
    Nov 2007

    Posted 23 Oct 2009 Link to this post

    Hi Mira

    Thanks for the responce.

    Thats what i was affraid off.

    I'm having a calendar where i bind some data. when clicking each day an event is fired i would like to do this event clientside using jquery and AJax to handle my event, without having to do a postback each time and refreshing the whole calendar. But then again i would also like to use the Muti View mode.

    is it possible to prevent a postback when clicking the days. or do you have another idea on how to do this.

    martin
  11. Mira
    Admin
    Mira avatar
    1124 posts

    Posted 28 Oct 2009 Link to this post

    Hi Martin ,

    The only way to prevent postback when selecting a date with AutoPostback  is to cancel the OnDateClick client event of the grid. However, this will also cancel the date selection. Therefore I suggest that you refine your logic so the dates selections works properly with AutoPostBack set to true.

    All the best,
    Mira
    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.
Back to Top