Declined
Last Updated: 31 May 2023 07:43 by ADMIN
Stewart
Created on: 09 May 2023 09:50
Category: Form
Type: Feature Request
0
TelerikForm OnUpdate Debounce

Hi, 

It would be nice to have an OnUpdateDebounce for TelerikForm's OnUpdate.

I am currently using a form to filter information with an API call that is shown in a grid.

It would be nice to reduce the number of calls and with larger data we sometime get an earlier query returned after a later one resulting in showing the results for a search of 'T' instead of 'Tom' 

1 comment
ADMIN
Dimo
Posted on: 10 May 2023 10:15

Hello Stewart,

Built-in OnUpdate debouncing may need to sync with other Form behaviors, which can be undesired or unexpected. After a team discussion, we lean towards keeping the component reactive and leaving custom logic to the app.

You can implement debouncing in the OnUpdate handler quite easily. Does this help you achieve the desired result?

@implements IDisposable

<TelerikForm Model="@Employee"
             Width="300px"
             OnUpdate="@OnFormUpdate" />

OnUpdateLog: @OnUpdateLog
<br />
Debounced DataRequestLog: @DataRequestLog

@code {
    private Person Employee = new Person();

    private string OnUpdateLog { get; set; } = string.Empty;
    private string DataRequestLog { get; set; } = string.Empty;

    private CancellationTokenSource TokenSource = new CancellationTokenSource();

    private async Task OnFormUpdate(FormUpdateEventArgs args)
    {
        OnUpdateLog += "|";

        // debouncing start
        TokenSource.Cancel();
        TokenSource.Dispose();

        TokenSource = new CancellationTokenSource();
        var token = TokenSource.Token;

        await Task.Delay(300, token);
        // debouncing end

        DataRequestLog += "|";
    }

    public void Dispose()
    {
        try
        {
            TokenSource.Dispose();
        }
        catch { }
    }

    protected override void OnInitialized()
    {
        Employee = new Person()
        {
            Id = 1,
            FirstName = "John",
            LastName = "Doe",
            BirthDate = DateTime.Today.AddYears(-30)
        };

        base.OnInitialized();
    }

    public class Person
    {
        public int Id { get; set; }

        public string FirstName { get; set; } = string.Empty;

        public string LastName { get; set; } = string.Empty;

        public DateTime BirthDate { get; set; } = DateTime.Today;
    }
}

Regards,
Dimo
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!