Kendo UI - Specify parameter name on dataSource read

Question

With Kendo UI, I am using an autocomplete box to try and retrieve data from my server. It is hitting an ASP.NET MVC controller with the following signature.

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

This means that the request needs to have the correct parameter in the url. Now the issue I am running into is that I cannot discover a way to specify this in the dataSource mechanics. I have read the documentation on parameterMap dozens of times and it makes absolutely no sense to me in any way.

This is complicated further by the fact that the page in question actually has 10-15 autocomplete text boxes at any one time, each dynamically created with dynamic identity.

The code I am using so far is as follows;

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

So is there anything I can do to tell it how to name the parameter it passes?

To make it more clear what I am 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 of the way all of this works, there is no set "selector" to get the autocomplete input, so I cannot retrieve 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 into the transport.parameterMap function.

If you were to log the object passed in to the parameterMap function 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 would 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 into the AutoComplete box 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 that there is a misunderstanding about the relation between DataSource and AutoComplete. AutoComplete has the input and uses a DataSource for retrieving the data: the input does not belong to the AutoComplete and as consequence you cannot get the input that is using a DataSource from a method that is from the DataSource (as transport.read.data or transport.parameterMap).

You need to unique identify which element has the input and the value that it contains.

What I do propose is getting the value using document.activeElement.value. Since you are typing it, the element that has the focus should be the element that you are using.

The code would be:

$(".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 Kendo UI links the input field with the filtering condition. The code would be:

$(".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 }
                }
            }
        }
    }
});