Show Animation for long running tasks

[Brian Pautsch]

We're using the Schedule control and binding to a web service (DataManager with WebMethodAdaptor).

When actionBegin event fires for event create/change/remove, we call a web service and the processing can take as much as 10 seconds. We'd like to show a "Processing..." animation.

We tried showing our HTML/Image animation, but the AJAX call is started so quickly that the animation doesn't display (race condition). We tried using a setTimeout, but that tells actionBegin that the event is done (since the processing is pushed to a new thread) and .

Any suggestions?

[Brian Pautsch]

This works, but feels hacky. Are there better options?

actionBegin: function (args) {

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange' || args.requestType === 'eventRemove') {

        ShowAnimation();

        setTimeout(function () {

            UpdateScheduleTask(args);

            HideAnimation();

        }, 50);

    }

},

[Venkateshwaran Saravanakumar]

Hi Brian,     

We suggest you to use the "actionComplete" event of the Scheduler as a replacement for the setTimeout function, as shown in the highlighted code snippet below.

[index.js]

var data = new ej.base.extend([], window.scheduleData, null, true);

var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    height: '650px',

    selectedDate: new Date(2021, 0, 10),

    eventSettings: { dataSource: data },

    actionBegin: OnActionBegin,

    actionComplete: OnActionComplete

 

});

scheduleObj.appendTo('#Schedule');

function OnActionBegin(args) {

    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange' || args.requestType === 'eventRemove') {

        //Your customized show animation codes can be given here

        ShowAnimation();

    }

}

function OnActionComplete(args) {

    if (args.requestType === 'eventCreated' || args.requestType === 'eventChanged' || args.requestType === 'eventRemoved') {

        //Your customized Hide animation codes can be given here  

        UpdateScheduleTask(args);

        HideAnimation();

    }

}

 

Regards,
Venkatesh

[Brian Pautsch]

That worked perfectly. Thank you. Your forum support is excellent!

[Ravikumar Venkatesan]

Brian,

You're welcome! Thanks for your feedback.