Show 2 split panes like Excel using timeline

Hi everyone,

Would it be possible to duplicately display the same timeline?
I have a timeline as below:

I would like to display it like the separated views in Excel.
tobe:

And then, if it is possible to drag and drop between the both separated views for copying or moving an event, it would be great though… :sweat:

Thank you for supporting our complicated inquiry in advance.

meicom

Hello @meicom,

Would it be possible to duplicately display the same timeline?
I have a timeline as below:

It’s possible by creating two scheduler instances, as described by the following link:
https://docs.dhtmlx.com/scheduler/multiple_per_page.html

And removing the navigation bar of the second scheduler:

    scheduler2 = Scheduler.getSchedulerInstance();
    scheduler2.config.header = [];
    scheduler2.xy.nav_height = 0
    scheduler2.xy.scale_height = 0

After that, you will be able to synchronize the scroll of both schedulers with the onViewChange event:

    scheduler1.attachEvent("onViewChange", function (new_mode , new_date){
        scheduler2.setCurrentView(new Date(new_date));
    });

And then, if it is possible to drag and drop between the both separated views for copying or moving an event, it would be great though…

It can be done with the drag_between plugin:
https://docs.dhtmlx.com/scheduler/dhtmlx_components_integration.html

Here is a demo:
https://snippet.dhtmlx.com/w5ixxn2z

Kind regards,

Hi Siarhei,

Thank you for providing me with the brief sample.
Actually, I’ve expected the layout like the split panes having same data in Excel.

However, is there possibility to occur something behaviors not expected in case of dragging and dropping a event from pane A to pane B on such split panes?
Because I concern there is same event_id in the both panes(timelines).

For example, the event next to yellow arrows are same event_id.


Also then, if I moved the event from pane A to pane B, it correctly shifted the dragging event to pane B.
But also that event inside pane B shifted together to the more bottom position.
The behavior is a bit wondering.

meicom

Hello @meicom,

Regarding this point:

However, is there possibility to occur something behaviors not expected in case of dragging and dropping a event from pane A to pane B on such split panes?
Because I concern there is same event_id in the both panes(timelines).

This scenario shouldn’t cause any issues, as there are different schedulers with different datasets, but in case of backend integration if you are using the same database for all schedulers you can add additional logic to avoid id collisions.

Regarding this point:

Also then, if I moved the event from pane A to pane B, it correctly shifted the dragging event to pane B.
But also that event inside pane B shifted together to the more bottom position.
The behavior is a bit wondering.

It’s hard to suggest what goes wrong in your case, as the issue doesn’t reproduce on my end:
https://recordit.co/Aen64yo6PO
and may be connected with various reasons, could you please reproduce it in the demo below:
https://snippet.dhtmlx.com/rs7p63qk
(open the demo => reproduce the issue => click the “Save” button => send me the new link), or provide more details on how to reproduce the described issue?

Kind regards,