Virtualizaition for DropDownList not working

5 posts, 0 answers
  1. Sebastian
    Sebastian avatar
    17 posts
    Member since:
    Mar 2015

    Posted 23 Jun 2015 Link to this post

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 25 Jun 2015 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Sebastian
    Sebastian avatar
    17 posts
    Member since:
    Mar 2015

    Posted 29 Jun 2015 in reply to Alexander Valchev Link to this post

    Hello,

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

    Regards,

    Sebastian

  5. Sebastian
    Sebastian avatar
    17 posts
    Member since:
    Mar 2015

    Posted 02 Jul 2015 Link to this post

    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

  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Jul 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready