Kendo ui dropdownlist virtualization fails on 2nd page retrieval

Question

Kendo ui version 2015.2.805

I have a kendo dropdownlist configured per examples in the kendo docs to do paging of data. It works for page 1, loading 80 entries from the server using the take/skip parameters. As I page down the list to where new items should be loaded I can see in fiddler that the widget is requesting take=80, skip=80 (which is page 2) and the server is returning the requested records. But the widget just keeps re-requesting the same page over and over until I stop it. During this time the unloaded entries are shown in the list as 'loading' with a animated spinner.

To do virtualization the widget requires a valueMapper (I am using the older kendo UI so it is required). I have implemented it and while I am unclear on what it should return (the item index I believe) I know from the docs that if it requests a non-existent value to return [], and that is what I am doing in that case. I modified the convertValues function to send only a single index instead of the example array, but the valueMapper is only called once upon initialization so any errors in what I'm returning can't have any effect on this problem (I believe).

When the widget is first initialized in fiddler I see that the valueMapper is called with a value of -1 and the server returns [], then the widget calls for the paged data (take=80, skip=0) and the server returns that and the widget displays the data normally.

When I page down to unloaded items, the widget calls for page two data (take=80, skip=80) and the server returns it but the widget keeps re-requesting the data. The widget never calls the valueMapper after the first call (which may be normal).

I have the page size set correctly for the height and itemHeight, but this would only cause page one to be loaded twice (which it is not).

Here is the setup:

wizard.paramMap = function (data, type) {
var params = {};
params.take = data.take;
params.skip = data.skip;
return params;
};


$("#clientField").kendoDropDownList({
autoWidth: true,
dataTextField: "text",
dataValueField: "value",
virtual: {
    itemHeight: 26,
    valueMapper: function(options) {
        $.ajax({
            url: resturi + "clientlist/valueMapper",
            dataType: "json",
            type: "GET",
            data: convertValues(options.value),
            success: function (data) {
                console.log("valueMapper = " + data)
                options.success(JSON.parse(data));
            }
        })
    }
},
height: 520,
dataSource: {
    transport: {
        read: {
            url: resturi + "clientlist",
            dataType: "json",
            type: "get"
        },
        parameterMap: wizard.paramMap
    },
    schema: {
        data: function (response) {
            console.log("clientlist = " + response);
            var o = JSON.parse(response);
            return o;
        }
    },
    pageSize: 80,
    serverPaging: true
}
});

function convertValues(value) {

var data = {};
value = $.isArray(value) ? value : [value];

for (var idx = 0; idx < value.length; idx++) {
    //data["values[" + idx + "]"] = value[idx];
    data["values"] = value[idx];
    break;
}

return data;
}

Answer 1

The data returned by the datasource must return a total record count along with the paged data. This is the same as for paging in the kendo datagrid. So changing server output to:

{"total":X,"data":[...some data...]}

and the schema to:

schema: {
        total: function (response) {
            return (JSON.parse(response).total);
        },
        data: function (response) {
            return (JSON.parse(response).data);
        }
    }

fixes the problem.