Virtual Scroll bind Data in Kendo Combobox

2 posts, 0 answers
  1. Shubhanshu
    Shubhanshu avatar
    3 posts
    Member since:
    Feb 2016

    Posted 27 Feb Link to this post

    Hello Everyone,

                              I need to create functionality that include virtual scrolling in kendo Combobox,Please assist me I have done some changes in following code of the demo provided by the kendo demo site, so I didn't understand the reason of some function that they have used in it.

    Kendo Virtual Combobox Demo url is as:

    And Modified Code is as Following:

    <!DOCTYPE html>
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <link rel="stylesheet" href="//" />
        <link rel="stylesheet" href="//" />
        <script src="//"></script>
        <script src="//"></script>
            <div id="example">
                <div class="demo-section k-content">
                    <input id="orders" style="width: 100%" />
                    $(document).ready(function() {
                             filter: "startswith",
                            template: '<span class="order-id">#= OrderID #</span> #= ShipName #, #= ShipCountry #',
                            dataTextField: "ShipName",
                            dataValueField: "OrderID",
                            virtual: {
                                itemHeight: 26,
                                valueMapper: function(options) {
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "//"
                                pageSize: 10,
                                serverPaging: true,
                                serverFiltering: true


    I have done some changes in the given demo code which are as following:

    • Remove the Ajax function inside the valueMapper function

             such as :

                                       url: "//",
                                       type: "GET",
                                       dataType: "jsonp",
                                       data: convertValues(options.value),
                                       success: function (data) {
    but it is working at all after that so please tell me what is the use of ValueMapper function ?

    • I have also removed the convertValues() function, but code is working fine, so please tell me what is the use of convertValues() function ?

      I am totally confused from the above code, please help me out by providing the simple strategic code which is useful for implement virtual scrolling in Kendo Combobox.

  2. Georgi Krustev
    Georgi Krustev avatar
    3687 posts

    Posted 02 Mar Link to this post

    Hello Shubhanshu,

    I would like to suggest you examine the Virtualization help topic, which explains what valueMapper is intended to do: The convertValues method is a helper function convert selected values in a service-friendly format. It is not obligatory to use it. You will need to implement the valueMapper though.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top