DropDownList virtualization does not use correct pageSize

5 posts, 0 answers
  1. Ivan
    Ivan avatar
    3 posts
    Member since:
    Feb 2014

    Posted 12 Dec 2015 Link to this post

    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

  2. Ivan
    Ivan avatar
    3 posts
    Member since:
    Feb 2014

    Posted 14 Dec 2015 Link to this post

    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.
  3. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 16 Dec 2015 Link to this post

    Hello Ivan,

    The virtualization feature of the DropDownList widget calculates the pageSize automatically. You can find more details here: 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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Ivan
    Ivan avatar
    3 posts
    Member since:
    Feb 2014

    Posted 16 Dec 2015 in reply to Georgi Krustev Link to this post

    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

  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 18 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready