Kendo UI - specify a parameter name for reading data

Question

With Kendo UI , I use the autocomplete field to try to get data from my server. It enters the ASP.NET MVC controller with the following signature.

public ActionResult aspect(string term){ // ... } 

This means that the request must have the correct parameter in the URL. Now the problem I am facing is that I cannot find a way to specify this in the mechanics of dataSource . I read the documentation on the Map parameter dozens of times, and it absolutely makes no sense to me.

This is further complicated by the fact that the page in question actually has 10-15 autocomplete text fields, each of which is dynamically created with dynamic identification.

The code I use so far is as follows:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: { type: "json", transport: { read: { url: "/search/aspect" } } } }); 

So what can I do to say how to name this parameter?

To make it clearer what I'm trying to do, if I were doing this in jQuery, I would use ...

 $.ajax({ url: '/search/aspects', data: { term: (insert the data here) } }); 

But because all this works, there is no “selector” to get the autocomplete input, so I cannot extract its value from the input form element.

Answer 1

First enable server-side filtering by setting this option:

 dataSource: { serverFiltering: true, 

Then the value is passed as one of the parameters to the transport.parameterMap function.

If you were to register an object passed to parameterMap, like this:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: { serverFiltering: true, type: "json", transport: { read: { url: "/search/aspect" }, parameterMap: function (data, action) { console.log(data); } } } }); 

then you will get an object that looks like this:

 { "filter":{ "logic":"and", "filters":[ { "value":"something", "operator":"contains", "field":"Name", "ignoreCase":true } ] } } 

So, you can use this to get the value entered in the autocomplete field by doing:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: { serverFiltering: true, type: "json", transport: { read: { url: "/search/aspect" }, parameterMap: function (data, action) { if(action === "read") { return { term: data.filter.filters[0].value }; } else { return data; } } } } }); 

Answer 2

I think there is a misunderstanding regarding the relationship between DataSource and AutoComplete . AutoComplete has input and uses a DataSource to retrieve data: input not AutoComplete , and as a result, you cannot get input that uses a DataSource from a method from DataSource (like transport.read.data or transport.parameterMap ).

You need to indicate which element has an input and the value that it contains.

I suggest getting the value using document.activeElement.value . As you enter it, the element that has focus should be the element that you are using.

Code:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: { type: "json", transport: { read: { url: "/search/aspect", }, parameterMap : function (data, type) { if (type === "read") { return { term : document.activeElement.value } } } } } }) 

Alternatively, you can enable serverFiltering , and then the Kendo UI interface associates the input field with the filter condition. The code will look like this:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource : { serverFiltering: true, type : "json", transport : { read : { url : "/search/aspect" }, parameterMap: function (data, type) { if (type === "read") { return { term : data.filter.filters[0].value } } } } } }); 

Answer 3

I am a little confused about what you want to do. If you are just trying to pass a string term to a controller, you can specify the data:

 $(".autocomplete").kendoAutoComplete({ dataTextField: "Name", dataSource: { type: "json", transport: { read: { url: "/search/aspect", data: { term: "value" } } } } }) 

Answer 4

Thanks for clarifying and helping OnaBai. Here is the code I received after hours of disappointment!

 $("#contractsSearchField").kendoComboBox({ dataTextField: "name", dataValueField: "id", autoBind: false, placeholder:'select...', filter: "contains",// a filter must be present for the datasources serverFiltering argument to work properly. minLength: 3, dataSource: new kendo.data.DataSource({ serverFiltering: true,//We must turn on serverFiltering and sorting, otherwise, the combobox only works once and will not change it values. serverSorting: true, group: { field: "searchtype" }, transport: { read: { url: "contract.cfc?method=getContractForDropdown", // We are not passing the data here like we do in the autosuggest. The combobox is a different type of an animal. dataType: "json", contentType: "application/json; charset=utf-8", // Note: when posting json via the request body to a coldfusion page, we must use this content type or we will get a 'IllegalArgumentException' on the ColdFusion processing page. type: "GET" },//read // Pass the search term that was typed in by the user. This works because when the user types into the input box, it becomes that active element in the form. parameterMap : function (data, type) { if (type === "read") { return { searchTerm : document.activeElement.value } //return { searchTerm: data.filter.filters[0].value } } }//parameterMap }//transport })//dataSource }); //...kendoComboBox...