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

Prevent fetching all items from remote dataSource on initial arrow click

2 Answers 434 Views

ComboBox

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

Trinet asked on 27 Dec 2016, 09:44 AM

combobox.png

Working example: http://dojo.telerik.com/uduto

<div id="example">

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

<h4>Find a product</h4>

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

</div>

<script>

$(document).ready(function() {

$("#products").kendoComboBox({

placeholder: "Select product",

dataTextField: "value",

dataValueField: "id",

filter: "contains",

autoBind: false,

minLength: 1,

dataSource: {

serverFiltering: true,

transport: {

read: function(options) {

// below array server the same as remote dataSource

// transport: {

// read: function(options) {

// $.ajax({

// ...

// success: function(response) {

// options.success(response);

// }

// });

// }

options.success(

[{id: 1, value: "1"},

{id: 2, value: "2"},

{id: 3, value: "3"}]);

}

});

</script>

</div>

How to prevent that kendo combobox's dataSource returns all items if dropdown arrow is clicked? I want to achieve that only if at least one character is entered remote datasource request is made. In all other cases, the request is not made. One of the solutions is to add below code to

transport: { read: function(options) { section.

// if comboBox does not have a value return empty result set

if( $("#products").data("kendoComboBox").text().trim().length < 1 )

{

options.success([]);

return;

}

Also minLength is ignored when clicking arrow

2 Answers, 1 is accepted

answered on 27 Dec 2016, 10:28 AM

There is a difference when using different versions of Kendo.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled</title>

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1118/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> 

 

</head>

<body>

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

<script>

$(document).ready(function() {

$("#products").kendoComboBox({

dataTextField: "value",

dataValueField: "id",

filter: "contains",

autoBind: false,

minLength: 2,

dataSource: {

serverFiltering: true,

transport: {

read: function(options) {

options.success([{id: 3, value: "test"}]);

}

});

</script>

</body>

</html>

answered on 27 Dec 2016, 01:09 PM

Hello,

The discussed behavior may seem awkward, and is documented as a breaking change in our 2016 R3 release:

http://docs.telerik.com/kendo-ui/backwards-compatibility/2016/2016-backward-compatibility

"DropDownList/ComboBox: The widget will not bind on open if autoBind is set to false and minLength is set to a value higher than 1."

The most straightforward option would be to use a value, higher than 1 for minLength. All other alternatives involve implementing complex custom logic that would have to differentiate between the cases when the input is initially empty, and the cases when it is cleared by the user, and prevent the request only in the former scenario.

Please, let us know if you need further assistance with the matter, or have any other questions or comments.

Regards,
Dimiter Topalov
Telerik by Progress

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.