Drag appointment from outside Weekview-DateRange within Scheduler

[Frank]

I am trying to drag rows from a RadGrid containing all existing appointments to the scheduler in week-view. After dropping I want to check on collisions using your given clientside function overlapsWithAnotherAppointment.

Within the clientside RowDropping method I need to get the dragged appointment to pass it to overlapsWithAnotherAppointment. I tried getting this by using scheduler.get_appointments(). My problem now is the get_appointments() function only returns appointments which are visible within the Weekview-range.

We’re using Telerik 2011.2.915.40 using a custom SchedulerProvider in which we override the GetAppointments method. I can see this function does return all appointments, also the ones which are not visible.

What should I do so get_appointments() also returns the non-visible appointments ?

Thanks for any help,

Frank

Below are some code snippits of our implementation:


RadGrid from which rows are being dragged:

<telerik:RadGrid ID="rgActiviteiten" runat="server" GridLines="None" OnNeedDataSource="rgActiviteiten_NeedDataSource" Width="100%" AllowFilteringByColumn="false" ShowHeader="false" OnRowDrop="rgActiviteiten_RowDrop" DataKeyNames="Activiteit_ID" EnableViewState="false" >

    <ClientSettings AllowRowsDragDrop="True">

        <Selecting AllowRowSelect="True" />

        <ClientEvents OnRowDropping="rowDropping" OnRowDblClick="onRowDoubleClick" />

    </ClientSettings>

    <MasterTableView AutoGenerateColumns="False" DataKeyNames="Activiteit_ID" ClientDataKeyNames="Activiteit_ID" AllowFilteringByColumn="False">

        <Columns>

            <telerik:GridBoundColumn UniqueName="P_Naam" DataField="P_Naam" HeaderText="Product" ItemStyle-Wrap="false" ItemStyle-Width="335" />

            <telerik:GridBoundColumn DataField="Activiteit_ID" UniqueName="Activiteit_ID" Visible="true" />

        </Columns>

    </MasterTableView>

</telerik:RadGrid>

 
Scheduler to which rows will be dropped:

<telerik:RadScheduler ID="rsSchedulerWithProvider" runat="server" ProviderName="MyDbSchedulerProvider"

        Width="1018px" Height="100%" Culture="nl-NL" FirstDayOfWeek="Monday" SelectedView="WeekView"

        HoursPanelTimeFormat="HH:mm" CustomAttributeNames="ActiviteitType_ID, Omschrijving, Activiteit_ID, Soort"

        EnableRecurrenceSupport="false" EnableExactTimeRendering="True" OnClientNavigationCommand="OnNavigationCommand"

        AllowDelete="false" AllowEdit="false" OnAppointmentsPopulating="rsSchedulerWithProvider_AppointmentsPopulating"

        OnTimeSlotCreated="rsSchedulerWithProvider_TimeSlotCreated" OnResourcesPopulating="rsSchedulerWithProvider_ResourcesPopulating"

        OnClientAppointmentEditing="OnClientAppointmentEditing" OnClientAppointmentInserting="CreateAppointment">

        <AppointmentTemplate>

                <i><%# Eval("Omschrijving")%></i>

        </AppointmentTemplate>

        <WeekView DayEndTime="22:00:00" WorkDayStartTime="08:00:00" WorkDayEndTime="22:00:00" />

        <DayView DayEndTime="22:00:00" WorkDayStartTime="08:00:00" WorkDayEndTime="22:00:00" />

        <MonthView UserSelectable="false" />

        <TimelineView UserSelectable="false" />

</telerik:RadScheduler>

 
ClientSide function which handles the drop:

function rowDropping(sender, eventArgs) {

 

    // Fired when the user drops a grid row

    var htmlElement = eventArgs.get_destinationHtmlElement();

 

    // Bij slepen van een appointment geen check

    var isActiviteit = sender.get_id().indexOf('rgActiviteiten') > -1;

 

    if (isPartOfSchedulerAppointmentArea(htmlElement)) {

        // The row was dropped over the scheduler appointment area

        // Find the exact time slot and save its unique index in the hidden field

        var timeSlot = scheduler._activeModel.getTimeSlotFromDomElement(htmlElement);

        $get("TargetSlotHiddenField").value = timeSlot.get_index();

 

        var activiteit = null;

        if (isActiviteit) {

            var activiteit_id = eventArgs.get_draggedItems()[0].getDataKeyValue("Activiteit_ID");

             

            // NEXT LINE WILL GO WRONG SINCE scheduler.get_appointments() DOESN'T CONTAIN THE DRAGGED ITEM IF IT'S ORIGINAL DATE WAS OUTSIDE THE WEEKVIEW-RANGE

            activiteit = scheduler.get_appointments().findByID(activiteit_id);

        }

 

        // Calculate the end time of the new appointment

        // By default, new appointments span 2 rows, so we multiply the minutesPerRow property by 2

        var endTime = new Date(timeSlot.get_startTime().getTime() + scheduler.get_minutesPerRow() * minute * 2);

 

        // Check if the new appointment is overlapping with one of the existing appointments

        var app = overlapsWithAnotherAppointment(activiteit, timeSlot.get_startTime(), endTime);

        if ( app >= 0 ) {              

                eventArgs.set_cancel(true); // Cancel the event to prevent showing the insert form

        }

 

        // The HTML needs to be set in order for the postback to execute normally

        eventArgs.set_destinationHtmlElement("TargetSlotHiddenField");

    }

    else {

        // The node was dropped elsewhere on the document

        eventArgs.set_cancel(true);

    }

}

