Fields inside Dialogs are display in other componets also after close the dialogs

[divakar]

Hai All,

We are using EJ1 Dialog control in our Angular 4 project with typescript .

We are facing some issues in Dialog as follows,

1, After close the Dialog by using [close] event , Fields inside the Dialog are displaying in other components .

we are not able to fixed this issue.

2, And Also, Please provide , how to close the dialog by on button onclick event .

Please raise a ticket to syncfusion asap.

Regrads,

Sridhar K

[Balaji M]

Hi Divakar 

 

Thanks for contacting Syncfusion support. 

 

Query #1: ‘After close the Dialog by using [close] event, Fields inside the Dialog are displaying in other components.’ 

The close event is triggered after the Dialog is closed.  By default, you can close the dialog using close button or else you can press the ‘esc’ key.  We have checked your reported issue.  We are unable to reproduce the reported issue at our end.  If we had closed the dialog, all fields are also closed.  For your convenience we have created the sample, please refer the below link,  

http://www.syncfusion.com/downloads/support/forum/139228/ze/dialog2071571469  

 

After referring the sample still facing the issue, please explain your issue in more details or please share your code or replicate your issue on above shared sample. So, that we will resolve your issue at earliest. 

   

API links: https://help.syncfusion.com/api/js/ejdialog#methods:close  

https://help.syncfusion.com/api/js/ejdialog#members:closeonescape  

 

Query #2: ‘And Also, Please provide, how to close the dialog by on button onclick event.’ 

When you click the close button, a dialog will close using close event.  Please find the below code. 

dialog.component.html 

<input id="btn" (click)="btnClick($event)" />   // Button with click event 

<ej-dialog id="lognForm">  // Render Dialog component 

   ……… 

</ej-dialog> 

 

dialog.component.ts 

export class DialogComponent { 

                       btnClick(event) {   // Triggered when you click the button 

                $('#lognForm').ejDialog('close');  // You can close the dialog using public method 

            } 

} 

 

We have also included this behavior into the above shared sample. 

API link: https://help.syncfusion.com/api/js/ejdialog#methods:close  

 

Regards, 

M. Balaji 

[divakar]

Hi Balaji,

 Thanks for your reply .

We used followinf code in our page : 

1, app.componenet.html page 

   <ej-dialog id="basicDialog" title="Corrective Action" (close)="onClose($event)" [showOnInit]="showoninit" [actionButtons]="actionbuttons" [enableResize]="resize" [isResponsive]="responsive" [htmlAttributes]="htmlattributes" width="60%">

 <button class="btn btn-default" style="margin-left: 10px;width: 176px;color: #fff;background-color: #8e8a8a;" (click)="Eventpopup('No')">Cancel</button>  

  

  </ej-dialog>

2, app.component.ts code

onClick(event: any) {

        $("#basicDialog").ejDialog("open");

    }

    onClose(event: any) {

        $("#btnOpen").show();

    }

We are facing following issues ,

  1,    After we clicked  cancel button , fields are displaying in other components.

  2,  Please provide ts code for accessing and closing the dialog uisng button

Thanks ,

Divakaran N

  

 

[Balaji M]

Hi Divakar 

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/139352/ze/Dialog_containment100860923  

Please follow the below steps to run the above sample. 

1. Open command prompt and navigate into above sample folders and type ‘npm install’.
2. Type ‘npm start’, it will automatically navigate into the browser.(localhost:3000)

Regards, 

M. Balaji 

[Sridhar]

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();

    }

[Balaji M]

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