Using multi column combo box as auto complete

[Wallace]

I want to use Kendo multi column combo box as an auto-complete input. My data source is accessed via an API. The API URL can include filter parameters. All of our data sources are very large (tens of thousands of records), so I need to do server-side filtering by adjusting the parameter portion of the URL.

What properties, events and methods would I use to refresh the data source as the user is typing (with delay)?

pseudo code:

combobox.onchange() {

  ApiUrl = "https://blahblah/getRecords?filterstring=" + combobox.val();

  combobox.datasource.transport.read = ApiUrl

}

I can't seem to figure out how to get something to work. Seems like this should be easy to do.

Any suggestions would be greatly appreciated.

[Neli]

Hi Wallace,

Could you please provide more details about the expected result as I am not sure I understand the issue correctly. 

If you need to filter the MultiColumnComboBox on the server you could take a look at the Server Filtering MultiColumnComboBox Demo:

- https://demos.telerik.com/kendo-ui/autocomplete/serverfiltering

You could also take a look at the following article regarding server filtering. Although the article is regarding ComboBox, the same is applicable for the MultiColumnComboBox component. In the article it is also described how a parameter for filtering can be sent to the remote endpoint using the data option:

- https://docs.telerik.com/kendo-ui/controls/combobox/serverfiltering

I hope you will find the provided information helpful.

Regards,

Neli

 

[Wallace]

I figured it out. I don't know if this is the best way, but it seems to work well.

I added the following functions to the component initialization

ComponentInitialization.......

,filtering: function(e) {
var filter = e.filter;
// stop the filtering from actually doing anything
e.preventDefault();

// If the user has typed more than two characters, load the box with up to 500 matches
if (filter.value.length >= 2) {
let gu = ApiBaseUrl + ApiEndpoint +  "?" + "FilterString=%22" + filter.value + "%22"
$("#KeyInput").data('kendoMultiColumnComboBox').dataSource.transport.options.read.url = gu
$("#KeyInput").data('kendoMultiColumnComboBox').dataSource.read();
}
},
change: function(e) {
SelectionSubmit(this.value());
},

[Neli]

I am glad to hear you have managed to resolve the issue yourself. Thank you very much for sharing more details on your approach as I am sure it will be helpful to the other users in the forum.

Reagrds,

Neli