Drag in Scheduler

[Highnoon]

Hi,

Here it is without .Net.

[pmiklashevich]

Hello,

Now your example is runnable but I'm afraid I can't consider it as a test case. It's ~800 lines of not structured code which is really hard to debug. It has tons of commented code and tons of try-catch statements which hide the output from the console. A test case has to show exactly the problem you're looking at. To create a test case please pick out one of our simple examples, change it a bit to show the issue and apply it as a test case.

Though I've tried the steps you've provided:

Just drag the events. It's not allowed to drop them on the parents. If everything is ok the event appears on new position a star is added to name and they change their color. In some cases the no sign appears but you can move the event. I think it has to do with the time/date tooltip. Just try it a few times.

"the no sign appears" what does it mean?
I've tried to drag an event. It disappeared and then it was not possible to drag any events at all.

Back to the original issue. As far as I get, you're trying to create a custom drag&drop feature. Why don't you use the built-in solution? https://www.bryntum.com/docs/scheduler/ ... /EventDrag

Please explain what you expect from the drag & drop. Maybe there is an option to modify EventDrag feature somehow.

Please let's start over.

Regards,
Pavel

[Highnoon]

ok - next try. I shrink it. Hope you can debug it.
Please try to start BryntumTest2.html. Third event in 'Harry Gleiter' column is a 'Drag me to Team Blau'. Try to do so please. The event moves back to orginal position because it should not been allowed to place events on group headers. Now either take the second event 'and now me!' and try to place it on Team Blau or just resize the browser.
The event 'Drag me to Team Blau' moves to Team Blau.
Please check the three drag methods. I am using my validPosition property. Maybe thats wrong.

Thanks

[Maxim Gorkovsky]

Hello.
I checked your test case, here are some notes:
1. we already append '.b-dragging-event' class on top scheduler element. No need to append in manually on different element for two reasons:
a) you can use existing class name to do styling or conditions
b) you should not append framework classes randomly, it may possibly break component behavior. If you still want CSS class - use your own name to avoid possible collisions
2. eventdrop fires after event was successfully dropped, it is too late to cancel it. Correct way to modify validation is demostrated in this example
3. some fields (like durationUnit) are readonly, you should use model.setDuration(duration, unit) instead

To fix your app apply this code:

new Scheduler({
  features: {
    eventDrag: {
      validatorFn: (context) => !context.newResource.isParent
    }
  },
  listeners: {
    eventDrop: function onDrop(param2) {
        var source = param2.source
        var eventRecords = param2.eventRecords;
        var isCopy = param2.isCopy;
        var context = param2.context;
        var targetEventRecord = param2.context.record;
        var targetResourceRecord = param2.targetResourceRecord;
        // this line breaks dragdrop by throwing exception when trying to modify durationUnit
        // changeEvent(targetEventRecord.REZUGUID, targetEventRecord.REFOBJEKT, targetEventRecord.POSGUID, targetResourceRecord.id, context.startDate, context.endDate);
        this.eventEdit.scheduler.schedulerEvents.element.classList.remove('b-dragging-event');
    }
  }
})

Events now cannot be dropped on parent nodes and reported problem is not reproducible.

[Highnoon]

Hi,

the validatorFn is perfect - Thank you!

But now I have a couple of new problems. The changeEvent method from above contains a WebService call which can fail. How to react on a exception, timeout, database error ... To me it looks like the context.finalize() is useless. There is no difference if you call it or not. In case of an exception the event should go back to his old position. I need something like abort method for the drag operation.

And second it would be nice to have a possibility to give informations to the user why this position for the event is not possible. e.g. start is before project start ... What will be a good way to do this? If I place it in the validatorFn its called very often.

Thanks again

[pmiklashevich]

Hello,

context.finalize function accepts an argument. `true` to accept the changes or `false` to reject them. See docs: https://www.bryntum.com/docs/scheduler/ ... opFinalize

Before getting the operation finalized, you could show a popup, a toast, a prompt, a confirmation dialog etc. Please see how it's done in examples/validation/app.js:

beforeeventdropfinalize : function({ context }) {
    context.async = true;

    context.finalize(confirm('Please confirm'));
},

beforeeventresizefinalize : function({ context }) {
    context.async = true;

    context.finalize(confirm('Please confirm'));
}

And here is an example with a toast:

beforeeventdropfinalize : function({ context }) {
    context.async = true;
    // simulate async
    setTimeout(function() {
        Toast.show('The drag operation is not acceptable for a reason...');
        context.finalize(false);
    }, 0);
},

Best,
Pavel

[Highnoon]

Thank you!