Timeline View -> Day View

[Bill O'Neil]

I'm using the TIMELINE view to display a business week's worth of appointments.  Users can double click on a day to add a new "appointment" - but I'd like them to be able to click the header for a specific day and go to a (custom) view for the day's appointments.  Is there any way to make the timeslot header a link/linkbutton?  I do this fine from the MONTH view by intercepting the NAV client side event and  checking the command.

Thanks,
Bill

[Boyan Dimitrov]

Hello,

An easy and convenient way of achieving such functionality would be to to set a click event handler for all time slot header as shown in the code snippet below. Using RadAjaxManager you can pefrom an ajax request to the server and send the clicked time slot header text. This way you can set the RadScheduler selected date property to that value and change the RadScheduler view to DayView.
//markup code

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

//JavaScript

function pageLoad() {
    var $ = $telerik.$;
    var timeSlotHeaders = $(".rsHorizontalHeaderTable th div").click(function () {

        var date = new Date(this.textContent.trim());

        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
        ajaxManager.ajaxRequest(date);
    });
    var timeSlotHeaders = $(".rsHorizontalHeaderTable th ").css("cursor", "hand");
}

//code behind

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        DateTime currentDate = new DateTime();
        //here you can parse the date string stored in the e.Argument
        RadScheduler1.SelectedDate = currentDate;
        RadScheduler1.SelectedView = SchedulerViewType.DayView;
    }

Hope that this will be helpful.

Regards,
Boyan Dimitrov
Telerik