New to Kendo UI for jQuery? Start a free 30-day trial

Virtual

configuration

Enables the virtualization feature of the widget. The configuration can be set on an object, which contains two properties - itemHeight and valueMapper.

For detailed information, refer to the article on virtualization.

virtual

Boolean|Object

Default: false

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
    virtual: true,
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: {
            read: function(options) {
                // simulate large dataset
                var data = [];
                for(var i = 0; i < 10000; i++) {
                    data.push({ text: "Item " + i, value: i });
                }
                options.success(data);
            }
        }
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
</script>

Specifies the height of the virtual item. All items in the virtualized list must have the same height. If the developer does not specify one, the framework will automatically set itemHeight based on the current theme and font size.

Default: null

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
    virtual: {
        itemHeight: 40
    },
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: {
            read: function(options) {
                // simulate large dataset
                var data = [];
                for(var i = 0; i < 10000; i++) {
                    data.push({ text: "Item " + i, value: i });
                }
                options.success(data);
            }
        }
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
</script>

virtual.mapValueTo

String

The changes introduced with the Kendo UI R3 2016 release enable you to determine if the valueMapper must resolve a value to an index or a value to a dataItem. This is configured through the mapValueTo option that accepts two possible values - "index" or "dataItem". By default, the mapValueTo is set to "index", which does not affect the current behavior of the virtualization process.

For more information, refer to the article on virtualization.

Default: "index"

<input id="multicolumncombobox" />
<script>
$("#multicolumncombobox").kendoMultiColumnComboBox({
    virtual: {
        mapValueTo: "dataItem",
        valueMapper: function(options) {
            // implement value mapping logic
            options.success([]);
        }
    },
    dataTextField: "text",
    dataValueField: "value",
    dataSource: {
        transport: {
            read: function(options) {
                // simulate large dataset
                var data = [];
                for(var i = 0; i < 10000; i++) {
                    data.push({ text: "Item " + i, value: i });
                }
                options.success(data);
            }
        }
    },
    columns: [
        { field: "text", title: "Text" },
        { field: "value", title: "Value" }
    ]
});
</script>

virtual.valueMapper

Function

The widget calls the valueMapper function when the widget receives a value, that is not fetched from the remote server yet. The widget will pass the selected value(s) in the valueMapper function. In turn, the valueMapper implementation should return the respective data item(s) index/indices.

Important

As of the Kendo UI R3 2016 release, the implementation of the valueMapper function is optional. It is required only if the widget contains an initial value or if the value method is used.

Default: null

<input id="orders" style="width: 400px" />
<script>
    $(document).ready(function() {
        $("#orders").kendoMultiColumnComboBox({
            template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
            dataTextField: "ShipName",
            dataValueField: "OrderID",
            columns: [
              { field: "ShipName" },
              { field: "OrderID" }
            ],
            virtual: {
                itemHeight: 26,
                valueMapper: function(options) {
                    $.ajax({
                        url: "https://demos.telerik.com/service/v2/core/Orders/ValueMapper",
                        type: "GET",
                        data: convertValues(options.value),
                        success: function (data) {
                            //the **data** is either index or array of indices.
                            //Example:
                            // 10258 -> 10 (index in the Orders collection)
                            // [10258, 10261] -> [10, 14] (indices in the Orders collection)

                            options.success(data);
                        }
                    })
                }
            },
            height: 520,
            dataSource: {
                type: "odata-v4",
                transport: {
                    read: "https://demos.telerik.com/service/v2/odata/Orders"
                },
                pageSize: 80,
                serverPaging: true,
                serverFiltering: true
            }
        });
    });

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

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

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

        return data;
    }
</script>

<div class="demo-section k-header">
    <h4>Search for shipping name</h4>
    <input id="orders" style="width: 400px"
           data-role="multicolumncombobox"
           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"
           data-columns="[
            { field: 'ShipName' },
            { field: 'OrderID' }
           ]"
           />
</div>

<script>
    $(document).ready(function() {
        var model = kendo.observable({
                order: "10249",
          source: new kendo.data.DataSource({
            type: "odata-v4",
            transport: {
              read: "https://demos.telerik.com/service/v2/odata/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/service/v2/core/Orders/ValueMapper",
          type: "GET",
          data: convertValues(options.value),
          success: function (data) {
            options.success(data);
          }
        })
    }

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

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

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

        return data;
    }
</script>

Virtual

virtual

virtual.itemHeight

virtual.mapValueTo

virtual.valueMapper