When using the RTE in a Grid template the RTE does not render correctly.

[Mike Chafin]

When I use the Rich Text Editor in a Data Grid Edit Template it does not render correctly.

The code used comes from the Demos

Please see the attached video

Attachment: RTE_1c71392e.rar

[Revanth Krishnan]

Hi Mike, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When I use Rich Text Editor in a Data Grid, it doesn’t render correctly”. 

 

We are able to reproduce the reported issue from our end. This issue occurs because the Rich Text Editor height is not calculated properly. To resolve the reported issue, we suggest you to call the ‘RefreshUI()’ public method of the Rich Text Editor, in the ‘OnActionComplete’ event of the Grid with a minimal delay to resolve the reported issue. The delay is used to call the ‘RefreshUI’ method after the Rich Text Editor, is rendered inside the Grid edit dialog. We have also prepared a sample that tries to meet your requirements. 

 

Code Snippet: 

 

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

    <GridEvents OnActionBegin="ActionBeginHandler" OnActionComplete="@ActionCompleteHandler" TValue="Order"></GridEvents> 

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

        <Template> 

            @{ 

                        . . . 

                        . . . 

                        <div class="form-group col-md-6"> 

                            <label>Rich Text Editor Inside the Grid Edit Template</label> 

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

                            </SfRichTextEditor> 

                        </div> 

                    </div> 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

</SfGrid> 

 

@code{ 

    SfRichTextEditor rteObj; 

 

    public async Task ActionCompleteHandler(ActionEventArgs<Order> args) 

    { 

        // To check if the ‘OnActionComplete’ is called when editing the grid data. 

        if (args.RequestType == Syncfusion.Blazor.Grids.Action.BeginEdit) 

        { 

            // Please increase or decrease the delay depending on the application load to render properly. 

            await Task.Delay(1100); 

            await this.rteObj.RefreshUI(); 

        } 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163030/ze/Grid_Template_RTE269450949 

 

Please check the above code snippet and the sample and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Mike Chafin]

The workaround works but the flash it causes is annoying 

Is there a  requested fix for this?

[Revanth Krishnan]

Hi Mike, 

 

 

Good day to you. 

 

 

We have validated your query “The workaround works but the flash it causes is annoying. Is there a  requested fix for this?” 

 

Yes, we are able to reproduce the issue from our end and this can be resolved by calling the ‘RefreshUI()’ public method of the Rich Text Editor, in the ‘Created’ event of the Rich Text Editor instead of ‘OnActionComplete’ event of the Grid. We have prepared a sample for your reference, 

 

Code Snippet: 

 

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

    <GridEvents OnActionBegin="ActionBeginHandler" TValue="Order" ></GridEvents> 

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

        <Template> 

            . . . 

            . . . 

                        <div class="form-group col-md-6"> 

                            <label>Rich Text Editor Inside the Grid Edit Template</label> 

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

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

                            </SfRichTextEditor> 

                        </div> 

                    </div> 

                </div> 

            } 

        </Template> 

    </GridEditSettings> 

    . . . 

</SfGrid> 

 

@code{ 

    SfRichTextEditor rteObj; 

 

    public void Created() 

    { 

        this.rteObj.RefreshUI(); 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/163030/ze/Grid_Template_RTE1957331541 

 

Please check the above code snippet and the sample and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Mike Chafin]

That worked well. Thanks.

[Revanth Krishnan]

Hi Mike, 

 

Thanks for the update. 

 

We are glad that the reported issue is resolved, please let us know if you need any further assistance. 

 

Regards, 

Revanth