Duplicate Ajax call on specifying minLength on kendo multiselect

[Anand]

Hi Team,

 

Getting ajax call twice for same input if specifying minLength in multiselect. Could you please suggest why ajax call invoke twice for same input with minLength.

 

HTML:<div><select id="required" multiple="multiple" style="width: 92.5%; margin-top: 21px; margin-left: 2px;" "></select></div>

 

JS Code:  

var searchuserdataSource = new kendo.data.DataSource({
        pageSize: 30,
        serverFiltering: true,
        transport: {
            read: function (options) {
                var srctxt = {
                    //searchText: $('#required').data("kendoMultiSelect").input.val()
                    searchText:"Test"   
                };

                var params = "{searchText: '" + srctxt.searchText + "'}";
                $.ajax({
                    type:"POST",
                    url: "./Relationships.aspx/GetUserSearch",
                    data: params,
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        var userslist = [];
                        if (typeof result.d !== 'undefined' && result.d.Completed)
                        {
                            $.each(result.d.Data, function (i, item) {
                                var map = {};
                                map["id"] = item.Id;
                                map["name"] = item.DisplayName;
                                userslist.push(map);
                            });
                           
                        }
                        options.success(userslist);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });  
            }
        }
    });


$("#required").kendoMultiSelect({
    autoBind: false,
    minLength: 3,
    enforceMinLength: true,
  dataSource: searchuserdataSource,
  dataTextField: "name",
  dataValueField: "id",
//itemTemplate :"<input type='checkbox' id='#:data.id#'/> #:data.name#",
  //itemTemplate: " <input type='checkbox' name ='#:data.name #' value ='#:data.id#' class='k-checkbox' /><label class='k-checkbox-label' value='#:data.id#' > #:data.name# </label>",
//itemTemplate:"<input type='checkbox' name='#:data.name # value='#:data.id #' class='k-checkbox' />" +
        //"<span class='k-checkbox-label' data-value='#:data.id #'>#:data.name #</span>";
  autoClose:false,
  tagMode:"single",
  //tagTemplate:'<span>#: data.values.length # user(s) selected</span>',
    filter: "contains",
    //placeholder: "Search..",
    delay: 200,
  close: function(){
           var selectedItems =$("#required").data("kendoMultiSelect").dataItems();
           if(selectedItems.length !=0)
              {
                 $.each(selectedItems,function(index,obj){
                       //alert("Name: "+obj.name+"\n"+"Id:"+obj.id+"\n");
                        CreateUsersFilter(obj.id,obj.name);
            
              });
             if (dummyfiltersource.length >= 14)
              $(".selectedusersgrid").width("94%");
             }

 }
});     

[Aleksandar]

Hello Anand,

Thank you for reaching out. Reviewing the code snippet provided I did not spot an issue that would cause the duplicate ajax call. I tested the behavior with the provided configuration and our demo service but failed to observe the reported behavior. Can you check this dojo and let me know if I missed anything crucial? Would it be possible to modify it so the issue is reproducible or create a runnable sample where the behavior can be observed? 

Regards,
Aleksandar
Progress Telerik

[abin]

During the close event, I observed a second Ajax call. Is this expected behavior?

 

after typing cha



after the close event

[Neli]

Hi Abin,

The issue is a known one and below you will find a link to the item in our official Feedback Portal. In the Portal, it is logged for the UI for the ASP.Net Core suite, but internally we have marked it for the jQuery suite as you can see in the related issue from GitHub linked below as well. 

- https://feedback.telerik.com/aspnet-core-ui/1513846-multiselect-configured-for-server-filtering-sends-an-empty-request-on-focusout

- https://github.com/telerik/kendo-ui-core/issues/6361

The issue appears only when the serverFiltering is enabled. Thus, if it is suitable for your scenario you can use the client side filtering. 

I would suggest following the item in the protal or in GitHub in order to be notified about our progress on it.

Regards,

Neli