This is a migrated thread and some comments may be shown as answers.

scheduler drop event for external items

11 Answers 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RR
Top achievements
Rank 1
RR asked on 26 Jul 2019, 05:23 AM

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. 

11 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 29 Jul 2019, 11:12 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
RR
Top achievements
Rank 1
answered on 30 Jul 2019, 03:25 AM

Thank you for the reply. 

Do you have any typescript/ Vue example for this?

0
Ianko
Telerik team
answered on 30 Jul 2019, 06:53 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
RR
Top achievements
Rank 1
answered on 30 Jul 2019, 09:38 AM

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" 
0
Ianko
Telerik team
answered on 30 Jul 2019, 10:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
RR
Top achievements
Rank 1
answered on 31 Jul 2019, 06:09 AM
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.
0
RR
Top achievements
Rank 1
answered on 31 Jul 2019, 11:45 AM

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.

 

 

0
Ianko
Telerik team
answered on 01 Aug 2019, 03:10 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
RR
Top achievements
Rank 1
answered on 08 Aug 2019, 05:14 AM

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

0
RR
Top achievements
Rank 1
answered on 08 Aug 2019, 05:47 AM

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>

 

 

0
Veselin Tsvetanov
Telerik team
answered on 09 Aug 2019, 10:22 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
RR
Top achievements
Rank 1
Answers by
Ianko
Telerik team
RR
Top achievements
Rank 1
Veselin Tsvetanov
Telerik team
Share this question
or