How do i route more click to timeline

[Debbie Roberts]

Hi Telerik,

Really enjoying integrating the Scheduler Control, found the documentation great and control simple to integrate.

I’m using control in the web service mode but have two problems:

1) In Month view when there is more than one appointment in a day slot when "more..." is clicked i would like to handle this and display the timeline view.

2) In the timeline view i would like to switch of the resize handle as im only displaying start dates.

Thanks,

Debbie

Markup:

                <telerik:RadScheduler ID="RadScheduler1" runat="server"
                    OnClientAppointmentsPopulating="doClientAppointmentsPopulating"
                    OnClientAppointmentInserting="doClientAppointmentInserting"
                    OnClientAppointmentEditing="doClientAppointmentEditing"
                    OnClientAppointmentDeleting="doClientAppointmentDeleting"
                    OnClientAppointmentContextMenu="doClientAppointmentContextMenu"
                    OnClientAppointmentContextMenuItemClicked="doClientAppointmentContextMenuItemClicked"
                    OnClientTimeSlotContextMenu="doClientTimeSlotContextMenu"
                    OnClientTimeSlotContextMenuItemClicked="doClientTimeSlotContextMenuItemClicked"
                    Localization-ConfirmDeleteText="Are you sure you want to delete this announcement."
                    Localization-ContextMenuAddAppointment="New Announcement"
                    DisplayDeleteConfirmation="True"
                    TimelineView-NumberOfSlots="7"
                    SelectedView="MonthView"
                    GroupingDirection="Vertical"
                    FirstDayOfWeek="Monday"
                    LastDayOfWeek="Sunday"
                    DataKeyField="ID"
                    DataSubjectField="Subject"
                    DataStartField="Start"
                    DataEndField="End"
                    DataRecurrenceField="RecurrenceRule"
                    DataRecurrenceParentKeyField="RecurrenceParentID"
                    OverflowBehavior="Expand"
                    ShowAllDayRow="true"
                    ShowFullTime="false"
                    ShowViewTabs="true"
                    StartEditingInAdvancedForm="true"
                    StartInsertingInAdvancedForm="true">

                    <WebServiceSettings
                        Path="~/AdminV9/News/NewsSchedulerWS.asmx"
                        ResourcePopulationMode="Manual" />

                    <%-- Header formating --%>
                    <DayView
                        UserSelectable="false" />
                    <WeekView
                        UserSelectable="false" />
                    <MonthView
                        UserSelectable="true"
                        HeaderDateFormat="MMM, yyyy"
                        AdaptiveRowHeight="false"
                        VisibleAppointmentsPerDay="2" />
                    <TimelineView
                        UserSelectable="true"
                        HeaderDateFormat="MMM dd, yyyy"
                        ColumnHeaderDateFormat="ddd dd" />
                    <MultiDayView
                        UserSelectable="false"  />

                    <%-- Context menus --%>
                    <TimeSlotContextMenuSettings EnableDefault="true" />
                    <TimeSlotContextMenus>
                        <telerik:RadSchedulerContextMenu>
                            <Items>
                                <telerik:RadMenuItem Text="New Announcement" Value="CustomAdd" />
                                <telerik:RadMenuItem Text="Go to today" Value="CommandGoToToday" />
                            </Items>
                        </telerik:RadSchedulerContextMenu>
                    </TimeSlotContextMenus>

                    <AppointmentContextMenuSettings EnableDefault="true" />
                    <AppointmentContextMenus>
                        <telerik:RadSchedulerContextMenu>
                            <Items>
                                <telerik:RadMenuItem Text="Edit" Value="CommandEdit" />
                                <telerik:RadMenuItem Text="Delete" Value="CommandDelete" />
                            </Items>
                        </telerik:RadSchedulerContextMenu>
                    </AppointmentContextMenus>

                    <%--Forms --%>
                    <AdvancedForm Modal="true" />

                </telerik:RadScheduler>

[Peter]

Hello Debbie,

1. Please, try the following code:

protected void RadScheduler1_NavigationCommand(object sender, SchedulerNavigationCommandEventArgs e)
   {
       RadScheduler scheduler = (RadScheduler)sender;
       if (e.Command == SchedulerNavigationCommand.SwitchToSelectedDay)
       {
           e.Cancel = true;
           scheduler.SelectedDate = e.SelectedDate;
           scheduler.SelectedView = SchedulerViewType.TimelineView;
       }
   }

2. You can use the following css to achieve this:

.rsTimelineView .rsAptResize
   {
       visibility:hidden !important;
   }

Best wishes,
Peter
the Telerik team

[Debbie Roberts]

Thanks Peter,

The solutions worked great, because I’m using web services I needed to handle OnClientNavigationCommand.

The client script logic is just the same as in code behind above, great to have client side and code behind so close to each other :)

                if (eventArgs.get_command() == Telerik.Web.UI.SchedulerNavigationCommand.SwitchToSelectedDay) {
                    eventArgs.set_cancel(true);
                    sender.set_selectedView(Telerik.Web.UI.SchedulerViewType.TimelineView);
                }

 

[Kevin]

I had this same problem when trying to fulfill business requirements. The downside to the solution that's been given is that it also causes the day number in the time slot (which is a link that drills into the day view) will also be caught and directed to the timeline view.

I was able to create a solution on the client side with the following code snippet in my wrapper control. Hope this is useful for someone.

var scheduler = this.get_scheduler();

 

//short default handler

scheduler._eventMap.addHandlerForClassName("click", "rsShowMore", null);

 

var clickHandler = Function.createDelegate(this, this._scheduler_moreClick);

 

$(function() {

    $(scheduler.get_element()).find('.rsShowMore')

         .click(function(e) { clickHandler(e); });

});


 ....Handler:

_scheduler_moreClick: function(e)

{

    var scheduler = this.get_scheduler();

    var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(e.target);

    scheduler.postback({

       Command: "SwitchToTimelineView", SourceSlotIndex: timeSlot.get_index() });

}