This is a migrated thread and some comments may be shown as answers.

Virtualizaition for DropDownList not working

4 Answers 21 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Sebastian
Top achievements
Rank 1
Sebastian asked on 23 Jun 2015, 07:23 AM

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

4 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Jun 2015, 07:55 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Sebastian
Top achievements
Rank 1
answered on 29 Jun 2015, 10:24 AM

Hello,

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

Regards,

Sebastian

0
Sebastian
Top achievements
Rank 1
answered on 02 Jul 2015, 04:19 PM

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

0
Alexander Valchev
Telerik team
answered on 03 Jul 2015, 09:15 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
DropDownList
Asked by
Sebastian
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Sebastian
Top achievements
Rank 1
Share this question
or