[ANGULAR] Drag from scheduler to grid

[saki]

Actually, you can the css class, for example .this-is-drop-target, to multiple elements so each will then be a valid drop target.

[vu cuong]

Dear saki,
Thank you for your response

Just 1 more thing: how I can get start date and end date of the event when I drag around (like the one in the tooltip)?
I have already implement the following but it is incorrect:
rect = Rectangle.client(context.element, DomHelper.up(context.target, source.config.dropTargetSelector)),
startDate = schedule.getDateFromCoordinate(DomHelper.getTranslateX(context.element), 'round', false),
endDate = schedule.getDateFromCoordinate(rect.right, 'round', true, true)

Thanks

[alex.l]

Hi vu cuong,

Please try this https://bryntum.com/docs/scheduler/#Scheduler/view/mixin/TimelineDateMapper#function-getDateFromXY

Example:

        const
            me                   = this,
            { left, right, top } = context.element.getBoundingClientRect(),
            startDate            = scheduler.getDateFromXY([left, top], 'round', false),
            endDate              = scheduler.getDateFromXY([right, top], 'round', false);

[vu cuong]

Hi alex.l,
Thank you for your response but I'm afraid that your example is correct only when we restrict scheduler to (constrainDragToTimeline = true) but in my case we allow to drag from scheduler to the grid (meaning constrainDragToTimeline = false) these dates will be incorrect
Please kindly help me with this case

[saki]

is correct only when we restrict scheduler

The dates can be calculated only while the dragged event is in the scheduler area. There's no way how scheduler could know what the dates should be when the dragged event is outside. Here comes your logic:

• What do you want to appear in the grid?
• What dates you want in the grid? Original? Empty? Calculated?

You need to answer these questions yourself and set the relevant fields on the drop.

[vu cuong]

Dear saki,
My drag is still inside the scheduler area and now the tooltip still show exact start time and end time when I drag around whether I set constrainDragToTimeline true or false
I need these dates (like shown in the tooltips) to set our event properties after drop but I cannot get it
Thanks

[saki]

Well, you need to save the desired values at some point of drag and retrieve them on drop. I'm not truly certain that I fully understand what do you want to achieve. What I only think of that while dragging, dates are valid inside scheduler but become invalid/irrelevant when dragged outside.

Could you elaborate what exactly is the end result? Also, a showcase that we can run, investigate and debug would help to expedite the solution.

[vu cuong]

Dear saki,
Thank you for your quick response
I use the example of https://www.bryntum.com/examples/scheduler/dragfromgrid/ so I send you only 3 files that I have modified for our use case (if you need the full app, pls kindly let me know)

In this example you can see that the drag is for drag from grid into scheduler, the dates are ok but for dragEvent is used for drag event inside the scheduler, the dates are incorrect (but if I change constrainDragToTimeline in config file to true then the dates are ok but in my case I need to drag event outside the scheduler so I cannot set it to true and with this I do not need dates)

[saki]

The files look like from a previous version, sure before 4.1.0 and the application does not build after replacing the files in the current version. Generally we do not support old versions so upgrade please and then re-post the complete application here (without node_modules, of course).

Also, you refer to a non-framework drag from grid example, however, the files apparently belong to the Angular version of the example. So, do we work with Angular or vanilla example?

[vu cuong]

Dear saki,
Yes, I'm now using angular version so please study with angular version (actually I do not know that the angular version exist on your website so I refer to the example that I know)
I will try to upgrade to latest version and send you the example but I think in general it's still the same
Thanks