Delete appointment from scheduler client side button click.

4 posts, 0 answers
  1. Milton
    Milton avatar
    6 posts
    Member since:
    Feb 2017

    Posted 01 Mar 2018 Link to this post

         I am trying to remove an appointment from the radscheduler on client side. I have a standard asp button that will fire a javascript function but I'm not sure on the syntax for removing an appointment from the radscheduler. Could I get some guidance. Thanks.

     

    function DeleteAnAppointment()
            {
                $("#" + "<%= RadScheduler1.ClientID %>").deleteAppointment(2);
            }
     
    <asp:LinkButton runat="server" ID="btnCancelAppointment" CssClass="btn btn-default" OnClientClick="DeleteAnAppointment();">
                            CANCEL
                        </asp:LinkButton>
     
    <telerik:RadScheduler ID="RadScheduler1" runat="server"
                            StartInsertingInAdvancedForm="true"
                            EnableDescriptionField="true"
                            OverflowBehavior="Auto"
                            OnClientAppointmentClick="appointmentClick"
                            OnClientAppointmentMoving="appointmentMoving"
                            OnClientFormCreated="formCreated"
                            OnAppointmentClick="RadScheduler1_AppointmentClick"
                            OnAppointmentInsert="RadScheduler1_AppointmentInsert"
                            Height="700px"
                            Width="100%"
                            Skin="Bootstrap"
                            Culture="en-GB"
                            AdvancedForm-Modal="True"
                            MinutesPerRow="15"
                            HoursPanelTimeFormat="hh:mm tt"
                            NumberOfHoveredRows="1"
                            SelectedView="WeekView"
                            OnTimeSlotCreated="RadScheduler1_TimeSlotCreated"
                            AllowEdit="false"
                            AllowInsert="true"
                            AllowDelete="false"
                            AgendaView-UserSelectable="True"
                            TimelineView-UserSelectable="False"
                            Localization-AdvancedDescription="Notes"
                            ShowFooter="False"
                            ShowAllDayRow="False"
                            DayView-UserSelectable="False" OnAppointmentCreated="RadScheduler1_AppointmentCreated" OnDataBound="RadScheduler1_DataBound">
                        <MonthView ReadOnly="True" VisibleAppointmentsPerDay="4" />
                        <AdvancedForm Modal="True" EnableCustomAttributeEditing="true" />
                        <TimelineView UserSelectable="False" />
                        <AgendaView UserSelectable="True" />
                        <AppointmentTemplate>
                            <div style="font-weight:bold;"><%# Eval("ApptClientID") %></div>
                            <div><%# Eval("Title") %> <%# Eval("Surname") %></div>
                        </AppointmentTemplate>
                    </telerik:RadScheduler>
  2. Vessy
    Admin
    Vessy avatar
    1871 posts

    Posted 06 Mar 2018 Link to this post

    Hi Milton,

    In order to use the client-side API of the Scheduller you have to get reference to its client-side object using the $find() method, while the standard jQuery selector returns its html element.
    $find("<%= RadScheduler1.ClientID %>").deleteAppointment(appointment);


    You can als find useful the following forum thread:
    https://www.telerik.com/forums/delete-appointment-from-clientside#fGqrLnL1B0uZWdev41e8Lw

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Milton
    Milton avatar
    6 posts
    Member since:
    Feb 2017

    Posted 06 Mar 2018 in reply to Vessy Link to this post

    Hi Vessy,

    Thank you for your reply. This has moved me on from where I was. I am now able to get the appointment and fire the delete function. I can see that this is hitting the server and hitting the appointment delete event however the appointment itself is not being removed!

    I have tried rebinding the scheduler and also updating the update panel. But I am a bit lost as to why the appointment remains. On every post back I can see that the appointment is still in the scheduler.

    What am I missing?

    function DeleteAnAppointment()
            {
                var scheduler = $find('<%= RadScheduler1.ClientID %>');
                var id = $("#<%= hfAppointmentID.ClientID %>").val();
                var appointments = scheduler.get_appointments();
                var appointment = appointments.findByID(id);
                appointment._allowDelete = true;
     
                scheduler.deleteAppointment(appointment);
            }

     

    protected void RadScheduler1_AppointmentDelete(object sender, AppointmentDeleteEventArgs e)
            {
                RadScheduler1.Rebind();
                UpdatePanel1.Update();
            }
  4. Vessy
    Admin
    Vessy avatar
    1871 posts

    Posted 07 Mar 2018 Link to this post

    Hi Milton,

    The DeleteAppointment event is triggered just efore the datasource of the scheduller to be updated with the deleted item. Long story made short - in this moment the datasource is still not updated and you are rebinding the Scheduller to the same Datasource it is already showing:
    https://docs.telerik.com/devtools/aspnet-ajax/controls/scheduler/server-side-programming/server-events/appointmentdelete

    Can you elaborate on why do you need to rebind the control explicitly? By design the Scheduller updates itself automatically when the deleteAppointment() method is called, unless there is some additional logic preventing that. If you do not have such, please, remove the update panels on the page and see if the datasource will be updated properly.

    Regards,
    Vessy
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top