Kendo DataSource - Add additional data not working - kendo-ui

Question

My data source:
var asGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: function (options) {
DataService.Securities()
.done(function (secs) {
// notify the data source that the request succeeded
options.success(secs);
})
.fail(function (secs, testStatus, err) {
// notify the data source that the request failed
options.error(stats);
});
},
data: function () {
return {
id: $($searchCriteria).val(),
searchBy: $(searchByDDL).val(),
};
}
}
...
And the DataServices.Securities function:
Securities = function () {
return $.ajax({
url: "/api/securities"
});
};
If I replace the read url function with a simple url string (url: "/api/securities"), the additional data is added properly. However, when I do it as above, I get two Http requests:
/api/securities
/?id=5&searchBy=3
instead of a single request that should look like this:
/api/securities?id=5&searchBy=3
The only Kendo documentation I can find has an example of how to add data like this using the url string as described above, but not when using a function. Why am I not getting a single request?
Edit:
After working with this a bit more, I think I understand. I started out with this:
var asGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/securities",
data: function () {
return {
id: $($searchCriteria).val(),
searchBy: $(searchByDDL).val()
};
}
}
}
});
Doing this, and only this, results in a request like this: /api/securities?id=6&searchBy=3. I wanted to modify the above to use a function for the url instead of a hardcoded string. This is what the very top part of the original question is an attempt to do. However, the specification of the data function does not work. In the hardcoded url example, Kendo knows to get the id and searchBy from the page and append it to the url. But it has no way of knowing what to do with that same data when I use a function for the url. Or this is my guess.

Answer 1

I think what you want to be doing is make transport.read a function because you want to manually retrieve the data, not transport.read.url, which is for returning a url string when using the built-in transport:
transport: {
read: function (options) {
var params = {
id: $($searchCriteria).val(),
searchBy: $(searchByDDL).val(),
};
DataService.Securities(params)
.done(function (secs) {
// notify the data source that the request succeeded
options.success(secs);
})
.fail(function (secs, testStatus, err) {
// notify the data source that the request failed
options.error(stats);
});
}
}
To add optional parameters to the Securities method, you could do something along the lines of this:
DataService.Securities = function (params) {
var options = {
url: "/api/securities"
};
if (params) {
options.data = params;
}
return $.ajax(options);
};