using client side functionality to replicate the "fastNavigationStep" behaviour

[Chris Yoker]

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


[Steve]

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

[Chris Yoker]

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

[Chris Yoker]

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

[Steve]

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

[Chris Yoker]

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

[Steve]

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

[Martin]

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>

[Mira]

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.

[Martin]

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

[Mira]

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.