Unplanned
Last Updated: 08 Nov 2020 21:52 by Gerard
Wayne
Created on: 05 Mar 2020 13:59
Category: Scheduler
Type: Feature Request
4
Drag & Drop Events
I would like to be able to drag and drop items from a list of custom items into the calendar and create an appointment out of it.
4 comments
Gerard
Posted on: 08 Nov 2020 21:52
currently  we use a scheduler in an asp.net project which uses a grid where we drag a row into a schedule cell which which grabs the several row values  for processing and setting such as getting the customer and task a standard time and equipment allocation for the task (if known) and then sets up the entry in the various schedules / gantt  charts we also want to use utc as a base time time because some items or tasks can go over 2 or more time zones 
ADMIN
Marin Bratanov
Posted on: 06 Mar 2020 09:20

Hi Wayne,

Thank you for your feedback.

Dragging is still something Blazor can't really do, but I imagine that something like this might be possible without waiting for the framework:

  1. You handle the dragstart event on your elements and populate a field in the ViewModel with the data you will need. This will also let you handle the dragged item appearance, image, and so on. For exapmle, and image in a grid cell template can give you the ability to attach the dragstart handler, and the row data.
  2. The scheduler fires an OnDrop event that gives you an appointment in the event arguments. Ideally, it will have a start and end pre-populated with the time slot/area over which the drop happened (hopefully this will be possible - in a Month View that would be possible by handling individual drop events for each month cell - but for other cases maybe we will need a way to let the scheduler know which element is being dragged, maybe through an instance method). In any case, you should get an appointment. You now have this appointment and your data so you can populate more fields in it (e.g., title, some metadata tweak durations).
  3. If you don't cancel the event the scheduler takes that appointment (with your additions) and adds it to its rendering. This would fire the OnCreate event where you can store that appointment in the data source.

Perhaps (maybe in v2), some built-in integration may be available between a scheduler and a grid where the dragging operation starts and the scheduler drop event will provide the grid row model in its event arguments for you. The key thing here is - how would that be exposed for configuration? How would the draggable element be defined for the grid.

On getting scheduler events for a given time frame - we are considering creating a method for this. Maybe it will be tied to recurring appointments, maybe it will be implemented separately, it's too early to tell at this stage.

Would that make sense?

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Wayne
Posted on: 05 Mar 2020 23:56

Hi Marin,

 

For my use case it would be create to have the scheduler bound to type T. That way when we drag an object of type T from a Grid and drop it onto a day, the even can return an object of type SchedulerTaskAdded<T> that has attributes related to the date/day the type was dropped onto and return a copy of that object in the even for the controller to do the neccessary plumbing.

Of course this is just a quick mind-map of how I think it would work and that all seems pretty trivial. The real question is, how does the control know what month/day the object was dropped into? I am probably still thinking from the Scheduler Component, but if I switch to a DroppableCalendarComponent then this makes sense. Display a calendar with days that we can adjust width/height to and capture the drop even on the div for those days.

It would be great if you could assign a custom function to determine "how full" the day is as it could be hours, maximum resources, stock availability etc..etc..

ADMIN
Marin Bratanov
Posted on: 05 Mar 2020 14:05

To anyone needing this - we'd appreciate your feedback on how you would expect this to be exposed (for example, how should the scheduler receive your dragged data so an appointment can be created).

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor