1. Home
  2. Forum
  3. Blazor
  4. Text Not Consistently Rendering in Rich Text Editor

Text Not Consistently Rendering in Rich Text Editor

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"

3 Replies
PM Pandiyaraj Muniyandi Syncfusion Team 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 “Value” property 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 


AJ Alex Jacobson 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);
        }




PM Pandiyaraj Muniyandi Syncfusion Team 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 


Loader.
Up arrow icon