Virtualizaition for DropDownList not working

[Sebastian]

Hello,

I want to use the virtualization feature of the DropDownList component but it does not work correctly. In the attached screenshot you see that there is not scrollbar in the dropdown and the list of elements is larger than the dropdown box. Furthermore, the gap between the elements is too large (I used the settings for itemHeight and height as specified on your example page).

Here is my code:

 

$(document).ready(function() {
    $("#select14349870649078014764761").kendoDropDownList({
        filter: 'contains',
        dataTextField: 'project_title',
        dataValueField: 'project_id',
        virtual: {
           valueMapper: function(options) {
               $.ajax({
                   url: '/project/getRowNumber',
                   type: 'GET',
                   data: {
                       filterValue: options.value
                   },
                   success: function(data) {
                       options.success(data);
                   }
               });
           }
        },
        dataSource: {
            pageSize: 80,
            serverPaging: true,
            serverFiltering: true,
            transport: {
                read: {
                    url: '/project/select?filterProperty=title'
                }
            },
            schema: {
                model: {
                    fields: {
                        project_title: {type: 'string'},
                        project_id: {type: 'number'}
                    }
                }
            }
        }
    });
});

Regards

Sebastian

[Alexander Valchev]

Hi Sebastian,

Such issue is likely to occur if you use older CSS version.

What Kendo UI version is included in your project? Does the stylesheet version matches JavaScript version?

Regards,
Alexander Valchev
Telerik

 

 

[Sebastian]

Hello,

I testet again with the new Kendo version and it seems to work now.

Regards,

Sebastian

[Sebastian]

Hello, me again.

Unfortunately, further testings with more entries showed that my dropdown does only display the first n entries (n = pageSize). And it is not possible to scroll down and reload the other entries which are not included in the current page. If I enter a string matching an entry which is not included in the first page, it is found but after that, the select only shows one entry (The first one in the list).

Furthermore, I copied the virtualization example from the Telerik page into my application and it runs. So, my JS and CSS versions must be correct.

My idea is if it could work if I change the data type to from JSON to ODATA. Does the component work with JSON or only with ODATA?

Regards,

Sebastian

[Alexander Valchev]

Hi Sebastian,

The issue should not be connected with the data type of the request. There is no point to test with oData.

In order to investigate further the issue we will need a sample project with mock data? Can you isolate the problem in a separate test project and send it to us?

Looking forward to your reply.

Regards,
Alexander Valchev
Telerik