scheduler drop event for external items

[RR]

Is there way to identify drop from external item ie. a list item from a list. into the scheduler?

I want to create appointments on drop event inside schedular.

Thank you in advance. 

[Ianko]

Hi Roshan,

In order to accomplish this requirement you will need to implement some custom code. There is no automatic utility that can help you out with that.

A similar case is showcased for the Grid and Scheduler (Drag and Drop between Kendo UI Grid and Scheduler), but the same would be almost the same for integrating any other widget.

Regards,
Ianko
Progress Telerik

[RR]

Thank you for the reply. 

Do you have any typescript/ Vue example for this?

[Ianko]

Hello Roshan,

I am afraid there is no ready-to-use Vue or TypeScript example for that case. However, the Scheduler and Grid wrapper components for Vue are not different from the ones in the example. The draggable utility is available only as a Kendo widget and its usage is absolutely the same as in the example shared. 

Regards,
Ianko
Progress Telerik

[RR]

hi,

When I drag and item from the list to the schedular it shows  ø icon on dragged element. I have set following properties in  kendo-scheduler as well. What could be the reason for this?

:dropzone="true"    :draggable="true"

[Ianko]

Hi Roshan,

The kendo-scheduler component does not utilize such props: https://www.telerik.com/kendo-vue-ui/components/scheduler/api/Scheduler/. Can you share some code to see how the Kendo Draggable is configured with the Scheduler component?

Regards,
Ianko
Progress Telerik

[RR]

Ok. I was under the impression that is how draggable is set. I only set those. Please let me know how to configure Kendo Draggable to scheduler. Cannot find any reference other than this: draganddrop  which is for jquery.

[RR]

This is the code snippet.

<kendo-scheduler
      class="Scheduler"
      :key="updateCounter"
      :data-source="dataset"
      :date="getDate"
      :height="785"
      :selectable="true"
      @add="onAdd"
      @change="onChange"
      :group="scheduleGroup"
      :all-day-event-template="templateAllDayEvent"
      draggable
      @dragenter="onDragEnter"
      @drop="onDrop"
    >
</kendo-scheduler>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
...
export default class  Scheduler extends Vue {
onDragEnter (info: any) {
    console.log('onDragEnter', info);
  }
onDrop (info: any) {
    console.log('onDrop', info);
  }
}
</script>

 

And I am trying to drag n drop an item from a list into the scheduler and want to trigger any event on the drop. Following is my list.

<kendo-listbox id="optional"
                 :draggable="true"
                 :dropzone="true">
                  <option>Steven White</option>
                  <option>Nancy King</option>
                  <option>Nancy Davolio</option>
                  <option>Robert Davolio</option>
                  <option>Michael Leverling</option>
                  <option>Andrew Callahan</option>
                  <option>Michael Suyama</option>
         </kendo-listbox>

 

But when I drag item over to the scheduler it shows "not allowed" sort of icon on the dragged mouse pointer.

 

 

[Ianko]

Hello Roshan,

The Drag and Drop utility is available only fot jQuery. But the Kendo UI for Vue are wrappers of the Kendo UI widgets and thus, you can use it the same way as you would use it with Kendo widgets. 

Here you are a very basic example of Scheduler with LIstBox dragging compatibility: https://codesandbox.io/s/kendo-scheduler-drop-ljgyo. 

Regards,
Ianko
Progress Telerik

[RR]

hi, this is great.

But in  scheduler for vue "databound" method in not firing on dropping a target inside scheduler. In fact i couldn't find any method firing on "dropping" an "item" inside scheduler. I tested all the events in SchedulerEvents.  Any idea on this?

Thank you

[RR]

This is my scheduler

<kendo-scheduler
     id="kendoScheduler"
     class="Scheduler"
     :key="updateCounter"
     :data-source="eventList"
     :date="getDate"
     :height="785"
     :selectable="true"
     @add="onAdd"
     @change="onChange"
     @edit="onEdit"
     :group="scheduleGroup"
     :all-day-event-template="templateAllDayEvent"
     @moveend="onMoveEnd"
     :snap="true"
     @resizeend="onResizeEnd"
     @databound="onDataBound"
     >

     <kendo-scheduler-view
       :type="'day'"
       :selected="IsDayView"
       :editable-destroy="false"
       :event-template="templateDay"
     ></kendo-scheduler-view>
     <kendo-scheduler-view
       :type="'week'"
       :selected="IsWeekView"
       :editable-destroy="false"
       :event-template="templateWeek"
     ></kendo-scheduler-view>
     <kendo-scheduler-view
       :type="'month'"
       :selected="IsMonthView"
       :editable-destroy="false"
       :event-template="templateMonth"
     ></kendo-scheduler-view>
     <kendo-scheduler-view
       :type="'timeline'"
       :selected="IsTimeLineView"
       :editable-destroy="false"
       :event-template="templateTimeline"
     ></kendo-scheduler-view>
     <kendo-scheduler-resource
       :field="'resourceId'"
       :name="'scheduleResources'"
       :title="'resource'"
       :data-source="resourceDataSource"
     ></kendo-scheduler-resource>
   </kendo-scheduler>

 

And the list

<kendo-listbox ref="listbox"
               :draggable="true"
                 style="height:280px;">
                 <option>Steven White</option>
                 <option>Nancy King</option>
                 <option>Nancy Davolio</option>
                 <option>Robert Davolio</option>
                 <option>Michael Leverling</option>
                 <option>Andrew Callahan</option>
                 <option>Michael Suyama</option>
             </kendo-listbox>

 

 

[Veselin Tsvetanov]

Hello Roshan,

Please, review again the CodeSandbox sample, that my colleague Yanko has previously sent. You will notice that the drop event is present in the DropTargetArea widget, which gets initialized on top of the Scheduler component. If that does not help, please, modify the sample, so that it reproduces the issue that you have faced and send it back to us.

Regards,
Veselin Tsvetanov
Progress Telerik