Virtualized dropdown list not working as expected

[Michael]

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();
            options.success(items.d);
          },
          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');
          options.success(-1);
        }
      },
      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.

 

[Georgi Krustev]

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:

• http://dojo.telerik.com/@ggkrustev/UJEDO

Regards,
Georgi Krustev
Telerik