DropDownList virtualization does not use correct pageSize

[Ivan]

I have implemented the Kendo UI DropDownList with virtualization and server filtering. I have set the pageSize to 250 (this is the optimal size for my application).

When the DropDownList is initialized the first read uses the correct pageSize of 250, but when I scroll so that the next page should be called, the pageSize retrieved from options.data.pageSize and the page options.data.page does not have the correct value (the pageSize is 46/47 and the page is 6/7, but they should be 250 and 2). As I have 2000+ items in my DropDownList, this leads to a lot of requests. If the pageSize were kept to 250 there would be 8 requests for 2000 items, but as it is changed to 46 there are 44 requests to retrieve all items. How can I configure the DropDownList to use the pageSize that I have specified. I have no idea where the new page size and page values come from, but they are wrong in my opinion.

I also stumbled upon another problem. As I don't have a preselected value for my DropDownList, I don't need the valueMapper function, but there is no need to work around this, so I had to hardcode the index to 0. I tried to pass no value to the options.success();  function, but this resulted in breaking the dropdown. Is there a way to skip this or to pass some other value? I don't want to have a preselected value when the dropdown is initialized (and with this HACK) the first item is selected.

 

I have made an example of whantI have implemented the Kendo UI DropDownList with virtualization and server filtering. I have set the pageSize to 250 (this is the optimal size for my application).
When the DropDownList is initialized the first read uses the correct pageSize of 250, but when I scroll so that the next page should be called, the pageSize retrieved from options.data.pageSize and the page options.data.page does not have the correct value (the pageSize is 46/47 and the page is 6/7, but they should be 250 and 2). As I have 2000+ items in my DropDownList, this leads to a lot of requests. If the pageSize were kept to 250 there would be 8 requests for 2000 items, but as it is changed to 46 there are 44 requests to retrieve all items. How can I configure the DropDownList to use the pageSize that I have specified. I have no idea where the new page size and page values come from, but they are wrong in my opinion.
I also stumbled upon another problem. As I don't have a preselected value for my DropDownList, I don't need the valueMapper function, but there is no need to work around this, so I had to hardcode the index to 0. I tried to pass no value to the options.success();  function, but this resulted in breaking the dropdown. Is there a way to skip this or to pass some other value? I don't want to have a preselected value when the dropdown is initialized (and with this HACK) the first item is selected.

I have made an example of what I am talking about: I have implemented the Kendo UI DropDownList with virtualization and server filtering. I have set the pageSize to 250 (this is the optimal size for my application).
When the DropDownList is initialized the first read uses the correct pageSize of 250, but when I scroll so that the next page should be called, the pageSize retrieved from options.data.pageSize and the page options.data.page does not have the correct value (the pageSize is 46/47 and the page is 6/7, but they should be 250 and 2). As I have 2000+ items in my DropDownList, this leads to a lot of requests. If the pageSize were kept to 250 there would be 8 requests for 2000 items, but as it is changed to 46 there are 44 requests to retrieve all items. How can I configure the DropDownList to use the pageSize that I have specified. I have no idea where the new page size and page values come from, but they are wrong in my opinion.
I also stumbled upon another problem. As I don't have a preselected value for my DropDownList, I don't need the valueMapper function, but there is no need to work around this, so I had to hardcode the index to 0. I tried to pass no value to the options.success();  function, but this resulted in breaking the dropdown. Is there a way to skip this or to pass some other value? I don't want to have a preselected value when the dropdown is initialized (and with this HACK) the first item is selected.

I have made an example of what I am talking about: http://dojo.telerik.com/@ivanst.stoyanov/eZoSu/3

 Reading the documentation I have noticed that the Preview of some of your examples do not work:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-virtual

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-virtual.itemHeight

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-virtual.valueMapper

 

Ivan

[Ivan]

PS. In order for the example to work, please allow the insecure SSL connection. You will see it as an error in the browser console.

[Georgi Krustev]

Hello Ivan,

The virtualization feature of the DropDownList widget calculates the pageSize automatically. You can find more details here:

• http://docs.telerik.com/kendo-ui/web/combobox/virtualization#data-and-ui-combined

Basically, the page size is determined based on the list height and there is no way to manipulate that value. I am afraid that separation between Data and UI virtualization is not supported.

As to the value mapper, it is required for the time being. If you do not want to calculate any values, then you can just return "-1", as it is valid index.

Thank you for drawing our attention to the demos. We will address the errors soon to avoid further frustrations. For now users can just open the demos in "Open in Dojo" to review the whole demo separately.

Regards,
Georgi Krustev
Telerik

 

 

[Ivan]

Hi Georgi,

Thanks a lot for your answer! Is the separation between Data and UI virtualizaiton supported in the KendoUI Grid?

In other words if I use the Grid instead of the dropdown with remote data virtualization will I be able to set the pageSize and the Grid uses this pageSize to calculate its pages, rather than calculate the pageSize on its own?

Please note that this is crucial because the data is being fetched from a remote service, which enforces a pretty stringent request throttling, 2 calls per second. So getting the data in batches of 30 or 40 instead of the maximum 250 is not really feasible.

Thanks,

Ivan

[Georgi Krustev]

Hello Ivan,

The Grid widget separates Data from UI virtualization, hence you will be able to define bigger page size than the items rendered in the grid.

As to the DropDownList widget, one possible solution would be to manage the data ranges manually using a custom DataSource transport. Basically, when the widget requests pages with "46" items page size, you will request 250 items and will return only the required "46" of them. In other words, you will need to request the data manually and maintain it on the client in order to allow the virtualization to work without a change.

Regards,
Georgi Krustev
Telerik