[Ivana]

Hi Frank,

Yes you are right, get_appointment() method does return only the appointments visible in the selected view.
As far as I understand your scenario, you want to display an overlapping confirmation dialog when dragging appointments from RadGrid. Well, for the implementation of this scenario you do not need to have all the appointments to check if there is an overlapping situation -- what you need is only the appointments rendered in the current view.

If the idea is not to allow an appointment to be dragged more then once, then you could use the approach shown in the following online demo: [http://demos.telerik.com/aspnet-ajax/scheduler/examples/draganddropintegration/defaultcs.aspx?product=scheduler] -- where the appointments are removed from the RadGrid when they are dragged to RadScheduler.

Regards,
Ivana
the Telerik team

[Frank]

Thanks for the answer and hint with the demo.

I see I haven’t been accurate enough with our scenario, my bad.
I need the dragged appointment to re-schedule it, including a check on resource-level.

For example:
Appointment A, 16th March, 8-9h with resources “Car” and “Truck”
Appointment B, 1st April with resources “Car” and “Bike”
Appointment C, 2nd April with resource “Bike”

Now I want to reschedule Appointment B to the 16th April at 8h30. This shouldn’t be possible as the resource “Car” already has an appointment within that timeslot.
However, moving appointment C should be possible, as Bike has no overlapping appointment within timeslot.

To check on resource-level, I need to get the appointment itself to call get_resources()
But since scheduler.get_appointments() doesn’t return the dragged item if it was outside the visible range, I can’t get to its resources, right ?

My work-around could be to call a AJAX method to get all resources, or use the ItemDataBound method of the RadGrid to add those to the attributes maybe.

Regards,
Frank

[Ivana]

Hello Frank,

Thanks for clarifying your scenario. Well, one possible approach that I can think of is to keep the resources of an appointment into the RadGrid (as a separate column for example which will not be displayed if you want to hide that information). Here is how to access a column by its unique name: http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-getcellbycolumnuniquename.html.

If this is not helping, it would be very helpful to us if you could open a support ticket and send us a sample project of your attempts so we will be able to successfully workaround your scenario.

Kind regards,
Ivana
the Telerik team

[Frank]

Sorry for the late reply.

 

I’ve fixed it using an AJAX-call which gets the ID, sends a request to a webmethod and gets the result.
This gives us less work and more possibilities with checks.

For the record; code now looks like this (snippets):

C#:

public class Afspraak {

    public DateTime Start { get; set; }

    public DateTime? Eind { get; set; }

    public int? Activiteit_ID { get; set; }

    public int? Planning_ID { get; set; }

    public int? Inschrijving_ID { get; set; }

    public int? InschrijvingActiviteit_ID { get; set; }

    public string Resources { get; set; }

}

 

[WebMethod]

public static int GetOverlappendeAfspraak(Afspraak afspraak) {

  // Code logic which checks for overlap

}

 

JavaScript:

function rowDropping(sender, eventArgs) {

  var afspraak = new Object();

  afspraak.Start = newStartTime;

  afspraak.Activiteit_ID = eventArgs.get_draggedItems()[0].getDataKeyValue("Activiteit_ID");

 

  var overlappende_activiteit = -1;

  $.ajax({

       type: "POST",

       url: "Scheduler2.aspx/GetOverlappendeAfspraak",

       data: "{'afspraak': " + JSON.stringify(afspraak) + "}",

       contentType: "application/json; charset=utf-8",

       dataType: "json",

       async: false,

       success: function (msg) {

           overlappende_activiteit = (msg.d);

       },

       error: function (XMLHttpRequest, textStatus, errorThrown) {

           alert("ERROR status:" + textStatus + " error:" + errorThrown);

       }

  });

  ...
}