Search method does not open the dropdownlist

[Dan]

I have a requirement where the user has to enter 3 letter and for each group of letters I have to display a different list. For instance if the user writes A I have to display AA, AB,... and if the user write AC I have to display ACA, ACB,...

I have configured the autocomplete with server filtering and if the user selects an item I need for the autocomplete to display a different list.

The autocomplete i like this

@(Html.Kendo().AutoCompleteFor(m => m.Field)
   .DataTextField("Prefix")
   .Filter(FilterType.StartsWith)
   .MinLength(0) // this does not work
   .DataSource(dataSource => dataSource.Read(read => read.Action("GetClassifications", "Device").Data("device.getFilterClassification"))
                                       .ServerFiltering(true))
   .Template("<span class='k-state-default'>#: Prefix # - #: Name #</span>")
   .Events(events => events.Select("classificationSelect"))
)

and the script looks like this

function classificationSelect(e) {
   var dataItem = e.sender.dataItem(e.item.index());
   var text = dataItem.Prefix;
   if (text.length < 3) {
      e.sender.search(text);
   }
}

The select method does not open the dropdownlist even though the server method is called with the correct selection. Sometimes it opens but with the old values.

 

[Neli]

Hello Dan,

I would suggest you to add a slight delay before searching for the needed text. I used the provided code to test locally, and the dataSource is filtered correclty after selecting an item on my end when I modified the search event handler as follows:

function onSelect(e) {
        var dataItem = e.sender.dataItem(e.item);
        var text = dataItem.Text;
        if (text.length < 3) {
            setTimeout(function () {
                e.sender.search(text);
            }, 100)
        }
    }

Attached is the sample project where the search method is used when an item in the AutoComplete is selected and the data is filtered accordingly
I hope this helps

Regards,
Neli
Progress Telerik

[Dan]

Hi Neli,

Thank you so much. It worked.

I do have a related question can the dropdownlist opened when the user clicks in the editor? Because the MinLenght of 0 seems to have the same effect as MinLenght of 1 

[Neli]

Hi Dan,

You could attach a focus event handler to the input field of the widget. You could get a reference of the widget and use the search method with empty string. Below is an example. 

$("#products").focus(function () {
var ac = $('#products').data('kendoAutoComplete')
ac.search("")
});

Here is a Dojo example where the above is implemented,. The approach in MVC projects will be the same. 

Regards,
Neli
Progress Telerik