How to assign skip and take value in kendo dropdown - asp.net-web-api

Question

I need to populate a lot of data into a kendo dropdown list(probably could go to millions). SO I am trying to use serverFiltering of kendo to achieve that. I checked their official api in github and they are using parameters skip and take and it seems to be working fine for them. I am trying to send skip and take through the following code
$("#parentProductId").kendoDropDownList({
filter: "startswith",
dataTextField: "ProductName",
dataValueField: "id",
optionLabel: ' --Select--',
dataSource: {
serverFiltering: true,
data: {
skip:0 ,
take: 10
},
transport: {
read: {
url: webApiUri + '/Product/ProductSel',
beforeSend: function (xhr) {
xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
}
}
}
}
});
My Apicontroller is as follows: -
[Route("api/Product/ProductSel")]
public List<SpProductSel_Result> ProductGet(int skip, int take)
{
//return result
}
Now my problem is this api controller is not being called. What am I doing wrong here?

Answer 1

One of the possibility can be you need to use correct transport.read configuration. When using Tranport configuration we specify data as a part of read please see the code snippet below.Refer to kendo documentation transport.read.data
Example # 1 SEND ADDITIONAL PARAMETERS As Object
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: {
q: "html5" // send "html5" as the "q" parameter , like int skip and take
}
}
EXAMPLE # 2 - SEND ADDITIONAL PARAMETERS BY RETURNING THEM FROM A FUNCTION
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/twitter/search",
dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
data: function() {
return {
skip: 0, // send 0 as the "skip" parameter
take:10 // send 10 as the "take" parameter
};
}
}
}