ej-dialog is appeared in html page through routes

[Dina Abdelbary]

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]

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 20^th December, 2016. 

We appreciate your patience until then. 

Regards, 

Rekha. 

[Rekha J]

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: 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/angular2-seeds-systemjs1891556230  

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]

Thanks Rekha for your support,

I have applied the solution and now all works fine, TU

[Rekha J]

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.