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 }
                }
            }
        }
    }
});

Answer 3

I'm a little confused as to what you're wanting to do. If you are just trying to pass the string term to the 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 the clarification and help OnaBai. Here is the code that I got working after hours of frustration!

$("#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's 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...