rich text inside latest version of dialog not working properly

[MIHIR DASH]

Hi,

I have a dialog and inside the dialog I am putting a RTE.

dialog version is "@syncfusion/ej2-ng-popups": "^16.2.45"  and RTE version is "@syncfusion/ej2-ng-richtexteditor": "^16.2.45".

The RTE inside the latest dialog version is not working properly. I have prepared a sample, please take a look at it.

You can see in the sample, I have code for only 2 RTEs, but another RTE is coming above the dialog header.

https://stackblitz.com/edit/rte-sample-mvrq4g?file=src/app/app.component.html

[Prince Oliver]

Hi Mihir, 

Thank you for contacting Syncfusion support. 

We have checked your sample, we were able to replicate the issue. We have provided support for ng-template in dialog control since 2018 volume 2 release, Please refer to the following demo sample: https://ej2.syncfusion.com/16.2.41/angular/demos/#/material/dialog/template 

We suggest you use move the dialog contents inside the ng-template tag to render the contents properly in the latest version. Kindly refer to the following code snippet. 

<ejs-dialog #Dialog class="dialogrte" [isModal]='true' [content]='content' [target]='target' [buttons]='dlgButtons'> 

    <ng-template #dialogTemplate> 

     <div class="e-dlg-header-content"> 

         <button class="e-dlg-closeicon-btn e-control e-btn e-flat e-icon-btn" type="button" title="Close" (click)="closeNav()"> 

                 <span class="e-btn-icon e-icon-dlg-close e-icons"></span> 

             </button> 

         <div class="e-dlg-header" id="_title">DIALOG WITH RTE</div> 

     </div> 

 

   <!-- first RTE outside accordion--> 

     <ejs-richtexteditor id='Default' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal"> 

         <ng-template #valueTemplate> 

             The rich text editor component is WYSIWYG. 

         </ng-template> 

     </ejs-richtexteditor> 

 

     <ejs-accordion> 

         <e-accordionitems> 

             <e-accordionitem header='RichTextEditor'> 

                 <ng-template #content> 

           <!-- first RTE inside accordion--> 

                     <ejs-richtexteditor id='Default2' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal"> 

                         <ng-template #valueTemplate> 

                             The rich text editor component is WYSIWYG. 

                         </ng-template> 

                     </ejs-richtexteditor> 

                 </ng-template> 

             </e-accordionitem> 

         </e-accordionitems> 

     </ejs-accordion> 

    </ng-template> 

</ejs-dialog> 

Please find the modified sample at the following location: https://stackblitz.com/edit/rte-sample-dialog-accordion  

Regards, 

Prince 

[MIHIR DASH]

Hi,

Using, ng-template, the issue with the RTE has been solved. But, now when I close the modal, and open again I am not able to view the RTE and accordion.

I am using angular ' *ngIf ' concept to show hide the dialog.

I tried using the DialogComponent show() and close() methods, but I am getting the below error in the console.

" ERROR

Error: this.Dialog.close is not a function "

I have attached a sample, please take a look into it.

https://stackblitz.com/edit/rte-sample-dialog-accordion-23g43j?file=src/app/app.component.html

Also, can you please tell me how to prevent opening of the modal by default. I need to open the modal only when a button is clicked.

Thanks...

[Rajendran R]

Hi Mihir, 

Thanks for contacting Syncfusion support. 

Query: Now when I close the modal, and open again I am not able to view the RTE and accordion. I am using angular ' *ngIf ' concept to show hide the dialog. 

While validate the provided sample deeply, we found that you have override the z-index value of dialog component using .dialogrte class. So, the reported z-index issue raises on opening the dialog. We have calculated z-index value automatically and set to Dialog. We suggest you to remove this application level z-index value from “dialogrte” in your application to resolve the issue.  

 

You can use the zIndex API in dialog component to set z-index value manually. Please refer the below link. 

https://ej2.syncfusion.com/angular/documentation/dialog/api-dialogComponent.html#zindex 

 

Query: I tried using the DialogComponent show() and close() methods, but I am getting the below error in the console. 

 

You can use hide()method in dialog component  to close the dialog instead of close() method. To know more details, please refer to the below documentation link. 

https://ej2.syncfusion.com/angular/documentation/dialog/api-dialogComponent.html#hide 

 

Query:  can you please tell me how to prevent opening of the modal by default. I need to open the modal only when a button is clicked 

You can achieve your requirement using ngif and visible property of Dialog component. Please refer to the below documentation link for more details about visible property. 

https://ej2.syncfusion.com/angular/documentation/dialog/api-dialogComponent.html#visible 

 

Based on your requirement we have modified your sample. Please refer to the below code blocks. 

