search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Event rendering on copy

Asked by Aliaa
5 years ago.

Hi there,

I have experienced a problem in rendering events on add or remove. Sometimes the newly added event is not rendered or the removed event won't disappear (most probably when the scheduler has many rows and events). I investigated and I am sure it is a rendering problem because the event is successfully added/removed. And even if I try to resize the browser window, the event is rendered correctly.

To fix this issue, I enabled "eventUpdateInplaceOptimization" option which fixed this issue but now I am having another issue that I think is caused by this option.

When I copy an event from one cell to another cell which already contains another event, the newly created event is rendered on top of the existing event. This issue seems to happen in the last row of the scheduler only. When I disabled "eventUpdateInplaceOptimization" this issue was fixed.

Any ideas?

Thanks,
Aliaa

Comment posted by Aliaa
5 years ago.

Note that progressive rendering is disabled

Answer posted by Dan Letecky [DayPilot]
5 years ago.

Most likely, the problem is that the new event has the same ID as the original one. After recent changes, the Scheduler requires each event to have a unique ID. This applies since the various event identity comparison methods has been unified to ID comparison.

In the last release (https://javascript.daypilot.org/daypilot-pro-for-javascript-2018-4-3469/), this rule is enforced and you will get an exception when duplicate IDs are detected.

You can fix it by assigning the event copy a different ID - preferably one received from the server side.

Let me know if this doesn't help.

Comment posted by Aliaa
5 years ago.

Hi Dan,

Thanks for your reply. I do not think that the 2 events have the same ID. I will investigate but let me know which issue of the 2 issues I mentioned above should be fixed by enforcing a unique ID?

Comment posted by Dan Letecky [DayPilot]
5 years ago.

It could affect both issues.

Could you please give it a try and let me know if it helped? Such an issue would be hard to explain by another cause.

If it doesn't help, would you be able to create an example which reproduces the problem?

Comment posted by Aliaa
5 years ago.

I checked. No duplicate IDs. I am not sure I can create a simple example that reproduces the problem. But after disabling "eventUpdateInplaceOptimization" it seems that calling dps.update() after adding/removing events fixes the first issue. I am still not sure that it is totally fixed. We are still testing. But I'd rather have this fixed properly rather than using this workaround.

Comment posted by Dan Letecky [DayPilot]
5 years ago.

OK, thanks for the update. Could you please post your config and the DayPilot Pro version that you are using?

Comment posted by Aliaa
5 years ago.

I am using DayPilot Pro for JavaScript 2018.3.3400

Check below the code that creates the scheduler. It references some other functions that set widths & heights but the basic configuration is in this function. If you need the other functions just let me know.

  CreateScheduler: function (scheduler) {
            var instance = this;

            var days = scheduler.data('days');

            var dp = new DayPilot.Scheduler(scheduler.attr('id'));
            scheduler.data('dp', dp);
          
            var cellWidth = instance.GetCellWidth(days);
            instance.SetCellWidth(dp, cellWidth);
            instance.SetCellHeight(false);

            instance.SetTimeHeaderHeight(dp);

            instance.SetSchedulerHeight(scheduler);

            dp.eventMarginRight = instance.settings.cellMargin;
            dp.eventMarginLeft = instance.settings.cellMargin;
            dp.eventMarginTop = instance.settings.cellMargin;
            dp.eventMarginBottom = instance.settings.cellMargin;

            // view            
            dp.startDate = new DayPilot.Date(scheduler.data('start'));
            dp.days = days;
            dp.scale = instance.scale;
            dp.timeHeaders = instance.timeHeaders;       

            //theme
            dp.cssClassPrefix = instance.settings.themeClass;
            dp.cssOnly = true;

            //resources
            dp.treeEnabled = false;

            //cell click handling
            dp.timeRangeSelectedHandling = "Disabled";

            //enable event double click
            dp.eventDoubleClickHandling = true;

            //dp.eventUpdateInplaceOptimization = true;

            //disable progressive rendering
            dp.dynamicEventRendering = "Disabled";
            //dp.progressiveRowRendering = false;

            //allow dragging between schedulers
            if (instance.numberOfSchedulers > 1) {
                dp.dragOutAllowed = true;
            }

            instance.DisplayVerticalSeparators(scheduler);

            //Handle scheduler events
            dp.onBeforeTimeHeaderRender = function (args) { instance.OnBeforeTimeHeaderRender(instance, scheduler, args); };
            dp.onBeforeResHeaderRender = function (args) { instance.OnBeforeResHeaderRender(instance, scheduler, args); };
            dp.onBeforeEventRender = function (args) { instance.OnBeforeEventRender(instance, scheduler, args); };
            dp.onBeforeCellRender = function (args) { instance.OnBeforeCellRender(instance, scheduler, args); };
            dp.onEventMove = function (args) { instance.OnEventMove(instance, scheduler, args); };
            dp.onEventMoving = function (args) { instance.OnEventMoving(instance, scheduler, args); };
            dp.onAfterRender = function (args) { instance.OnAfterRender(instance, scheduler, args); };            
            dp.onEventDoubleClick = function (args) { instance.onEventDoubleClick(instance, scheduler, args); };            

            instance.CreateDpContextMenu(scheduler);

            dp.init();

            setTimeout(function () {
                instance.LoadResources(scheduler);

                //events
                instance.LoadEvents(scheduler);
            }, 0);
        }
Comment posted by Dan Letecky [DayPilot]
5 years ago.

Thanks, Aliaa.

I've reviewed the in-place optimization logic that is used in events.add(). The in-place rendering is only allowed when there is no overlapping event at that place (which would cause a row height change). The event is always rendered at the top of the row (as it assumes no overlaps).

The check for overlaps compares the event resource, start and date but it excludes the event itself - which is checked using identity comparison. This leads back to the id problem. I don't see any other situation where it would allow an in-place rendering over an existing event.

Could you please give it a try using the latest release (https://javascript.daypilot.org/daypilot-pro-for-javascript-2018-4-3469/)? The last version checks the id during events.add() call - it will make sure that this is not the problem.

Comment posted by Aliaa
5 years ago.

Thanks, Dan. I will do that tomorrow and will get back to you.

Comment posted by Aliaa
5 years ago.

I tried version 2018.4.3469. Still the same issue.

Comment posted by Dan Letecky [DayPilot]
5 years ago.

Thanks, Aliaa. Unfortunately, I'm not able to reproduce the issue and there is also no obvious problem in the code. If you were able to create an HTML page that reproduces the problem that would definitely help.

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.