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();
                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.

     

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 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:
    Regards,
    Georgi Krustev
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
Back to Top