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
Hello everyone,
We are closing this public item due to lack of enough information, inactivity, and possible inability to fix this out-of-the-box. If we receive the requested details, we can reopen the request.
@Tareq, you can learn more about the Form re-rendering algorithms in our documentation. Using a <FormItem> <Template> re-renders the Form by design. The performance in this case will depend on the amount of HTML to re-render, as well as the amount of data that is transferred through SignalR (in server apps).
A possible workaround for your case is to replace the Editors with some read-only content (e.g. MarkupStrings) until the user decides to edit specific content by clicking a button. In this way there will be only one "active" Editor on the web page.
Regards,
Dimo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
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