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