[REACT] ExternalEventSource from grid prevent certain items to be draggable

[SemFA]

Hello,

I've been looking into the documentation and I haven't been able to find an answer to this. We want certain rows in a grid to be undraggable, is there a way to hook into the Draggable from a grid?

The documentation for https://bryntum.com/docs/calendar/#Core/mixin/Draggable seems to be missing.

I also can't find any events being fired when starting to drag an item from the grid to the calendar.

[mats]

I see docs here https://bryntum.com/docs/calendar/#Core/mixin/Draggable#event-beforeDragStart

This event lets you prevent a drag.

Where is it missing?

[SemFA]

I see docs here https://bryntum.com/docs/calendar/#Core/mixin/Draggable#event-beforeDragStart

This event lets you prevent a drag.

Where is it missing?

It tells me the docs are missing, I've attached a screenshot of what I'm seeing when I click your link

[mats]

Ah I see now yes it's internal at the moment, we'll discuss if this should be made public.

[SemFA]

Ah I see now yes it's internal at the moment, we'll discuss if this should be made public.

just to confirm, this event is also available when you drag from a grid? I linked draggable because that's the only configuration i saw that contains potentially anything for dragging.

in https://bryntum.com/docs/calendar/#Calendar/feature/ExternalEventSource#config-draggable config i can see it says something about this working if no grid is specified.

[dongryphon]

Thanks for reporting this issue! I've opened a ticket to address the docs problem (https://github.com/bryntum/support/issues/3503).

To your other question: the beforeDragStart event is fired whether or not you use the grid config.

[SemFA]

Thanks for reporting this issue! I've opened a ticket to address the docs problem (https://github.com/bryntum/support/issues/3503).

To your other question: the beforeDragStart event is fired whether or not you use the grid config.

Thank you

[SemFA]

Hello,

I've been unable to listen to this event. I've tried adding this listener to the calendar, to the externaleventsource and even the draggable config in externaleventsource, but i never get a trigger for this event.

Where should I listen to this?

[alex.l]

Hi SemFA,
Well, beforeDragStart won't be triggered in case you dragging from external place.

Basically to make the row undraggable, you could use CSS. Just set https://bryntum.com/docs/calendar/#Calendar/feature/ExternalEventSource#config-dragItemSelector you need and manage it for records in renderer. Here is a basic example based on our demo dragfromgrid

const calendar = new Calendar({
    [...]
    features : {

    externalEventSource : {
        grid : 'unscheduled',
        dragItemSelector: '.b-drag-allowed' // your custom class to mark row as draggable
    }
}
});


new Grid({
    [...]
    columns : [{
        text       : 'Unassigned tasks',
        flex       : 1,
        field      : 'name',
        htmlEncode : false,
        renderer   : (data) => StringHelper.xss`<i class="${data.record.iconCls}"></i>${data.record.name}`
    }, {
        text     : 'Duration',
        width    : 100,
        align    : 'right',
        editor   : false,
        field    : 'duration',
        renderer : (data) => {

        if (data.record.duration > 5) {
            data.row.cls.add('b-drag-allowed'); // add cls to row to allow dragging
        }
        return `${data.record.duration} ${data.record.durationUnit}`
    }
}],

rowHeight : 50
});

[SemFA]

Hey alex,

thanks for the info. This helps, but we need some extra info.

For context, we're currently working on a system that allows multiple users to work in the same calendar. We're using websockets to sync what everyone is doing, including dragging from the grid. We can listen to clicking on a row, but we'd also like to be able to hook into dragging.

If this is not possible, we can look into locking draggable rows when you click on a row and unlocking when you blur from the row. However, the best looking way would be if we were able to hook into the beforeDragStart event (or something else for that matter) and lock only if a user is dragging.

Other than that, the example will still help us in achieving a minimal viable product, thank you for that.

Thank you in advance,
Sem.