Implement Client-Side Virtualization in DropDownlist

Updated on Feb 10, 2026

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I create a client-side virtualization functionality in the DropDownList?

Solution

Based on the index of the currently selected value, calculate the indexes of the next items that have to be rendered.

Example

View Source

<input id="orders" style="width: 100%;" />
<script>
    var data = [];

    for(var i = 0; i < 20000; i++) {
      data.push({ ShipName: "Name " + (i + 1), OrderID: i + 1});
    }       

    $("#orders").kendoDropDownList({
      value: 15000,         
      dataTextField: "ShipName",
      dataValueField: "OrderID",
      filter: "contains",
      virtual: {
        itemHeight: 26,
        valueMapper: function(options) {
          var values = convertValues(options.value);
          var indices = [];
          if (values && values.length > 0) {
            for(var j = 0; j < data.length; j ++){
              var order = data[j];
              if (values.indexOf(order.OrderID) > -1) {
                indices.push(j);
              }
            }
          }
          options.success(indices);
        }
      },
      height: 520,
      dataSource: {
        data: data,
        schema: {
          model: {
            fields: {
              OrderID: { type: "number" },
              ShipName: { type: "string" }
            }
          }
        },
        pageSize: 80
      }
    });

    function convertValues(value) {
      var data = [];
      value = Array.isArray(value) ? value : [value];
      for (var idx = 0; idx < value.length; idx++) {
        data.push(value[idx]);
      }
      return data;
    }  
</script>