Unplanned
Last Updated: 24 Mar 2021 13:10 by ADMIN
Stefano
Created on: 10 Nov 2020 08:32
Category: DateInput
Type: Bug Report
6
After typing in the date input, its performance slows down in WebAssembly

Create the WebAssembly CRUD example from the New Project Wizard and go to the Form page.

Type a year in the date picker. Do not remove the focus and type another year. After doing this a few times the input visibly lags and the form becomes slow.

---

ADMIN EDIT

A potential workaround could be to disable the pointer events so that the users will have a harder time focusing the input so they are more likely to use the drodown to choose dates:

   .k-datepicker .k-dateinput input {
        pointer-events: none;
    }

another approach is to avoid the two-way binding that happens on every keystroke, and use the OnChange event to update the model, for example:


<TelerikDatePicker Value="@person.StartDate"
                   OnChange="@( (object dt) => person.StartDate = (DateTime)dt )"
                   ValueExpression="@( () => person.StartDate )"
                   Width="100%" Id="StartDateDP">
</TelerikDatePicker>

---

3 comments
ADMIN
Marin Bratanov
Posted on: 24 Mar 2021 13:10

Hi Amanatios,

Your vote is taken into account and that raises the priority of the issue. For the time being you can try the workaround from the opener post, for me it gives me a few more entries before the performance deteriorates.

Editing is disabled to keep the integrity of the thread intact, edits at a later stage can disrupt the flow of the information. If by accident some confidential information was pasted, let us know and we can edit the post to remove it.

 

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

Amanatios Amanatidis
Posted on: 22 Mar 2021 19:37

Correction in my sample above (no editing in comments? )

<TelerikDatePicker @bind-Value="Model.MyDate" />

Amanatios Amanatidis
Posted on: 22 Mar 2021 19:34

Happens to me too.

Very easy to reproduce.

  1. Create a Blazor wasm project and add the telerik blazor components (v2.22)
  2. Add the code below to a page
  3. Pick a valid date using the dropdown
  4. Click on the year part of the date inside the input and start typing valid years without leaving the input
    e.g. 2001, 2002, 2003, 2004 etc
  5. The picker starts to lag getting worse and worse

 

CODE:

<EditForm Model="Model">
    <DataAnnotationsValidator />

    <TelerikDatePicker @bind-Value="Model.MyDate2" />

    <ValidationSummary />
</EditForm>

@code{

public class MyPageModel
{
[Required]
public DateTime? MyDate { get; set; }
}

MyPageModel Model = new MyPageModel();

}