[19.4.0.56][RichTextEditor & Dialog] Toolbar display error

[Mr Sun]

Hi All,

I tested Dialog and RichTextEditor in 19.4.0.56 version and found tool bar display error.

1. RichTextEditor not show tool bar
2. When scroll tool bar display overlap screen.

Please see gif and project attachment for more detail.

Anybody help me, how to fix this issue?

Thank you & Best Regards,

Sun

Attachment: RichTextEditor_Dialog_c0ff808e.zip

[Buvana Sathasivam]

Hi Mr Sun, 

Greetings from Syncfusion support. 

To solve your problem, you need to refresh the SfRichTextEditor component after opening the SfDialog component. Please find the below code and sample for your reference. 

<SfDialog Visible=true Width="500px"> 

   <ChildContent> 

       <DialogEvents Opened="@DialogOpen"></DialogEvents> 

          <SfRichTextEditor @ref="RteObj"…>….</SfRichTextEditor> 

    </ChildContent> 

</SfDialog> 

@code { 

    SfRichTextEditor RteObj; 

    private void DialogOpen() 

    { 

        this.RteObj.RefreshUI(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor_Dialog-1865859039 

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/how-to/rte-inside-dialog 

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_RefreshUIAsync 

Please check the above solution and let us know if your problem is solved or not. 

Regards, 

Buvana S 

[Mr Sun]

Hi  Buvana Sathasivam,

That works for me.

Thank you!

[Buvana Sathasivam]

Hi Mr sun, 

Welcome, we are glad that your reported issues are resolved. Please get back to us if you need any further assistance. 

Regards, 

Buvana S 

[Sven G]

@Buvana Sathasivam

I'm using the built-in dialog for the SfGrid Edit functionality. How to get the RichTextEditor working with this setup?

[Vinitha Jeyakumar]

Hi Sven G,

We suggest you to call the ‘RefreshUI()’ public method of the Rich Text Editor, in the ‘Created’ event of the RichTextEditor. The ‘RefreshUI’ method refreshes the Editor after the Rich Text Editor is rendered inside the Grid edit dialog. We have also prepared a sample that tries to meet your requirement.

Code snippet:

 <SfGrid DataSource="@Orders" AllowPaging="true" @ref="Grid" Toolbar="@(new string[] { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315">

        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog">

        <Template>

            @{

              ......

                ........

                            <SfRichTextEditor @ref="rteObj" EnableXhtml="true" Placeholder="Enter Value">

                                <RichTextEditorEvents Created="@Created"></RichTextEditorEvents>

                            </SfRichTextEditor>

                        </div>

                    </div>

                </div>

            }

        </Template>

    </GridEditSettings>

  

</SfGrid>

@code {

public void Created()

{

    this.rteObj.RefreshUI();

}

}

Sample attached below,

Regards,

Vinitha

Attachment: RTE_Server_11_b0dc8307.zip