Our pure JavaScript Scheduler component


Post by Srindt »

Hi, When I drag an event from one row(resource) to another, how shall I get the name of the row (resource) to which the event is dragged to?

I used the below code and options but I can't find corresponding options:

schedule.on('afterEventDrop', ({ eventRecords,source }) => {
         console.log("11.",eventRecords.map(event => event.resource.events))
         eventRecords.map(event => event.resource.events)
         console.log("eventRecords: ",eventRecords)
         console.log("eventRecords: evt.data: ",eventRecords.map(evt => evt.data))
         console.log("source: ",source)
        }})

Post by mats »


Post by Srindt »

Thanks for the reply mats.

1.Even though I can get the resource name, the event box is not getting updated.

schedule.on('afterEventDrop', ({ eventRecords,source }) => {         
eventRecords[0].resourceName = eventRecords[0].resource.name; })

And in my eventRenderer, I show the resource name like the below:

<div >${data.resourceName ? data.resourceName : null''}</span></div>

But it is still showing the old resource Name.Only when I refresh the browser, it is showing my resource name to which the event is dragged to.I think the event box UI is not refreshed properly.

2.In afterEventDrop, why is the eventRecords an array ? Is that mean I can drag multiple items?

I want to drag only a single item.As of now I use the 0th index record as shown in 1.Am I doing a right approach?

3.Though eventRecords.resource.name gives me the new resource name, when I log my eventRecords in console, I can't see the resource object ? Any idea?


Post by mats »

Probably you have no field 'resourceName' defined in your EventModel?

2.In afterEventDrop, why is the eventRecords an array ? Is that mean I can drag multiple items?

Yes :) Please see https://bryntum.com/examples/scheduler/dragselection/ And yes you are doing it correctly.

  1. Sorry, not sure what you mean - please share your code.

Post by Srindt »

For 1.,

I have an event whose resource is NORTH

resource-north.png
resource-north.png (16.15 KiB) Viewed 1639 times

Now I drag the event to another resource SHIPPING

Inside afterEventDrop, I m setting the new resourceName which is SHIPPING and it is updated in the Object, but not in the event box UI as shown in the pic

schedule.on('afterEventDrop', ({ eventRecords,source }) => {         

     eventRecords[0].resourceName = eventRecords[0].resource.name;
})   
resource-shipping.png
resource-shipping.png (64.77 KiB) Viewed 1639 times

In my eventRenderer, I show the resource name like the below:

<div >${data.resourceName ? data.resourceName : null''}</span></div>

But it is still showing the old resource Name.Only when I refresh the browser, it is showing my resource name to which the event is dragged to, which in this case is SHIPPING:

As you see in the right, the eventRecord obj is having resourceName as NORTH only !

So the Pink box should be showing SHIPPING instead of NORTH !

Is there a way to refresh the event box, because I feel the event box is not getting updated properly?

Hope now you got my question:


Post by mats »

Did you read my note to you:

Probably you have no field 'resourceName' defined in your EventModel?

Also, why not use the 'name' field already present on the resource model?

<div >${data.resource.name ? data.resource.name : ''}</span></div>

Post by fabio.mazza »

Hi Srindt,

Looks like you syntax is incorrect with that ''

<div >${data.resourceName ? data.resourceName : null''}</span></div>

But I just tested on https://www.bryntum.com/examples/scheduler/vue/javascript/simple/dist/index.html , adding to the code bellow:

export default {
    eventRenderer    : ({ eventRecord }) => {
        return `<div>${eventRecord.resourceName ? eventRecord.resourceName : null}</div>`;
    },
    listeners : {
        afterEventDrop : () => {
            eventRecords[0].resourceName = eventRecords[0].resource.name;
        }
    },
    ...
<scheduler
    ...
    :eventRenderer    = "schedulerConfig.eventRenderer"
    :listeners        = "schedulerConfig.listeners"
</scheduler>

And it is working as expected, but there is just a bug, after drop it update to previous value dropper (out of framework it works, I tested on https://www.bryntum.com/examples/scheduler/basic/). I already opened a ticket for this problem here: https://github.com/bryntum/support/issues/1547

Sep-21-2020 08-23-52.gif
Sep-21-2020 08-23-52.gif (3.53 MiB) Viewed 1630 times

Best regards,
Fabio


Post by Srindt »

Thanks for the update fabio !

The syntax mistake happened owing to bad copy-pasting of mine.I do use the correct code in my app:

<div >${data.resourceName ? data.resourceName : null}</span></div>

It was the same issue for which I have opened this ticket.

When I drag from resource NORTH to resource SHIPPING, the UI needs to get updated with SHIPPING.I hope u got the issue.

Just wanna update you on this ticket: when u drag and drop an item from grid (drag from grid),the UI got updated ,
but not when the event is dragged like in this ticket.

1.Is there any temporary alternate for this?


Post by fabio.mazza »

Srindt, we do not have a temporary solution for it because this is about the integration with the framework that we have to check. You can follow the ticket to know the progress.

Thank you.

Best regards,
Fabio


Post by mats »

@Srindt: I still think the error here is in your code, that you have not defined a 'resourceName' field for your event. Can you please show your code for your EventModel if you have one? If you have not subclassed the EventModel class and added your own field, it simply will not work.


Post Reply