We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

ej-dialog is appeared in html page through routes

Thread ID:

Created:

Updated:

Platform:

Replies:

127914 Dec 18,2016 04:14 AM Dec 21,2016 04:54 AM Angular 4
loading
Tags: ejDialog
Dina Abdelbary
Asked On December 18, 2016 04:14 AM


Hi,

I m using more than ej-dialog in many tabs in my app components, 

This is the appComponent.html

<div style="padding-left:0px;" class="collapse navbar-collapse" id="skeleton-navigation-navbar-collapse">
<ul class="nav navbar-nav">
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" rel='nofollow' href="#" [routerLink]="['/']">Syncfusion Angular 2</a></li>
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" rel='nofollow' href="#home" [routerLink]="['/home']">Home
  </a></li>
<li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" rel='nofollow' href="#grid" [routerLink]="['/grid']">Grid
  </a></li>

  <li><a data-toggle="collapse" data-target="#skeleton-navigation-navbar-collapse.in" rel='nofollow' href="#excelGrid" [routerLink]="['/excelGrid']">Excel Grid
  </a></li>
</ul>
</div>

<main>
<div class="container">
<router-outlet></router-outlet>
    </div>
</main>

and in gridComponent html and excelgridCompont html i use ej-dialog , like :

 <ej-dialog id="deleteFileDialog" title="Dialog" [showOnInit]="showOnInitialize">
        Delete File
        <table>
            <tr>
                Are you sure you want to delete file ?
            </tr>
        </table>
        <div class="footerspan" style="float:right">
            <button (click)="deleteFileInfo($event)">Yes</button>
            <button (click)="delcancel($event)">No</button>
        </div>
    </ej-dialog>

the problem example: after routing to Grid tab(with or without opening the dialog), and route to another one, the dialogues in grid component is appeared as controls on html page , and every route to grid tab, a new dialog controls is added to page :(

Kindly tell me the solution ASAP


Attachment: dialog_error_1a3a6d7e.rar

Rekha J [Syncfusion]
Replied On December 19, 2016 07:49 AM

Hi Dina, 
Sorry for the inconvenience caused
We are validating your reported issue after routing to Grid tab(with or without opening the dialog), and route to another one, the dialogues in grid component is appeared as controls on html page , and every route to grid tab, a new dialog controls is added to page. We will update you with further details on 20th December, 2016. 
We appreciate your patience until then. 
Regards, 
Rekha. 


Rekha J [Syncfusion]
Replied On December 20, 2016 03:55 AM

Hi Dina, 
Thanks for your patience. 
We were able to reproduce the reported issue with appending Dialog content on navigating to other pages. We suggest to use “target” property of Dialog to resolve this issue. Because, when target or containment property to dialog is not set then it takes body as the target of dialog. On destroying Dialog component on navigating to other page will append plain Dialog content to it body. So here we have set Grid ID as Dialog’s target, so it will be shown only in corresponding page.  
For your convenience, please refer the code sample to achieve this. 
 
<ej-dialog id="deleteFileDialog" title="Dialog" [showOnInit]="false" target="#grid"
        Delete File 
        <table> 
            <tr> 
                Are you sure you want to delete file ? 
            </tr> 
        </table> 
        <div class="footerspan" style="float:right"> 
            <button>Yes</button> 
            <button>No</button> 
        </div> 
    </ej-dialog> 
 

We have created a simple sample and the sample available in the link below: 

If you are still facing any issue, please share us modified sample with a replication procedure. So that we can help you out better. 

Regards, 
Rekha. 


Dina Abdelbary
Replied On December 20, 2016 10:11 AM

Thanks Rekha for your support,
I have applied the solution and now all works fine, TU

Rekha J [Syncfusion]
Replied On December 21, 2016 04:54 AM

Hi Dina, 
Thanks for the update. 
We are glad to hear that your issue has been resolved.  
Please let us know if you need further assistance on this.  
Regards,  
Rekha.   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;