Virtualized dropdown list not working as expected

2 posts, 0 answers
  1. Michael
    Michael avatar
    4 posts
    Member since:
    Jun 2016

    Posted 22 Jun Link to this post

    Was trying to create a virtualized dropdown list that uses client side paging.  This is options object used to create the dropdown:

          dataSource: {
            transport: {
              read: function(options) {
                var items = dataService.getItemData();
              schema: {
                data: "d", //root element that contains data array
                total: "d.length" //total amount of records
              serverPaging: false,
            pageSize: 80,
          dataTextField: "itemName",
          dataValueField: "id",
          virtual: {
            itemHeight: 26,
            valueMapper: function(options) {
                        console.log('in value mapper function');
          height: 290

    dataService.getItemData() is an angular service that returns the data which is an object:

          d: arrayOfItemObjects

    The issue i'm having is that while the list renders it only has the first 80 items in it and as i scroll it never gets any additional items even though it has the entire list client side.  I'm not sure what i'm doing wrong...any help is appreciated.


  2. Georgi Krustev
    Georgi Krustev avatar
    3687 posts

    Posted 27 Jun Link to this post

    Hello Michael,

    The widget displays only first page (80 items in this case), because the totalvalue is not defined correctly. If you would like to set it dynamically, then a callback function should be used:
    total: function(response) {
      return response.d.length;

    Here is a demo that demonstrates this configuration in action:
    Georgi Krustev
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top