Dialog Fields displaying in all Pages
Hai Team,
I am Using Angular4 applications with Syncfusion. I am using Ej Dialog Control for popups.In that i am using Cancel button but the fields are still open and it will displaying in the other pages also.Please guide me to close the popups using the cancel button.
Herewith I attach the Popup code as below:
HTML File:
--------------
<ej-dialog id="basicDialog" title="Corrective Action" (close)="onClose($event)" [showOnInit]="showoninit" [actionButtons]="actionbuttons" [enableResize]="resize" [isResponsive]="responsive" [htmlAttributes]="htmlattributes" width="60%">
<div class="panel-group">
<div class="row mfg-top panel panel-default">
<div class="row">
<div class="col-lg-12 mfg-top">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Responsible Name<span class="red">*</span></label>
</div>
<div class="col-lg-3">
<input type="text" [(ngModel)]="safetycorrectiveevent.responsibleName" name="responsiblename" class="form-control" id="ddpemployeehours" ng-pattern="/^[0-9]{5}" required autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Preliminary Corrective Action Date<span class="red">*</span></label>
</div>
<div class="col-lg-8">
<div class='input-group date'>
<input type="text" [(ngModel)]="safetycorrectiveevent.correctiveActDate" name="correctiveactdate" ej-datetimepicker width='200'>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Corrective Action Closure Date<span class="red">*</span></label>
<div class="col-lg-12 col-md-12 divClr" style="font-size:12px">(Filed in date when action completed)</div>
</div>
<div class="col-lg-8">
<div class='input-group date'>
<input type="text" [(ngModel)]="safetycorrectiveevent.confcorrectiveActClose" name="correctiveactclosedate" id="datetimepick" ej-datetimepicker width='200'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Prelimenary Action Description<span class="red">*</span></label>
</div>
<div class="col-lg-9">
<div class="radio radio-info radio-inline">
<textarea class="form-control" name="premimenaryactiondescription" [(ngModel)]="safetycorrectiveevent.correctiveActDesc" style="height:90px;width:500px;margin-left:-4%;"></textarea>
<div class="col-lg-12 col-md-12 divClr" style="font-size:12px"> Filed limit to 700 English characters</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 mfg-top">
<div class="row">
<div class="col-lg-12" style="text-align:center">
<button class="btn btn-primary" style="width: 176px;" (click)="addeventcorrective(safetycorrectiveevent)">Add</button>
<button class="btn btn-default" style="margin-left: 10px;width: 176px;color: #fff;background-color: #8e8a8a;" (click)="CreateEvent('No')">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</ej-dialog>
TS File
---------
onClick(event: any) {
$("#basicDialog").ejDialog("open");
}
onClose(event: any) {
$("#btnOpen").show();
}
SIGN IN To post a reply.
3 Replies
BM
Balaji M
Syncfusion Team
August 20, 2018 11:17 AM UTC
Hi Sridhar
Thanks for using Syncfusion products.
We were able to reproduce your reported issue. The dialog inner elements are displayed on another page when you close the dialog. This issue is because of dialog component appended into body element. So, if you navigate into another routing page, dialog component is destroyed, but dialog elements are still appended into body elements. So, we can suggest, you can use the container property into dialog component which is used to append dialog component into selected element and restricted to move only within the specified selected element. Please find the below code.
|
Dialog.component.html
<div id="parent">
<ej-dialog id="lognForm" containment='#parent'> // Set containment property
…
</ej-dialog>
</div> |
Please find the below sample for your reference.
Please follow the below steps to run the above sample.
- Open command prompt and navigate into above sample folders and type ‘npm install’.
- Type ‘npm start’, it will automatically navigate into the browser.(localhost:3000)
Let us know If you have any queries.
Regards,
M. Balaji
SR
Sridhar
August 21, 2018 04:47 AM UTC
Hai Balagi,
We changed as per your code in my file but the problem remains same.We are facing two issues.
First:
We want to close the ej Dialog using onclick event in the Cancel button.
Second:
If we click the close button still fields are displaying on the other components and if we use logForm how to set a width for that.Please help me to solve this problems as soon as possible.
Html Page
<ej-dialog id="lognForm" title="Corrective Action" containment='#parent' (close)="onClose($event)" [showOnInit]="showoninit" [actionButtons]="actionbuttons" [enableResize]="resize" [isResponsive]="responsive" [htmlAttributes]="htmlattributes" width="70%">
<div class="panel-group">
<div class="row mfg-top panel panel-default">
<div class="row">
<div class="col-lg-12 mfg-top">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Responsible Name<span class="red">*</span></label>
</div>
<div class="col-lg-3">
<input type="text" [(ngModel)]="safetycorrectiveevent.responsibleName" name="responsiblename" class="form-control" id="ddpemployeehours" ng-pattern="/^[0-9]{5}" required autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Preliminary Corrective Action Date<span class="red">*</span></label>
</div>
<div class="col-lg-8">
<div class='input-group date'>
<input type="text" [(ngModel)]="safetycorrectiveevent.correctiveActDate" name="correctiveactdate" ej-datetimepicker width='200'>
</div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Corrective Action Closure Date<span class="red">*</span></label>
<div class="col-lg-12 col-md-12 divClr" style="font-size:12px">(Filed in date when action completed)</div>
</div>
<div class="col-lg-8">
<div class='input-group date'>
<input type="text" [(ngModel)]="safetycorrectiveevent.confcorrectiveActClose" name="correctiveactclosedate" id="datetimepick" ej-datetimepicker width='200'>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="col-lg-3">
<label class="label_size">Prelimenary Action Description<span class="red">*</span></label>
</div>
<div class="col-lg-9">
<div class="radio radio-info radio-inline">
<textarea class="form-control" name="premimenaryactiondescription" [(ngModel)]="safetycorrectiveevent.correctiveActDesc" style="height:90px;width:500px;margin-left:-4%;"></textarea>
<div class="col-lg-12 col-md-12 divClr" style="font-size:12px"> Filed limit to 700 English characters</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 mfg-top">
<div class="row">
<div class="col-lg-12" style="text-align:center">
<button class="btn btn-primary" style="width: 176px;" (click)="addeventcorrective(safetycorrectiveevent)">Add</button>
<button class="btn btn-default" style="margin-left: 10px;width: 176px;color: #fff;background-color: #8e8a8a;" (click)="onClose('$event')">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</ej-dialog>
Ts File
onClick(event: any) {
$("#lognForm").ejDialog("open");
}
onClose(event: any) {
$("#btnOpen").show();
}
BM
Balaji M
Syncfusion Team
August 21, 2018 01:11 PM UTC
Hi Sridhar
The issue reproduced in below scenarios only. So, can you please check these two cases in your sample?
- Did you specify the proper containment id?
- Check whether the dialog control inside the specified containment id or not? It should be inside the containment
Let us know if you have any queries.
Regards,
M. Balaji
SIGN IN To post a reply.
- 3 Replies
- 2 Participants
-
SR Sridhar
- Aug 16, 2018 10:05 AM UTC
- Aug 21, 2018 01:11 PM UTC
