Define Virtual Configuration Declaratively

The following example demonstrates how to define the virtual option of the Kendo UI ComboBox widget by using the data-* attribute.

    <div id="example">
        <div class="demo-section k-header">
            <h4>Search for shipping name</h4>
            <input id="orders" style="width: 400px"
                   data-role="combobox"
                   data-bind="value: order, source: source"
                   data-text-field="ShipName"
                   data-value-field="OrderID"
                   data-filter="contains"
                   data-virtual="{itemHeight:26,valueMapper:orderValueMapper}"
                   data-height="520"
                   />
        </div>

        <script>
            $(document).ready(function() {
                var model = kendo.observable({
                        order: "10548",
                  source: new kendo.data.DataSource({
                    type: "odata",
                    transport: {
                      read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                    },
                    schema: {
                      model: {
                        fields: {
                          OrderID: { type: "number" },
                          Freight: { type: "number" },
                          ShipName: { type: "string" },
                          OrderDate: { type: "date" },
                          ShipCity: { type: "string" }
                        }
                      }
                    },
                    pageSize: 80,
                    serverPaging: true,
                    serverFiltering: true
                  })
                });


                kendo.bind($(document.body), model);
            });

            function orderValueMapper(options) {
                $.ajax({
                  url: "https://demos.telerik.com/kendo-ui/service/Orders/ValueMapper",
                  type: "GET",
                  dataType: "jsonp",
                  data: convertValues(options.value),
                  success: function (data) {
                    options.success(data);
                  }
                })
            }

            function convertValues(value) {
                var data = {};

                value = $.isArray(value) ? value : [value];

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

                return data;
            }
        </script>

        <style>
            html {
                overflow: hidden;
            }
            .demo-section {
                width: 400px;
            }
            .demo-section h2 {
                text-transform: uppercase;
                font-size: 1.2em;
                margin-bottom: 10px;
            }
            .order-id {
                display: inline-block;
                min-width: 60px;
            }
        </style>
    </div>

See Also

• ComboBox JavaScript API Reference
• How to Bypass Boundary Detection
• How to Configure Deferred Value Binding
• How to Expand ComboBox Located in Bootstrap Layout
• How to Implement Cascading with Local Data
• How to Make Visible Input Readonly
• How to Open ComboBox When onFocus is Triggered
• How to Prevent Adding Custom Values
• How to Select Items on Tab
• How to Underline Matched Search

For more runnable examples on the Kendo UI ComboBox, check its how-to articles.