Delete appointment from scheduler client side button click.

[Milton]

     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>

[Vessy]

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

[Milton]

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();
        }

[Vessy]

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