Need More Info
Last Updated: 05 Dec 2023 09:59 by ADMIN
Tareq
Created on: 28 Nov 2023 13:04
Category: UI for Blazor
Type: Feature Request
0
Performance Issues with Multiple TelerikEditor Controls in Form

We have a form with multiple TelerikEditor controls bound via @bind-value. The issue arises when there are more than 2 TelerikEditors; the performance is significantly impacted for all input fields. Typing experiences delays, making fast typing impractical.

This performance degradation is attributed to the fact that the page undergoes frequent re-renders when typing into the input fields. Interestingly, this behavior does not occur when TelerikEditor is excluded from the form or page.

While the DebounceDelay property in TelerikEditor helps improve its performance, it does not extend its influence to other input fields in the form or page. Are you familiar with this issue, and do you have any recommendations for addressing or mitigating it?

Using:
WebAssembly
Telerik 4.0.1

1 comment
ADMIN
Hristian Stefanov
Posted on: 05 Dec 2023 09:59

Hi Tareq,

To investigate the issue, I attempted to replicate the described behavior by creating an example with multiple Editors inside a Form. On my end, it seems that the performance is OK, typing fast is feasible. I'm sharing the sample I'm testing with below for your reference, so you can compare it with the actual application to determine if anything is missing or if there are other factors that may be causing the issue.

@using System.ComponentModel.DataAnnotations

<TelerikForm EditContext="@EditContext">
    <FormValidation>
        <DataAnnotationsValidator></DataAnnotationsValidator>
        <ValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem>
            <Template>
                <label for="country">Destination country:</label>
                <TelerikEditor @bind-Value="@MyModel.Country"
                               Width="650px" 
                               Height="100px">
                </TelerikEditor>
            </Template>
        </FormItem>
        <FormItem>
            <Template>
                <label for="city">Destination city:</label>
                <TelerikEditor @bind-Value="@MyModel.City"
                               Width="650px"
                               Height="100px">
                </TelerikEditor>
            </Template>
        </FormItem>
        <FormItem>
            <Template>
                <label for="city">Third Editor Value:</label>
                <TelerikEditor @bind-Value="@MyModel.ThirdEditor"
                               Width="650px"
                               Height="100px">
                </TelerikEditor>
            </Template>
        </FormItem>
        <FormItem Field="@nameof(TemplateModel.FirstInput)" LabelText="First Input" Hint="Enter first input"></FormItem>
        <FormItem Field="@nameof(TemplateModel.SecondInput)" LabelText="Second Input" Hint="Enter second input"></FormItem>
        <FormItem Field="@nameof(TemplateModel.ThirdInput)" LabelText="Third Input" Hint="Enter third input"></FormItem>
        <FormItem>
            <Template>
                <label for="visited">First time to visit:</label>
                <TelerikSwitch @bind-Value="@MyModel.FirstTime"></TelerikSwitch>
            </Template>
        </FormItem>
    </FormItems>
</TelerikForm>


@code {
    private TemplateModel MyModel { get; set; } = new TemplateModel();

    private EditContext EditContext { get; set; }

    protected override void OnInitialized()
    {
        EditContext = new EditContext(MyModel);
        base.OnInitialized();
    }

    public class TemplateModel
    {
        public TemplateModel()
        {

        }

        [Required]
        public string Country { get; set; }

        [Required]
        public string City { get; set; }
        
        [Required]
        public string ThirdEditor { get; set; }

        [Range(typeof(bool), "true", "true", ErrorMessage = "You must confirm first time.")]
        public bool FirstTime { get; set; }
        
        public string FirstInput { get; set; }

        public string SecondInput { get; set; }

        public string ThirdInput { get; set; }
    }
}

As a next step, could you modify the above sample to reproduce the issue you are facing? This will allow me to see the behavior firsthand and delve deeper into the scenario.

I look forward to your reply.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!