Different resource headers for different date ranges

[Dave]

Hi,

In my scheduling application (which displays using web service based binding for the appointments and serverside bindings for the group by resource headers), I need to display different resource headers for different date ranges.

This is fine when the page is loaded for a specific date, but not when the date is changed via the date previous/next/calendar controls, which load new appointments via Ajax.

I'm thinking that I need to handle date change events such that I can reload the entire page under these circumstances, which leads me on to a couple of questions:

1) Which events do I need to override in the browser to make sure that I get control once the date is changed?

2) My schedule control is within an AjaxPanel, from my event handler, how can I force a postback that does a full page reload instead of a partial Ajax one?

3) I need to keep tabs on the date range that the scheduler is displaying throughout all this, what properties do I have to copy into hidden fields for the visible date window?

Thanks for your help.

[T. Tsonev]

Hello Dave,

Thank you for the detailed problem description.

I've implemented a quick prototype that suits your requirements:

We send the current date range as part of an RadAjaxManager ajaxRequest when OnClientNavigationComplete fires:

function navigationComplete(sender, eventArgs)
{
    // Don't refresh the scheduler when switching between business hours and 24 hours
    if(eventArgs.get_command() != Telerik.Web.UI.SchedulerNavigationCommand.SwitchFullTime)
    {
        var dateFormatString = "yyyy/MM/dd HH:mm";
        var model = sender.get_activeModel();
        var dateRange = model.get_visibleRangeStart().format(dateFormatString) + "_" + model.get_visibleRangeEnd().format(dateFormatString);
        $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(dateRange);
    }
}

We then process the request:

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
    string[] dateRange = e.Argument.Split('_');

    if (dateRange.Length != 2)
    {
        return;
    }

    DateTime rangeStart = DateTime.Parse(dateRange[0]);
    DateTime rangeEnd = DateTime.Parse(dateRange[1]);

    RadScheduler1.SelectedDate = rangeStart.Date;
}

The manager is configured to update RadScheduler:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

This approach is not ideal as we have to update RadScheduler each time the selected date changes. I recommend you to consider using JavaScript and jQuery to update the resource headers entirely on the client.

I hope this helps.

Greetings,
Tsvetomir Tsonev
the Telerik team

[Dave]

Hi Tsvetomir,

Sorry about the delay, I had been pulled onto another project over the past couple of weeks.

The code that you sent over works for me, but it isn't ideal. My current problem is as follows:

1) User navigates to a new date range
2) Visual date indicators update.
3) Scheduler updates appointments via the web service and repaints against the existing set of resource headers
4) The proper refresh changes the resource headers via our event code
5) Scheduler updates appointments via the web service against the correct set of resource headers for the date range

Effectively I don't want or need steps 2 and 3 to happen at all in this case. #2 would occur during the full Ajax repaint in any case, and #3 is completely irrelevant.

I think that I need to know how to stop the web service fetch in #3 - what code would be required to handle the OnClientNavigationCommand event correctly such that it works as expected i.e. handle date changes in Javascript in such a way that the automatic rebind/repaint doesn't occur.

Thanks for your help.

[T. Tsonev]

Hello Dave,

I see what you mean. I've got a better and simpler solution to our problem. We can disable the web service binding when the user navigates to a different date. There's no public API for this, but it's possible:

function navigationCommand(sender, eventArgs)
{
    var cmd = eventArgs.get_command();
    var SNC = Telerik.Web.UI.SchedulerNavigationCommand;
    if(cmd == SNC.NavigateToNextPeriod || cmd == SNC.NavigateToPreviousPeriod || cmd == SNC.SwitchToSelectedDay || cmd == SNC.NavigateToSelectedDate)
        sender._renderingManager = null; // Effectively disables web service binding
}

Notice that we're doing this in navigationCommand, not navigationComplete. I've also revised the list of commands that this code will execute for.

I hope this helps.

Kind regards,
Tsvetomir Tsonev
the Telerik team