Our pure JavaScript Scheduler component


Post by pdsn »

Hey guys, somehow i have a strange issue.

I am working with the SchedulerPro vanilla JS implementation in my BlazorApp. I am working with the transport feature to sync the data with my db. Everything works fine so far and we are making good progress.

But now the issue: We are working with multi assignments via eventstore, resourcestore and assignmentstore. I built a custom assignment tab in the taskEdit feature to assign resource as we need it for our app. I can update and add assignments flawless.

But when I have for example have 3 assignments on an event and I use any of the many unassign methods to unassign one specific resource, the scheduler always wants to delete all assignments from the event and I don't get why! When I debug the beforeSync there are always 3 removals of assignments for the assignmentstore changes.

I tried using unassing methods from eventstore, eventmodel and assigmentstore. When I debug the code i get into the internal remove method which removes the one assignment triggered by my code as expected. But then i end up in the remove method again until no assignments are left and I don't know why.

I already tried setting 'multiEventSelect : true', I overwrote 'get useSingleAssignment()' method to return false and more stuff.

What is the setup I need to unassign a single resource from an event / delete a single assignment from the assignmentstore?

I tried:

  • assignmentStore.unassignEventFromResource(eventRecord, resourceRecord)
  • eventRecord.unassign(resourceId)

Kind regards,
Patrick


Post by ghulam.ghous »

Hey Patrick,

unassignEventFromResource should have done the trick here. Any chance you can replicate the same behaviour in our online example here? https://bryntum.com/products/schedulerpro/examples/inline-data/

Because I tried reproducing the same issue and it did work. A question though, are you using single assignment mode or multi assignment mode?


Post by pdsn »

Hey, thank you for the quick response already!

In your examples it works just fine, so I think I am missing out some configuration. But I did not find any suggestions in the documentation, so I hope I can find some help here.

How do I enable the multiAssignmentMode for the SchedulerPro?
Currently all assignments come from our database and when I move one event which is assigned to multiple resources, it moves in every resource lane. So it looks like it works for me. But as soon as I call unassignEventFromResource with one event and one recource it just removes all assignments for the event. None is left afterwards.

assignmentStore.add(assignment) is working just fine.


Post by ghulam.ghous »

From your description, it seems like you are using multiAssignment mode. You can read more here on how the assignment mode is specified. https://bryntum.com/products/schedulerpro/docs/api/Scheduler/data/mixin/EventStoreMixin#config-singleAssignment

So really I have no idea what could be wrong here. Try removing the overrides that you have like the one you mentioned for usesSingleAssignment. Also if possible try copying a subset of your data and use it our online example. Or you can do one step better, use the data and your configs to construct a minimal runnable test case so we can have a look at it.


Post by pdsn »

I'll try to gather more information and to build an online example. Will come back to you as soon as I have something.

Thanks!


Post by ghulam.ghous »

We will wait for it.


Post by pdsn »

I just found my issue while creating an example for you :D It was a hard to see mistake from my side. I already fixed it now, but maybe you have a better solution for my workaround, which cause the issue?

[ResourceChart.png]
I want to show a custom Chart.js implementation on top of the resource (the blue and red bar). The Chart displays the already planned hours for the resource. To create space on top of a resource bar (above the first event!) I implemented a logic, which adds invisible spacer-events for every resource to the eventStore .

    schedulerPro.project.load().then(() => {
        createSpacerEvents();
        
function createSpacerEvents() { const timeAxis = schedulerPro.timeAxis; const project = schedulerPro.project; const resourceStore = project.resourceStore; const eventStore = project.eventStore; let minDate = timeAxis.startDate/ minDate.setMonth(1) let maxDate = timeAxis.endDate; resourceStore.forEach(resource => { const spacerEvent = { id: `spacer-${resource.id}`, resourceId: resource.id, //THIS WAS MY ISSUE, I CHANGED THIS TO USING ASSIGNMENTSTORE INSTEAD OF RESOURCE ID name: '', startDate: DateHelper.format(minDate, 'YYYY-MM-DD HH:MM'), endDate: DateHelper.format(maxDate, 'YYYY-MM-DD HH:MM'), doNotSync: true, style: 'border:none;pointer-events:none;display:none;' }; eventStore.add(spacerEvent, true); }); } });

I filter these events in the beforeSync, so we don't send them to our API, but actually I would like to make them not appear in the pack.events at all:

       
beforeSync({source, pack}) { const shouldSync = record => !record.doNotSync; pack.events.added = pack.events.added?.filter(shouldSync); pack.events.updated = pack.events.updated?.filter(shouldSync); pack.events.removed = pack.events.removed?.filter(shouldSync); }

So my question is: Do you have a better solution for the Chart.js topic? I want to have extra space for my Chart. I do not want to use BarMargin or anything which caused margin on top and on bottom.

I added a full example as zip folder [bryntum-test.zip] - You can start the app with:
npm install
npm start

Can you help me to replace the event-spacer logic with something more intuitive/native? This was more like a workaround. If there is no better solution: atleast i found the issue for the unassignment now :D

Sorry for the confusion and thank you already!

Attachments
bryntum-test.zip
(58.05 KiB) Downloaded 5 times
ResourceChart.png
ResourceChart.png (20.25 KiB) Viewed 79 times

Post by marcio »

Hi Patrick,

I'm glad you found the issue with the unassignment logic.

Regarding the sync object, you can try to set the record to be readOnly https://bryntum.com/products/schedulerpro/docs/api/Core/data/Model#field-readOnly, or if it's a field, you can configure to be not persisted https://bryntum.com/products/schedulerpro/docs/api/Core/data/field/DataField#config-persist

I don’t think that will be easy to play with different heights, as it’s a canvas, so you’ll need to manually overwrite the logic to display elements, you can try play with https://bryntum.com/products/schedulerpro/docs/api/Grid/row/Row#property-height and https://bryntum.com/products/schedulerpro/docs/api/SchedulerPro/view/mixin/SchedulerProEventRendering#property-eventLayout, but it’s also a workaround.

Best regards,
Márcio

How to ask for help? Please read our Support Policy


Post Reply