Our state of the art Gantt chart


Post by bhavadharanisure »

Hi,
We have a query call for validation of eventdrop action in scheduler.
Have attached the code below

 bryntumRefs.current.scheduler.on(
      "beforeeventdropfinalize",
      async ({ context }) => {
        debugger;
        let idofevent = context.eventRecord.id;
        let idofresource = context.newResource.id;
        const { data, extensions } = await assignmentValidation({
          variables: {
            SchValidation_ReqInput: {
              Task: idofevent ,
              resource:idofresource 
            },
          },
        });
        if (
          data && data.errorid == 1001
        ) {
          context.valid = false;
        }
      }
    );

So we will choose to retain the eventdrag action or abort the eventdrag action based on the query response.

I have given the beforeeventdropfinalize as async await to wait for the response, to check for error id and then proceed with the change .

what we expect is after the response come ,we then validate and set

context.valid = false;

then eventdrop action is to be aborted.
But the eventdrop action is not aborting after setting the context.valid to false.

if I try giving

context.valid = false;

directly without query call the eventdrop action is aborting.

1)What can be done for this?
2) Is there any other way to remain in beforeeventdropfinalize until the response arrive and then proceed with the change.


Post by tasnim »

Hello,
Instead of setting it to async, you need to set the async property of the context to true like this context.async = true

Here is an example of how you can achieve it

    listeners        : {
        beforeEventDropFinalize({ context }) {
            context.async = true;
            async function fetchData() {
                try {
                    const response = await fetch('https://fakestoreapi.com/products/1');
                    const data = await response.json();
                    context.finalize(true);
                } catch (error) {
                    context.finalize();
                }
            }
            fetchData();
        }
    },

And Please use context.finalize() instead of context.valid
That should work for you.

And please check this docs link https://bryntum.com/products/scheduler/docs/api/Scheduler/feature/EventDrag#event-beforeEventDropFinalize

Good Luck :),
Tasnim


Post Reply