This is a migrated thread and some comments may be shown as answers.

Debouncing LoadOnDemand WebService call

3 Answers 26 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Matthew
Top achievements
Rank 1
Veteran
Matthew asked on 10 Apr 2021, 03:22 AM

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Matthew
Top achievements
Rank 1
Veteran
answered on 10 Apr 2021, 03:23 AM
*I find that each key press makes an additional request, i.e., debouncing is not working.
0
Peter Milchev
Telerik team
answered on 12 Apr 2021, 03:54 PM

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

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Matthew
Top achievements
Rank 1
Veteran
answered on 13 Apr 2021, 02:00 AM

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

Tags
ComboBox
Asked by
Matthew
Top achievements
Rank 1
Veteran
Answers by
Matthew
Top achievements
Rank 1
Veteran
Peter Milchev
Telerik team
Share this question
or