RadGrid Header Events

[Mehmet]

Hi,

I am trying to avoid the loading issue on the first look of the Scheduler.

If I can catch the events of the following buttons that will help me out to re-load the visible week on the Scheduler.

Previous Day- Next Day- DatePickerActivator- HeaderDay- HeaderWeek- HeaderMonth

It would be awesome to know what name of the events to catch on the client side and how the date range can be captured and passed through.

I have attached the screenshot of the button. Appreciate it.

[Mehmet]

It is important whether I can capture the date of "Previous Week" or the date range of by clicking "Week" or the month-year by clicking "Month". 

Does it sound rational and possible?

[Ivan Danchev]

Hello Mehmet,

On the client the Scheduler's navigation can be detected in the OnClientNavigationCommand client-side event. Through the eventArgs you can get the command code that corresponds to each of the navigation buttons:

var command = eventArgs.get_command();

The methods you can use to get the current visible range (start date and end date) are the following:

var startDate = sender.get_activeModel().get_visibleRangeStart();
var endDate = sender.get_activeModel().get_visibleRangeEnd()

Regards,
Ivan Danchev
Telerik

[Mehmet]

Ivan.

However, this doesn't prompt the next visible range dates. 

Such as; my current visible is weekly and have got "Monday, 8 February - Sunday, February 14".  
When I click on the arrow of which takes me last week than the startDate is Monday,8 February, the endDate is Sunday, February 14. Because these date are visible. It doesn't inform me the next targetted week's start-end date information.
Does it make sense? 

 

[Ivan Danchev]

Hello Mehmet,

Since the Scheduler does not have methods for getting the previous/next to the visible range's star and end dates you can use the existing methods for the visible  range and subtract/add 7 days to get the dates. Here's how you can get the previous week's start and end date's by subtracting 604799999 ms (7 days) from the visible range's dates:

function OnClientNavigationCommand(sender, args) {
    var startDate = sender.get_activeModel().get_visibleRangeStart();
    var endDate = sender.get_activeModel().get_visibleRangeEnd();

    var prevStartDate = new Date();
    var prevEndDate = new Date();

    prevStartDate.setTime(startDate.getTime() - 604799999);
    prevEndDate.setTime(endDate.getTime() - 604799999);
}

Regards,
Ivan Danchev
Telerik

[Mehmet]

Hi Ivan,

Thanks for that.

This only works for the previous-next navigation. I actually need to find out once the user clicks on any navigation button such as Day, Week, Month, The calendar,

What would be the best This is really important for me in order to speed the performance on the  since it has got some significant performance issue once it is hooked up to the communication.

Thank you

[Ivan Danchev]

Hello Mehmet,

As I mentioned, the OnClientNavigationCommand event will fire when the user clicks on a navigation button and the command that you can get from the eventArgs object will be different for each button (9 for today, 0 for Day, 1 for Week, 2 for Month, 6 for Year). Clicking on the Calendar button to open the Calendar will not fire the event but once opened if you click on a day in it the event will fire and the command returned will be 14.

Regards,
Ivan Danchev
Telerik

[Mehmet]

Hi Ivan, then what would be the best way to capture the month of the selection date from the calendar or the day view, or week view or previous day, next day etc ?

[Ivan Danchev]

Hello Mehmet,

While you can get the previous/next time range by subtracting or adding days depending on the current selected view and the returned command, the Scheduler does not have methods for getting the range when clicking on a calendar date or when switching views.
Here's how you can get the previous and next ranges when clicking on the previous or next buttons (in Day or Week view), you can implement similar checks for the Month and Year views:

function OnClientNavigationCommand(sender, args) {
    var command = args.get_command();
    var selectedView = sender.get_selectedView();
    var startDate = sender.get_activeModel().get_visibleRangeStart();
    var endDate = sender.get_activeModel().get_visibleRangeEnd();
    var prevStartDate = new Date();
    var prevEndDate = new Date();
    var nextStartDate = new Date();
    var nextEndDate = new Date();

    if (selectedView == 0 && command == 7) {
        prevStartDate.setTime(startDate.getTime() - 86400000);
        prevEndDate.setTime(endDate.getTime() - 86400000);
    }
    else if (selectedView == 0 && command == 6) {
        nextStartDate.setTime(startDate.getTime() + 86400000);
        nextEndDate.setTime(endDate.getTime() + 86400000);
    }
    else if (selectedView == 1 && command == 7) {
        prevStartDate.setTime(startDate.getTime() - 604800000);
        prevEndDate.setTime(endDate.getTime() - 604800000);
    }
    else if (selectedView == 1 && command == 6) {
        nextStartDate.setTime(startDate.getTime() + 604800000);
        nextEndDate.setTime(endDate.getTime() + 604800000);
    }
   //... other clauses for previous/next Month, Year views

}

Regards,
Ivan Danchev
Telerik

[Mehmet]

What is the number to subtract/add from a month range?

thanks

[Mehmet]

There is a problem such as;

1 - The page loads
2 - Clicking on the month view
3 - Navigating through the previous months
4 - Clicking on the week view => This throws the current week date range. This should indicate the selected month's week date range.
How can I achieve that? Thank you