[ANSWERED] Getting the drag from grid example to respect: allowOverlap : false

[wboard]

Working with the drag from Grid example as a starting point the allowOverlap feature doesn't seem to be respected.

Do you have any suggestions on how to easily get this to work?

[sergey.maltsev]

Hi!

This demo uses it's own Drag implementation in lib/Drag.js.

Try replacing onTaskDrag method there with this code to respect allowOverlap.

    onTaskDrag({ event, context }) {
        const
            me           = this,
            { schedule } = me,
            coordinate   = DomHelper[`getTranslate${me.schedule.isHorizontal ? 'X' : 'Y'}`](context.element),
            startDate    = schedule.getDateFromCoordinate(coordinate, 'round', false),
            endDate      = startDate && DateHelper.add(startDate, context.task.duration, 'h'),
            // Coordinates required when used in vertical mode, since it does not use actual columns
            resource     = context.target && me.schedule.resolveResourceRecord(context.target, [event.offsetX, event.offsetY]);

        // Don't allow drops anywhere, only allow drops if the drop is on the timeaxis and on top of a Resource
        // Also respect allowOverlap scheduler setting
        context.valid = context.valid &&
            Boolean(startDate && resource && endDate) &&
            (schedule.allowOverlap || schedule.isDateRangeAvailable(startDate, endDate, context.task, resource));

        // Save reference to resource so we can use it in onTaskDrop
        context.resource = resource;
    }

[wboard]

Replaced existing code with this, but it doesn't seem to be working as expected.

When drag / dropping from the event scheduler itself the items just start being presented underneath each other.
Tried turning the: autoRescheduleTasks feature on and off which had no impact on the results.

Orientation of the scheduler is horizontal, unsure if this important for this code.

[sergey.maltsev]

Hi!

Please check if there is any console errors and attach a video to show what you are doing.

This is how it works here with allowOverlap : true and new code.

AllowOverlapTrue.gif (686.75 KiB) Viewed 2906 times

This is allowOverlap : false

AllowOverlapFalse.gif (1.19 MiB) Viewed 2906 times

[wboard]

With the applied code + allowOverlap : false,

[sergey.maltsev]

Hi!

Please attach full code for the app you used.
Also check if you use the latest version of Bryntum Scheduler.

[wboard]

Finally took some time to update to the latest version and anonymize the data I'm working with to show the example.

I hope this will clarify what is going wrong.

Another thing I didn't specify earlier but now that I've implemented the resource grouping I also want to prohibit the dropping of the task on the group headers.
I presume this should be almost the same logic.

[pmiklashevich]

allowOverlap is a config which should be applied to scheduler. Just move the config from features to scheduler, and it will work:

schedule = new Schedule({
    allowOverlap : false, // ADD HERE
    ref         : 'schedule',
    insertFirst : 'main',
    features : {
        stripe: true,
        quickFind: true,
        //nonWorkingTime: true,
        columnReorder: false,
        recurringTimeSpans : {
            store : timeRangeStore
        },
        timeRanges : {
            // use our store for time ranges
            store               : timeRangeStore,
            showCurrentTimeLine : true,
            showHeaderElements  : true
        },
        // allowOverlap : false, // REMOVE HERE

[wboard]

Awesome thank you !!

This solves the problem for drag and drop within the schedule.

Do you also have a solution for the not being able to drop in the group header from the Grid?
This also seems to be working correctly in the schedule itself.

[mats]

@wboard, did you read Sergey's post above? He gave you the code to solve this yourself. Also , avoiding group header rows should be easy, return false if the target is a child of a DOM node with '.b-group-row' selector.