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

2 posts, 0 answers
  1. Amanatios Amanatidis
    Amanatios Amanatidis avatar
    1 posts
    Member since:
    Jul 2008

    Posted 14 Sep 2020 Link to this post

    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);
        }
     
    }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5709 posts

    Posted 15 Sep 2020 Link to this post

    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/.

Back to Top