Post back on scheduler web service binding

4 posts, 0 answers
  1. Meera
    Meera avatar
    14 posts
    Member since:
    Mar 2012

    Posted 05 Jan 2014 Link to this post

    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
  2. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 08 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Meera
    Meera avatar
    14 posts
    Member since:
    Mar 2012

    Posted 08 Jan 2014 Link to this post

    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


  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    1746 posts

    Posted 13 Jan 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top