This is a migrated thread and some comments may be shown as answers.

Telerik Blazor Editor too slow on wasm when inside an <EditForm>

1 Answer 230 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Amanatios Amanatidis
Top achievements
Rank 1
Amanatios Amanatidis asked on 14 Sep 2020, 01:20 PM

Hello,

When using the Blazor Editor I noticed a very large degradation in performance when the user is typing, if the Editor is inside an <EditForm>. I tried increasing the UpdateInterval to 500ms but it did not help much. When the user types fast, the text in the editor lags behind (appears very slowly).

When used outside an <EditForm> then the problem goes away.

Here is a code sample that reproduces the problem (in blazor WASM)

@inherits OwningComponentBase
@page "/TestEditor"
@using Telerik.Blazor.Components.Editor
 
 
<EditForm Model="Model">
    <DataAnnotationsValidator />
    <TelerikEditor Tools="@Tools" @bind-Value="@Model.Content" @ref="EditorRef" Height="500px">
        <EditorCustomTools>
            <EditorCustomTool Name="Keywords">
                <TelerikButtonGroup>
                    <ButtonGroupButton OnClick="Tag1"
                                       IconClass="k-i-background k-icon back-color" Title="Tag1" />
                    <ButtonGroupButton IconClass="k-i-foreground-color k-icon fore-color" Title="Fore Color" />
                </TelerikButtonGroup>
            </EditorCustomTool>
        </EditorCustomTools>
    </TelerikEditor>
</EditForm>
 
@code {
 
    public class EditorModel
    {
        public string Content { get; set; }
    }
 
    public EditorModel Model { get; set; } = new EditorModel();
    public TelerikEditor EditorRef { get; set; }
     
    public List<IEditorTool> Tools { get; set; } = new List<IEditorTool>() {
 
            new EditorButtonGroup(new Bold(), new Italic(), new Underline()),
            new EditorButtonGroup(new AlignLeft(), new AlignCenter(), new AlignRight()),
            new UnorderedList(),
            new EditorButtonGroup(new CreateLink(), new Unlink(), new InsertImage()),
            new InsertTable(),
            new EditorButtonGroup(new AddRowBefore(), new AddRowAfter(), new MergeCells(), new SplitCell()),
            new Format(),
            new FontSize(),
            new FontFamily(),
 
        new CustomTool("Keywords")
        //new CustomTool("CleanFormattingTool"),
        //new CustomTool("InsertHtmlTools")
    };
 
    public async Task Tag1()
    {
        string tag1 = "{##Type##}";
        var temp = new HtmlCommandArgs("insertHtml", tag1);
        await EditorRef.ExecuteAsync(temp);
    }
 
}

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 15 Sep 2020, 02:20 PM

Hi Amanatios,

I have two suggestions for you to try first:

  • increase the UpdateInterval value (read more about it here) so the ValueChanged event fires more rarely and thus, the re-renders on the component with the form are more rare.
  • run the app in Release mode as there is a performance improvement then (read more here). The upcoming .NET 5 is also expected to bring general performance improvements in the framework.

I am attaching here a sample app and a short video that demonstrate this behavior and improvements (perhaps the Release mode difference is less pronounced in the video than in real life but I personally see a difference). The key improvement is in how often the EventCallback fires to re-render the parent component, of course.

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Amanatios Amanatidis
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or