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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Text Not Consistently Rendering in Rich Text Editor

Thread ID:

Created:

Updated:

Platform:

Replies:

148930 Nov 8,2019 03:58 AM UTC Nov 12,2019 09:46 AM UTC Blazor 3
loading
Tags: Rich Text Editor
Alex Jacobson
Asked On November 8, 2019 03:58 AM UTC

We're using 17.3.0.18. I don't know if this has been fixed in a later version, but I'm finding that when I load up a rich text editor for the first time, it doesn't always display the string that I assign to it's Value parameter. There's a dropdown list above the editor, and it only renders "@TranslationText" when I fiddle with that dropdown, which is not how it should work.

Relevant snippets:

<EjsRichTextEditor @ref="RteObj" Value="@TranslationText">
                    <RichTextEditorToolbarSettings Type="ToolbarType.MultiRow" EnableFloating="false"
                                                   Items="@(new[] {"Undo", "Redo", "|",
                                "Bold", "Italic", "Underline", "StrikeThrough","|",
                                "FontName", "FontSize", "FontColor", "BackgroundColor", "|",
                                "LowerCase", "UpperCase", "SubScript", "SuperScript", "|",
                                "Formats", "Alignments", "OrderedList", "UnorderedList", "Outdent", "Indent", "|",
                                "CreateLink", "Image", "|",
                                "ClearFormat", "Print", "SourceCode", "FullScreen"})">
                    </RichTextEditorToolbarSettings>
</EjsRichTextEditor>

@code {
    [Parameter]
    public long MessageId { get; set; }
    [Parameter]
    public int LanguageId { get; set; }

    List<LanguageReadModel> SelectableLanguages { get; set; } = new List<LanguageReadModel>();

    MessageTranslationReadModel CurrentTranslation { get; set; } = new MessageTranslationReadModel();

    EjsRichTextEditor RteObj;
    int? SelectedLanguage;
    string TranslationText = "";

    bool SaveDialogVisible = false;
    ButtonModel OkBtn = new ButtonModel { Content = "Love that", IsPrimary = true };

    protected override async Task OnInitializedAsync()
    {

        var translation = await MessageService.GetSingleTranslationAsync(MessageId, LanguageId);
        if (translation.IsSuccess)
        {
            CurrentTranslation = translation.Result;
            TranslationText = translation.Result.TranslatedMessageText;
        }

        var langRes = await MessageService.GetLanguagesWithoutATranslationAsync(MessageId, LanguageId);
        if (langRes.IsSuccess)
        {
            SelectableLanguages = langRes.Result.ToList();
            SelectedLanguage = LanguageId;
            //SelectableLanguages.Add(new LanguageReadModel { LanguageId = 100, Name = "A Language" });
            //SelectableLanguages = SelectableLanguages.OrderBy(l => l.LanguageId).ToList();
        }

    }
}

I tried to use the RefreshUI method on the editor, but that didn't work AND it threw an exception in the web console: "TypeError: Cannot read property '0' of undefined"

Pandiyaraj Muniyandi [Syncfusion]
Replied On November 8, 2019 11:55 AM UTC

Hi Alex, 
 
Greetings from Syncfusion support. 
 
Query 1: We're using 17.3.0.18. I don't know if this has been fixed in a later version, but I'm finding that when I load up a rich text editor for the first time, it doesn't always display the string that I assign to it's Value parameter. There's a dropdown list above the editor, and it only renders "@TranslationText" when I fiddle with that dropdown, which is not how it should work. 
 
We have validated the reported issue with shared code blocks. But we were unable to reproduce the issue “Text Not Consistently Rendering in Rich Text Editor” at our end. The issue may occur due to missing @bind prefix in the “Valueproperty declaration, because its two-way binding property. So, we suggest you configure @bind prefix to Value property as follows 
 
 
<EjsRichTextEditor ID="description" @bind-Value="@TranslationText"> 
</EjsRichTextEditor> 
 
 
We have prepared sample for your reference, get it from below link 
 
If you still facing any issue, kindly provide the following details which help us to provide a solution at earliest. 
 
Query 2: I tried to use the RefreshUI method on the editor, but that didn't work AND it threw an exception in the web console: "TypeError: Cannot read property '0' of undefined" 
 
We have validated this issue and unable to reproduce from our end when calling RefreshUI method from code behind. It may occur when you call this method in the browser developer console window with an invalid target element. Call this method like below using RTE reference. 
 
     
public void RefreshRTE() 
{ 
    this.RteObj.RefreshUI(); 
} 
 
Regards, 
Pandiyaraj 


Alex Jacobson
Replied On November 11, 2019 04:33 PM UTC

Hello!

It looks like this was the result of more weirdness with populating my data with async services. We had another page that populated its binding variable with synchronous services, and it didn't have the problem I had. I'm starting to see a pattern....

Thankfully, I didn't need to stop using async to get around this issue. My coworker found out that I could call UpdateValue immediately after loading our data, and that fixed everything! See below:

var translation = await MessageService.GetSingleTranslationAsync(MessageId, LanguageId);
        if (translation.IsSuccess)
        {
            CurrentTranslation = translation.Result;
            TranslationText = translation.Result.TranslatedMessageText;
            RteObj.UpdateValue(TranslationText);
        }




Pandiyaraj Muniyandi [Syncfusion]
Replied On November 12, 2019 09:46 AM UTC

Hi Alex, 
 
Thanks for your update. 
 
Query 1: It looks like this was the result of more weirdness with populating my data with async services. We had another page that populated its binding variable with synchronous services, and it didn't have the problem I had. I'm starting to see a pattern.... 
 
We have resolved this issue in our latest NuGet package version 17.3.26-beta, once upgrade the NuGet in your application issue won’t occur. 
 
Query 2: Thankfully, I didn't need to stop using async to get around this issue. My coworker found out that I could call UpdateValue immediately after loading our data, and that fixed everything! 
 
The shared code block used UpdateValue() method is a internal method. You can proceed with your solution until upgrade into the latest package. If we make source changes in future, mentioned method makes an issue with your application. 
 
Regards, 
Pandiyaraj 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon