1. Home
  2. Forum
  3. Angular - EJ 2
  4. Angular : prevent Closing the Edit Window issue

Angular : prevent Closing the Edit Window issue

Hi every one,
I'm tring to cancel the colsing of the Edit Window but having some trouble.

here is my code :
HTML File
<ejs-schedule #scheduleObj
(actionBegin)="onActionBegin($event)"
(dataBound)="onDataBound()"></ejs-schedule>

TS File
cancel : boolean = false;
@ViewChild("scheduleObj")
scheduleObj: ScheduleComponent;
onActionBegin(args: ActionEventArgs): void {
var data = (args.requestType === 'eventCreate') ? args.data[0] : (args.data);
if(data && (data.StartTime>data.EndTime))
{
args.cancel = true;
this.cancel = true;
}
}

onDataBound() {
this.scheduleObj.eventWindow.dialogObject.beforeClose = function (args) {
console.log(this.cancel);//Here cancel is undefined!!!!! why???
args.cancel = this.cancel;//if I replace by true, It works perfectly
this.cancel = false;
}
}

Thanks in advance for help.

JMEL.

7 Replies
NR Nevitha Ravi Syncfusion Team April 24, 2019 07:15 AM UTC

Hi JMEL Becha, 

Greetings from Syncfusion Support. 

We have prepared a sample to prevent the closing of editor window if the subject of the event is New for your reference which can be viewed from the following link.  In the shared code, this.cancel is undefined as here dialog instance is available in ‘this’. So we have stored it in separate variable in actionBegin and assign that variable in beforeClose event. 

onActionBegin(args: ActionEventArgs): void { 
    if (args.requestType === 'eventCreate' || args.requestType === 'eventChange') { 
      var subject = (args.requestType === 'eventCreate') ? args.data[0].Subject : (args.data as any).Subject; 
      if (subject == 'New') { 
        args.cancel = true; 
        this.cancel = true; 
        let val = this.cancel; 
        this.scheduleObj.eventWindow.dialogObject.beforeClose = function (args) { 
          args.cancel = val; 
          alert("Don't Close the Appointment Window"); 
        } 
        this.cancel = false; 
      } 
    } 
  } 

Please try the sample at you end and let us know if you need any further assistance. 

Regards, 
Nevitha. 


JB JMEL Becha April 24, 2019 10:14 AM UTC

Great !!
It Works perfectly.

Thanks a lot.

JMEL.

NR Nevitha Ravi Syncfusion Team April 24, 2019 12:59 PM UTC

Hi JMEL, 
  
Thanks for your update. 
  
We are glad that your requirement has been fulfilled. 
  
Regards, 
Nevitha 


PK Parthkumar Kakadiya January 21, 2020 04:08 PM UTC

Hi,

In this solution I am getting strange problem.

If i give subject 'New' at first time, I am getting alert with the message. which is correct .







Now if i type valid string at subject apart from 'New', I am still getting the alert. I am not able to close editor window as well. 






Please have a look this problem. I would like to check some field value.


Regards,
Parth

VM Vengatesh Maniraj Syncfusion Team January 22, 2020 06:14 AM UTC

Hi JMEL, 

Thanks for the update. 

We have provided the popupClose event to perform the action before close the popup window. Based on the requirement we have prepared the below sample for validate the text before closing. 


For more reference about popupClose, please refer the below API link 


Kindly try the above and revert us for further assistance. 

Regards, 
Vengatesh 


PK Parthkumar Kakadiya January 22, 2020 09:17 AM UTC

Hi Vengatesh,

Thanks a lot for your solution. 

I having small issue, ejs-schedule version 17.2.49 has not support to the onpopUpClose event

Reason behind I am using this version for ejs-schedule is I am using ejs-calendar(version 17.2.49) module datetimepicker for my customized editor window. Globalization is not supported to the higher than mention version of the ejs-calendar.  


Could you please try to help me with this issue of version.

Note: Globalization working fine for ejs-schedule latest version

But Globalization not working for datetimepicker(ejs-calendar) higher than version 17.2.49

Regards,
Parth  




VM Vengatesh Maniraj Syncfusion Team January 23, 2020 07:40 AM UTC

Hi Parthkumar, 

Thanks for your update. 

Based on your requirement, we have prepared a sample using Scheduler and Calendar components with locale as “de” with scheduler popupClose event which is working properly at our end. And the sample can be downloaded from the following link, 

App.component.html 
<ejs-schedule width='100%' locale='de' height='650px' (popupClose)="onPopupClose($event)"> 
    <ng-template #editorTemplate let-data> 
        <table *ngIf="data != undefined" class="custom-event-editor" width="100%" cellpadding="5"> 
            <tbody> 
                <tr> 
                    <td class="e-textlabel">Summary</td> 
                    <td colspan="4"> 
                        <input id="Subject" class="e-field e-input" type="text" value="{{data.Subject}}" name="Subject" 
                            style="width: 100%" /> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="e-textlabel">From</td> 
                    <td colspan="4"> 
                        <ejs-datetimepicker locale='de' id="StartTime" class="e-field" data-name="StartTime" 
                            format="M/dd/yy h:mm a" [value]="dateParser(data.startTime || data.StartTime)"> 
                        </ejs-datetimepicker> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="e-textlabel">To</td> 
                    <td colspan="4"> 
                        <ejs-datetimepicker locale='de' id="EndTime" class="e-field" data-name="EndTime" 
                            format="M/dd/yy h:mm a" [value]='dateParser(data.endTime || data.EndTime)'> 
                        </ejs-datetimepicker> 
                    </td> 
                </tr> 
                <tr> 
                    <td class="e-textlabel">Reason</td> 
                    <td colspan="4"> 
                        <textarea id="Description" class="e-field e-input" name="Description" rows="3" cols="50" 
                            value="{{data.Description}}" 
                            style="width: 100%; height: 60px !important; resize: vertical"></textarea> 
                    </td> 
                </tr> 
            </tbody> 
        </table> 
    </ng-template> 
</ejs-schedule> 
 
App.component.ts 
public onPopupClose(args: PopupCloseEventArgs): void { 
   console.log(args); 
} 

Kindly try the above sample, if you have any concerns please revert us back for further assistance.  

Regards,  
Vengatesh. 



Loader.
Up arrow icon