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

[Solved] Virtual Scroll bind Data in Kendo Combobox

1 Answer 924 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.

[Solved] Virtual Scroll bind Data in Kendo Combobox

1 Answer, 1 is accepted