Virtualize ComboBox with MVVM

Environment

Product	Progress® Kendo UI® MVVM Architecture
Operating System	Windows 10 64bit
Browser	All

Description

How can I implement virtualization for the ComboBox in an MVVM-binding scenario?

Solution

Specify the itemHeight and the valueMapper in the data-virtual attribute of the ComboBox.

<div id="example">
        <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({
        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>

See Also

• Virtualization of the ComboBox