How to stop the save button in Edit-dialog to close the dialog in jqxScheduler

[AhmedMostafaParticipant]

Hello dears,

I’m using jqxScheduler Angular widget in my Angular 10 App, and I need to stop the save button in Edit-dialog to close the dialog until the saving process completed successfully in the back-end (WebApi), otherwise keeping the dialog open for the user.
I have tried many code but it didn’t work! 🙁

1. In editDialogOpen event, I have added:

      fields.saveButton.on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();        
        return false;    
    });

2. In AppointmentAdd event, I have added:

      event.preventDefault();
      event.stopPropagation();   

Your support is highly appreciated 🙂

[adminKeymaster]

Hi AhmedMostafa,

It is not possible to override the button’s click action. I would suggest you to Hide the button instead so your users would not be able to click it. Example: fields.saveButton.hide() will hide the button.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[AhmedMostafaParticipant]

Hi Peter,

But that will not solve our issue! If we hide the save button, then how could we access the appointment data to validate it and send it to the back-end?

We need to apply this scenario:
1. User insert the required data and click save.
2. We shall send the request to back-end.
3. If the backend finished the process successfully, then we will show success message and close the dialog.
4. Else if backend finished the process with some error, we should display the error message and let the user to modify his appointment (the dialog should be still open).

[MartinParticipant]

Hello Ahmed Mostafa,

You can hide the save button as Peter have suggested and add your own custom button with the functionality that you need.
You can check in this Example how a custom button can be added.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[AhmedMostafaParticipant]

Hello Martin,

Thank you for your reply, but this couldn’t considered an acceptable solution.
Because you are binding the click event to printButton in editDialogCreate which is invoked once only when the dialog created for the first time, so the parameter editAppointment will carry the values of the first open appointment forever (or will be undefined forever if we were attempting to create a new appointment), Hence we were forced to use the fields parameter to access the appointment data, so it’s cost us a lot of work-around to make it works as expected.

Here is our solution in Angular 10:
– Define new variable saveButton: any = null;
– Added the following block of code to editDialogCreate

      // add custom save button
      let buttonElement = document.createElement("BUTTON");
      buttonElement.innerText = 'Save';
      buttonElement.style.cssFloat = 'right';
      buttonElement.style.marginLeft = '5px';
      buttonElement.id = 'SaveButton';
      fields.buttons[0].appendChild(buttonElement);
      let saveButton: jqwidgets.jqxButton = jqwidgets.createInstance('#SaveButton', 'jqxButton');
      this.saveButton = saveButton;

– Then bind click event in editDialogOpen:

      // bind the event of save button
      var dataService = this.dataService;
      var scheduler = this.scheduler;

      this.saveButton.removeEventHandler('click');
      this.saveButton.addEventHandler('click', function () {
     
        if (editAppointment)
        {
          alert('Editing reservation: ' + editAppointment.id);
        }

        let data: any = {};
        data.resourceSetName = fields.resource.val();
        data.reason = fields.subject.val();
        data.recurrences =  [{
          "bookingFrom": fields.from.jqxDateTimeInput('getDate').toLocaleString(),
          "bookingTo": fields.to.jqxDateTimeInput('getDate').toLocaleString() //Bug: The scheduler adding extra 59 sec.!
        }];            

        dataService.createAppointment(data).subscribe((data: any) => {
         console.log(data);
          // The after Saving processes
          scheduler.closeDialog();
          ...
          ...
        }, (err: any) => {
          console.log(err);     
        });

On the other hand, there are another serious issues:
– The To field is adding extra 59 sec for all appointment, and It’s not manageable.
– When the user attempts to create an new appointment from the month-view the time-part disappear from the datetime-picker, so he should open it first from the week-view once, to be able to edit the time-part.

I hope you can solve these issues soon.

Thank you,
Ahmed Mostafa

[MartinParticipant]

Hello Ahmed Mostafa,

Thank you for the feedback!
Please, note that you can set the datatime picker format in the editDialogOpen callback like this:

fields.from.jqxDateTimeInput({ formatString: 'dd/MM/yyyy hh:mm' });
fields.to.jqxDateTimeInput({ formatString: 'dd/MM/yyyy hh:mm' });

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts