DropDownList large list Virtualization

3 posts, 0 answers
  1. DANIEL
    DANIEL avatar
    2 posts
    Member since:
    Feb 2015

    Posted 08 Dec 2016 Link to this post

    Hello I have a dropdownlist object that have around 2000 items to load.  But it is really slow to open the dropdown.  My javascript array containing my objects is local and I don't need to fetch it using webservice in the datasource.

    I tought I could just virtualize it easily by setting virtual: {itemHeight:26}.  Initially it seemed to work fine but when I update the value in the model it fails an I have the following error : "valueMapper is not provided while the value is being set".

    I presume I have to set the valueMapper property to make that work, but the only example I can find is with a remote service.  Here's my attempt but it just fails :

    $scope.myComboBoxOptions = {
        valuePrimitive: true,
        filter: "startswith",
        dataTextField: "CodeDevise",
        dataValueField: "CodeDevise",
        dataSource: data,
        virtual: {
            itemHeight: 26,
            valueMapper: function(options) {
                options.success(data);
            }
        }
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3715 posts

    Posted 12 Dec 2016 Link to this post

    Hello Daniel,

    Indeed, the DropDownList virtualization requires implementing the `valueMapper` function:

    http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#value-mapping

    As the documentation points out, the function should return the index of the selected data item, otherwise the selection would not work. The implementation is not related by any means to the binding type (whether it is local or remote).

    Here is a simple demo that demonstrates how to implement the valueMapper function:

    http://dojo.telerik.com/@ggkrustev/AHukO

    Note that the valueMapper returns directly the value, as it 100% matches the selected index. If it doesn't match index in your case, then you will need to loop the data, find the selected data item by value and return the index.

    Of course, if you don't want to scroll to the selected data item, then you can just use different value mapping:

    http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#recent-updates

    Regards,
    Georgi Krustev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  3. DANIEL
    DANIEL avatar
    2 posts
    Member since:
    Feb 2015

    Posted 12 Dec 2016 in reply to Georgi Krustev Link to this post

    Ok I finally sorted it out.  In the valueMapper I return the index by finding it using a data.indexOf.

    Thanks for your help

    Dan

Back to Top