jQuery UI Widgets Forums Scheduler How to stop the save button in Edit-dialog to close the dialog in jqxScheduler

This topic contains 5 replies, has 3 voices, and was last updated by  Martin 5 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • AhmedMostafa
    Participant

    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 🙂

    • This topic was modified 5 months, 1 week ago by  AhmedMostafa. Reason: updated topic tags

    admin
    Keymaster

    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/


    AhmedMostafa
    Participant

    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).


    Martin
    Participant

    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


    AhmedMostafa
    Participant

    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


    Martin
    Participant

    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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.