This is a migrated thread and some comments may be shown as answers.

Virtual Scroll bind Data in Kendo Combobox

1 Answer 805 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Shubhanshu asked on 27 Feb 2016, 06:41 PM

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:https://demos.telerik.com/kendo-ui/combobox/virtualization

And Modified Code is as Following:

<!DOCTYPE html>

<html>

<head>

<base href="https://demos.telerik.com/kendo-ui/combobox/virtualization">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />

<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />

<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>

<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<h4>Orders</h4>

<input id="orders" style="width: 100%" />

</div>

<script>

$(document).ready(function() {

$("#orders").kendoComboBox({

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: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"

},

pageSize: 10,

serverPaging: true,

serverFiltering: true

}

});

</script>

</div>

</body>

</html>

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

Remove the Ajax function inside the valueMapper function

such as :

$.ajax({

url: "//demos.telerik.com/kendo-ui/service/Orders/ValueMapper",

type: "GET",

dataType: "jsonp",

data: convertValues(options.value),

success: function (data) {

options.success(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.

Virtual Scroll bind Data in Kendo Combobox

1 Answer, 1 is accepted