[app.component.html] 

 

<div *ngIf = 'loadContent'> 

<ejs-dialog #Dialog class="dialogrte" [isModal]='true' [visible] ='show' 

[target]='target' [buttons]='dlgButtons' > 

  <ng-template #content > 

     

    <div class="e-dlg-header-content"> 

      <button class="e-dlg-closeicon-btn e-control e-btn e-flat e-icon-btn" type="button" title="Close" (click)="closedialog()"> 

                <span class="e-btn-icon e-icon-dlg-close e-icons"></span> 

            </button> 

      <div class="e-dlg-header" id="_title">DIALOG WITH RTE</div> 

    </div> 

 

    <!-- first RTE outside accordion--> 

    <ejs-richtexteditor id='Default' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal"> 

      <ng-template #valueTemplate> 

        The rich text editor component is WYSIWYG. 

      </ng-template> 

    </ejs-richtexteditor> 

 

    <ejs-accordion> 

      <e-accordionitems> 

        <e-accordionitem header='RichTextEditor'> 

          <ng-template #content> 

            <!-- first RTE inside accordion--> 

            <ejs-richtexteditor id='Default2' height='250px' [toolbarSettings]='tools' [(ngModel)]="editorVal"> 

              <ng-template #valueTemplate> 

                The rich text editor component is WYSIWYG. 

              </ng-template> 

            </ejs-richtexteditor> 

          </ng-template> 

        </e-accordionitem> 

      </e-accordionitems> 

    </ejs-accordion> 

  </ng-template> 

</ejs-dialog> 

</div> 

 

 

[app.component.ts] 

 

@ViewChild('Dialog') 

public Dialog: DialogComponent; 

public loadContent: boolean= false; 

public editorVal 

public show = false; 

public tools: object = { 

        items: ['Bold', 'Italic', 'Underline', '|', 

            'Undo', 'Redo', '|', 

            'FontColor', 'BackgroundColor', '|'] 

      }; 

public dlgButtons: Object[] = [ 

          { click: this.closedialog.bind(this), buttonModel: { content: 'CLose', cssClass: 'cancelBtn' } }] 

 

showModal() { 

  this.loadContent = true; 

  let localObj: any = this; 

  setTimeout(function() { 

    localObj.show = true; 

  }, 50) 

} 

 

closedialog() { 

this.Dialog.hide(); 

this.loadContent = false; 

} 

 

 

Sample: 

https://stackblitz.com/edit/rte-sample-dialog-accordion-s6k5vg?file=src%2Fapp%2Fapp.component.css 

 

Kindly look at the sample and let us know whether it meets your requirement in your side. Please let us know if you need further assistance on this. 

 

Regards, 

Rajendran R 

[MIHIR DASH]

Hi,

Thanks for the solution.

I looked at it and tried to implement it in my code.

Query: 

" Now when I close the modal, and open again I am not able to view the RTE and accordion inside the modal. "

 

I am still not able to resolve the above mentioned issue.

Can you please elaborate what I need to do to avoid it.

Because, now also when I am opening the modal first time, I can see the RTE and accordion, but then again when I am closing the modal and opening it for second time on button click, I am not able to see the RTE and the accordions.

I am not able to follow your solution.

Could you please tell again.

Thanks.

[Rajendran R]

Hi Mihir, 

 

Thanks for your update.  

 

We suspect that the reported issue may occurs due to the following reasons. 

 

1. The variable “loadContent” may be missed to reset to false on close the dialog.

 

<div *ngIf = 'loadContent'> 

  <ejs-dialog #Dialog class="dialogrte" [isModal]='true' [visible] ='show' [target]='target' [buttons]='dlgButtons' > 

    <ng-template #content > 

      <!-- Your dialog content here --> 

    </ng-template> 

</ejs-dialog> 

</div> 

 

[app.component.ts] 

 

public loadContent: boolean= false;   // variable set as false to restrict the dialog to render intially 

 

// dialog open action 

showModal() { 

  // While open the dialog, public variable has been set as true to render the dialog 

  this.loadContent = true; 

} 

 

 

closedialog() { 

  // Setting the *ngIf mapping variable as false in dialog close action 

  this.loadContent = false; 

} 

 

 

2. If you used both ngif and visible property together, could you exclude the visible property related code since dialog will be rendered dynamically based on the *ngIf condition.

 

If you are facing the issue still, could you please share the following details with us? 

1. Have you faced any console error on open and close the dialog? If yes, please share the screenshot of the error.
2. Could you please confirm whether Dialog rendered without RTE and Accordion? Or Dialog itself is not rendered?

This will help us to provide the prompt solution at earliest. 

 

Regards, 

Rajendran R