Prevent fetching all items from remote dataSource on initial arrow click

3 posts, 0 answers
  1. Licence
    Licence avatar
    7 posts
    Member since:
    May 2012

    Posted 27 Dec 2016 Link to this post

    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. Licence
    Licence avatar
    7 posts
    Member since:
    May 2012

    Posted 27 Dec 2016 Link to this post

    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>
  3. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    603 posts

    Posted 27 Dec 2016 Link to this post

    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.
Back to Top