Debouncing LoadOnDemand WebService call

[Matthew]

I found this thread but couldn't get the behavior I wanted.

I would like to debounce requests to a WebService method I attached to a RadComboBox.

I am using Lodash and Underscore.js' "debounce" function, but I find that each keypress or even focus on the RadComboBox (perhaps I should set_cancel(true) on focus).

 

My current setup is:

HTML:

1.<telerik:RadComboBox OnClientItemsRequesting="requesting" EnableLoadOnDemand="true" AllowCustomText="true" ItemRequestTimeout="0">
2.    <WebServiceSettings Path="Service.asmx" Method="GetData">
3.    </WebServiceSettings>
4.</telerik:RadComboBox>

 

JS:

01.function requesting(sender, args) {
02.    let context = args.get_context();
03.    context["FilterString"] = args.get_text();
04.
05.    // Set a delay before requesting items
06.    let debounceTimer = 1000;
07.
08.    // Begin debouncing
09.    _.debounce(setContext, debounceTimer);
10.}
11.
12.function setContext(sender, args) {
13.    var context = args.get_context();
14.    if (!sender.prefix)
15.        sender.prefix = "";
16.    if (!window.event || sender.directcall) {
17.        sender.prefix = args.get_text();
18.    }
19.    var id = sender.get_id();
20.    // Limit minimum character length to 3
21.    if (sender.prefix.length < 3) {
22.        // Ensure clear is only called when backspacing to an empty value
23.        if (window.event && window.event.type != "click") {
24.            clearText(); // Clear results if nothing is typed in
25.        }
26.        args.set_cancel(true); // cancel server call if nothing typed in
27.        return false;
28.    }
29.    context["prefix"] = sender.prefix;
30.    return true;
31.}

 

Is there something I am missing/incorrect in my setup?

 

The pseudocode I am thinking goes along the lines of:

1. Type at least 3 or more characters in the combo box input

2. Wait 1000ms

3. If another key is entered within 1000ms, reset debounce timer

4. Else proceed call to WebService method

5. Combo box populated

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Matthew]

*I find that each key press makes an additional request, i.e., debouncing is not working.

[Peter Milchev]

Hello Matthew,

The MinFilterLength and the ItemRequestTimeout properties are doing just that, so if you set them, you would not need any custom debouncing code.

 <telerik:RadComboBox ItemRequestTimeout="1000" MinFilterLength="3" ID="RadComboBox1" runat="server" RenderMode="Lightweight">

Give this a try and let me know if that is the functionality you are after.

Regards,
Peter Milchev
Progress Telerik

[Matthew]

Hey Peter, that worked like a charm. Thanks for pointing those out to me!