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 385 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Trinet
Top achievements
Rank 1
Trinet asked on 27 Dec 2016, 09:44 AM

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

Sort by
0
Trinet
Top achievements
Rank 1
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>
   
  <script src="http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script> <!-- makes request i.e. transport.read....  -->
  <!--<script src="http://kendo.cdn.telerik.com/2016.3.1118/js/kendo.all.min.js"></script>--> <!-- returns No Data on arrow click -->
  
  </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>
0
Dimiter Topalov
Telerik team
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.
Tags
ComboBox
Asked by
Trinet
Top achievements
Rank 1
Answers by
Trinet
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or