Post back on scheduler web service binding

[Meera]

Hi,

I have a rad scheduler to show appointments and i have recently modified it to use web service binding. I have few client side events on it and one of it is OnClientAppointmentClick. When i click on an appointment, i want a new rad panel to show up adjacent to the scheduler. For this i use a dummy button to post back on the OnClientAppointmentClick event. The issue is that after modifying  the scheduler to web service binding, the OnClientAppointmentClick event seems to take for ever to load and it is affecting the performance. I am not sure if this is caused because post back is causing a conflict to the web service or not.

<telerik:RadScheduler runat="server"  ID="rsTicketsSchedule"
                                    OnResourcesPopulating="rsTicketsSchedule_ResourcesPopulating"
                                    SelectedView="TimelineView"
                                    OnTimeSlotCreated="rsTicketsSchedule_TimeSlotCreated"
                                    OnClientAppointmentsPopulated="OnClientAppointmentsPopulated"
                                          OnClientAppointmentsPopulating="OnClientAppointmentsPopulating"
                                    OnClientResourcesPopulating="OnClientResourcesPopulating"
                                    AppointmentStyleMode="Default"
                                    OnClientAppointmentClick="singleClick"
                                    OnClientAppointmentCreated="OnAppointmentCreated"
                                    OnClientAppointmentDoubleClick="rsClientAppointmentDoubleClick"
                                    OnClientAppointmentMoveEnd="AppointmentMoved"
                                    OnClientAppointmentResizeStart="OnAppointmentResizeStart"
                                    OnClientAppointmentResizeEnd="OnAppointmentResizeEnd"
                                    OnClientAppointmentWebServiceDeleting="OnAppointmentDeleting"
                                    OnClientAppointmentWebServiceUpdating="OnAppointmentUpdating"
                                    OnClientRequestSuccess="OnClientRequestSuccess"
                                    OnClientRequestFailed="OnClientRequestFailed"
                                    OnClientAppointmentMoveStart="StopTimer"
                                    OnClientAppointmentDataBound="OnClientAppointmentDataBound"
                                    OnClientDataBound="onSchedulerDataBound"
                                    AllowInsert ="False"
                                    DisplayDeleteConfirmation="True"
                                    Localization-HeaderToday="Today"
                                    EnableCustomAttributeEditing="True"
                                    EnableDescriptionField="True"
                                    Height="100%"
                                    EnableExactTimeRendering="true"
                                    EnableViewState="true"
                                    OverflowBehavior="Scroll"
                                    ShowAllDayRow ="false"
                                    OnClientAppointmentContextMenu ="OnClientAppointmentContextMenu"
                                    OnClientAppointmentContextMenuItemClicked="handleClick"
                                    OnClientNavigationComplete = "OnClientNavigationComplete"
                                    OnClientNavigationCommand  = "OnClientNavigationCommand"
                                >

                                <DayView UserSelectable="True" GroupBy="TechName" GroupingDirection="Horizontal" />
                                <WeekView UserSelectable="True" GroupBy="TechName" GroupingDirection="Vertical"  />
                                <MonthView UserSelectable="True" GroupBy="TechName" GroupingDirection="Vertical"  />

                                <TimelineView
                                    GroupBy="TechName"
                                    ColumnHeaderDateFormat="h:mm tt"
                                    GroupingDirection="Vertical"
                                    HeaderDateFormat="MM/dd/yyyy h:mm tt"
                                    NumberOfSlots ="21"
                                    SlotDuration="00:30:00"
                                    StartTime="08:00:00"  />

                                      <WebServiceSettings   Path="WorkforceServices/M4SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />

                                <AppointmentContextMenus >
                                    <telerik:RadSchedulerContextMenu ID="RsTicketsScheduleContextMenu" runat="server"   > </telerik:RadSchedulerContextMenu>
                                </AppointmentContextMenus>

                                <ResourceTypes>
                                    <telerik:ResourceType Name="TechName" />
                                    <telerik:ResourceType Name="TicketState" />
                                </ResourceTypes>

                      </telerik:RadScheduler>

This is the client side event I have the issue with:

OnClientAppointmentClick="singleClick"

function singleClick(sender, eventArgs) {
    var apptID1 = eventArgs.get_appointment().get_id();
    apptIDInfo = "ShowRadTabStrip|" + apptID1 + "|ApptID";
    __doPostBack("TestPanel1UpdBtn", apptIDInfo);  //Causes Postback to show RadTabstrip for TicketInfo
    return false;
}

Is there any way I can improve this?

Thanks,

Meera

[Boyan Dimitrov]

Hello,

I would like to clarify that full page post-back will create the RadScheduler control, request the appointments and populate the RadScheduler. This will happen each time when user clicks on an appointment. In this case I would suggest to initiate Ajax in order to update(show/hide) the RadTabStrip control. This will update only part of the page and the RadScheduler will not be affected at all. Please find attached a project that shows how you can set new text for the RadTabStrip tab if you click on an appointment without full page post-back.
//markup code

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

<telerik:RadTabStrip ID="RadTabStrip1" runat="server">
          <Tabs>
              <telerik:RadTab Text="Sample tab"></telerik:RadTab>
          </Tabs>
      </telerik:RadTabStrip>

//JavaScript

` function clientAppointmentClick(sender, args) {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequest("new text");
        }

//code behind

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            RadTabStrip1.Tabs[0].Text = e.Argument;
        }

Please refer to this help article for more information about the RadAjaxManager.

Regards,
Boyan Dimitrov
Telerik

[Meera]

Thank you for your response.

I have modified my code according to your suggestions but the issue i am facing right now is that the tab does not show at all.
The scenario is that the scheduler take up the full space of the web page and when I click an appointment, I am re-sizing the scheduler so that the radTabStrip shows adjacent to the scheduler on left. In this case, i am assuming that i need to ajaxify the scheduler too ?

Something like:

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

When i do this, the situation becomes similar to a full post back. Is it possible to expand the rad tab without affecting the panel containing the scheduler?

Thanks,
Meera

[Boyan Dimitrov]

Hello,

An easy and convenient way of achieving such functionality would be to wrap the RadScheduler control and the RadTabStrip in two div elements. When user clicks on an appointment you can change the width values of both div containers. in order both RadScheduler and the RadTabStrip to show next to each other on the page I would suggest using the css float properties for those containers.

Please note that when modifying the width value of the RadScheduler container element you should call the repaint method of the RadScheduler client-side object.



Regards,
Boyan Dimitrov
Telerik