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

Virtualization and scrolling / too much server calls

6 Answers 96 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Stephane
Top achievements
Rank 1
Iron
Stephane asked on 08 Dec 2020, 09:24 AM
Hello,

If the data virtualization is enabled, when the user scrolls down in the DropDownList, a lot of server calls are done with different page numbers (sometimes, more than 10 calls are done). I would like to have only one server call when the user stops scroll, because my SQL query is complex and take times. I tried to play with the not documented delay options of the kendo.virtualist but it doesn't work, it just delays all the calls.

Is there a way to not have all these intermediates server calls ?

6 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 11 Dec 2020, 06:06 AM

Hello Stephane,

The calls that are made to the server are based on two things:

  • The page size defined in the DropDownList's datasource
  • Users' interaction with the component - the more its items are scrolled, every time the records that are about to be displayed in the DropDownList are fetched from the backend. 

You can test our DropDownList virtualization demo. The pageSize here is 80. Open the Network tab, start scrolling the DropDownList and see when a new request is made. 

To lower the number of server requests, you can set a bigger number for the pageSize. The pageSize depends on a formula that consists of the height and itemHeight options. When you edit the pageSize, be sure that the two parameters are configured as described here

In the linked article you can also see that the following "Defining incorrect pageSize values triggers multiple initial requests. To avoid that, use the formula to calculate the pageSize value." which could also be the reason for the multiple requests reported by you. 

I hope the above information will help you resolve the issue in your application.

Regards,
Petar
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/.

0
Stephane
Top achievements
Rank 1
Iron
answered on 13 Dec 2020, 07:12 PM

[quote] the more its items are scrolled, every time the records that are about to be displayed in the DropDownList are fetched from the backend[/quote]
This is clearly the problem. We should have a kind of timer to wait for the end of the scrolling before doing a server request.
I share a sample project in attachment. When you scroll down as quickly as possible, there will be 4 or 5 sever requests. If the user scroll down slowly, it will be more than 30 server requests !
These intermediate requests are totally unnecessary and very expensive when you have complex SQL database requests.

0
Petar
Telerik team
answered on 16 Dec 2020, 03:27 PM

Hi Stephane,

Thank you for the provided project. I've tested it and the requests are executed correctly on my end, no matter how fast I am scrolling. I assume that the behavior in your project is different and if I correctly understand your scenario, you can try using a smaller page size for your requests. Thus the SQL request should finish faster. 

The other approach I can suggest is demonstrated in the attached example. It uses the requestStart and requestEnd events of the datSource to enable/disable the scrolling in the popup list under the DropDownList. Thus when there is a request that hasn't finished yet, the user won't be able to scroll. 

function onRequestStart(e) {
    $(".k-virtual-content").css("overflow", "hidden");
}

function onRequestEnd(e) {
    $(".k-virtual-content").css("overflow", "auto");
}

Check the attached project and let me know if it demonstrates what you need in your application. 

Regards,
Petar
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/.

0
Stéphane
Top achievements
Rank 1
answered on 17 Dec 2020, 03:40 PM

This workaround is not acceptable for our users. I share my solution: I fixed the Kendo code by rewriting the kendo.throttle method as I think it should be :

kendo.throttle = function (fn, delay) {
  let timeout;
 
  if (!delay || delay <= 0) {
    return fn;
  }
 
  const throttled = function (...args) {
    const exec = () => {
      fn.apply(this, args);
    }
 
    clearTimeout(timeout);
    timeout = setTimeout(exec, delay);
  };
 
  throttled.cancel = function () {
    clearTimeout(timeout);
  };
 
  return throttled;
};
0
Petar
Telerik team
answered on 17 Dec 2020, 04:21 PM

Hi Stéphane,

Thank you for sharing your solution for the discussed issue! It could help someone who hits a similar to your issue. 

As your code modifies the built-in Kendo UI logic, it is essential to note the other users who decide to use your code that your solution resolves your issue, but it could affect other functionality in the different components shipped with the UI for ASP.NET Core suite.

The usage of the shared by Stéphane code modification should be applied at your own risk. 

Regards,
Petar
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/.

0
Stéphane
Top achievements
Rank 1
answered on 17 Dec 2020, 04:32 PM
Yes, it's not an ideal solution and we would prefer to have an option with this behaviour. Unfortunately, we have no choice currently.
Tags
DropDownList
Asked by
Stephane
Top achievements
Rank 1
Iron
Answers by
Petar
Telerik team
Stephane
Top achievements
Rank 1
Iron
Stéphane
Top achievements
Rank 1
Share this question
or