Our pure JavaScript Scheduler component


[ANGULAR] dragged the element is not rendered correctly when constrainDragToTimeline = false

Post Reply

Post by saki »

Actually, the element is cloned; we would need the opposite. If we take a look at the HTML markup of your original example we see:

<div class="b-sch-event-content" role="presentation" data-task-bar-feature="content">
    <app-scheduling-board-event _nghost-ng-c3939846535="" ng-version="17.3.12">
        <div _ngcontent-ng-c3939846535="">
            <p _ngcontent-ng-c3939846535="">First Task</p>
        </div><!--ng-container--><!--bindings={
             "ng-reflect-ng-if": "[object Object]"
        }--><!--container-->
    </app-scheduling-board-event>
</div>

so the custom element app-scheduling-board-event doesn't even have any usable attributes and as such cannot be fully cloned by JavaScript because JavaScript is agnostic of Angular running behind and cannot invoke an Angular functionality. In fact, at the time of dragging the Angular has already been transpiled into JavaScript.

The cloning is actually creating a new element with same tag and attributes.

However, if the markup would be:

<app-scheduling-board-event text="First Task"></app-scheduling-board-event>

then cloning boils down to cloning a HTML element and having all necessary attributes thereof.

(If we have constrainDragToTimeline: true then no cloning takes place and we drag the original.)

Post by steinbach.remberg »

I meant to use the const proxy = element.cloneNode(true) as HTMLElement; method to deep clone the whole html element including the nodes, so that it does not have to be rerendered and rely on angular.

You are using this for example in your example for the custom drag from a grid demo for the DragHelper
https://bryntum.com/products/scheduler/examples/drag-from-grid-custom/ in the app.module.js in the region "lib/Drag.js". We are using it as well to be able to drag and drop from our custom grid. That works really nice!

For now we made it work with passing the necessary info extra, but it would still be amazing, if in the future we could just do a deep copy and avoid the extra data on the Dom.

Post by saki »

Yes, you're right; we actually do not use cloneNode but we delete the original and create the drag proxy. I'll consult with our developers whether we can change this in favor of cloneNode.

Post by steinbach.remberg »

Thank you! That would be really great! Maybe you could just add it as an option to the eventDrag settings, to keep the default behavior like you currently have, but enabling the option to use cloneNode(true)
:

    

    eventDrag: {
      copyKey: undefined,
      constrainDragToTimeline: false,
      cloneNode : true, // default set to false to keep the current behavior
    },

Post by saki »

FYI, I have reopened the ticket and it'll be investigated by our core developers soon.

Post by steinbach.remberg »

Yay 🙌🏼 Thank you!

Post by steinbach.remberg »

Hey Saki,

any update on this topic?

Post by saki »

Ticket is now assigned so the work on it should start promptly.

Post by willydee »

Hello Steffi!

After trying out many things, this seems to be a shortcoming when using custom elements. I came up with a solution on the application side, which will hopefully enable you to fix the problem you're facing. Instead of using Angular's customElement, which makes data binding difficult, I would suggest to use createComponent.

We will discuss the implications and evaluate the general viability of this approach after our end-of-year break. In the meantime, please have a look at the suggested changes to make the demo app working.

BryntumDragIssue.1.zip
amended app code
(400.64 KiB) Downloaded 24 times

I wish you a good start into the year 2025!

Best regards
Willy

Post Reply