I have a web service from which I get text which is parsed into JSON using $parseJSON from jquery.
A client can get data from the web service by doing loading http://myserver/myfunction/{pagenumber}/{pagesize}
This will return an object
{
total: <some int> //A number indicating the total number of records
rowsForPage: [......] //An array with just the rows for the requested page
}
How can I use this endpoint as a datasource for a Kendo UI grid which will pass the page number and page size for the selected page.
For the life of me I cannot figure this out, but I would think this should be relatively simple.
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
schema: {
data: function(data) {
return data.rowsForPage;
},
total: function(data) {
return data.total;
}
},
transport: {
read: "http://myserver/myfunction"
}
}
);
As far as the url goes you have to parse out the url parameters skip and take to identify which records you should be passing back. If your page size is 100 and your page is 3 then it should pass
skip=200&take=100
Related
I am currently doing this to change the read url dynamically on my kendo datasource. The datasource is used for a kendoautocomplete text box and for each key typed the list of suggestions are fetched through a get request.
requestStart: function (e) {
var text = $('#txtMail').val();
e.sender.transport.options.read.url = "/Feed/AutoCompleteUser?text=" + text + "&limit=10";
}
This works fine the first time , but consequent request's are exactly same as the first request it never hits this piece of code. What am i missing?
Please advice.
You can just add a data parameter for your read request, like so, in this case, as the request is sent as a get, it will append the query with the fields inside your data object.
By adding the function like this, it will get called every time you make a request.
function getRequestParameters() {
return {
text: $('#txtMail').val(),
limit: 10
};
}
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
data: getRequestParameters,
dataType: "jsonp"
}
}
});
You can find more about configuring the datasource operations here:
Following code builds my kendo DataSource:
var dataSource = new kendo.data.DataSource({
serverPaging: true,
schema: {
data: "ListMediaSummary",
total: "RowCount",
},
transport: {
read: {
url: gAppBaseURL + "UniversalSearch/SearchData?searchText=" + searchText + "&pageNumber=" + page,
type: "POST",
dataType: "json",
}
},
parameterMap: function (data, type) {
if (type == "read") {
return {
$top: data.take,
$skip: data.skip
}
}
},
page: 1,
pageSize: 25,
});
And from here I am passing the parameter "searchText" and "PageNumber" from the transport.read method to the Action method in my asp.net controller, after which the search results gets rendered into kendo listView.
The action method gets the "searchText" value but it dosent gets the pageNumber? Although in the post it does passes the Page number(checked in firebug) but what I want is to pass the page number to the transport.read method in my function. How could I achieve this?
To enable server paging, you should configure data source to enable serverPaging. Then the data source will leave the data item paging implementation to the remote service. By default the data source performs paging client-side.
<script>
var dataSource = new kendo.data.DataSource({
transport: {
/* transport configuration */
},
serverPaging: true,
schema: {
total: "total" // total is returned in the "total" field of the response
}
});
</script>
Don't forget to set schema.total if you set serverPaging to true.
The following options are sent to the server when server paging is enabled:
page - the page of data item to return (1 means the first page)
pageSize - the number of items to return
skip - how many data items to skip
take - the number of data items to return (the same as
pageSize)
Therefore you should change your controller action method to something like this:
public ActionResult GetData(int page, int pageSize, int skip, int take){
// do some magic operation
}
I'm trying to understand how Kendo UI grid works. This the example for the Kendo website.
Somewhere one can find this configuration lines:
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
And this is the line that fetch the data
transport: {
read: "http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders"
},
I wonder whether the above parameters are being sent to the server, i.e. a server side method should like this?
public list<type> MyServerSideMethod(inr pageSize, bool serverPaging,
bool serverFiltering, boll serverSorting)
{
}
In fact, I've applied the configuration, but the pager on my grid is still not working. That why I'm wondering whether the method in the server is expecting those values.
Thank for helping
Define your read as a function and manipulate the parameters send to server
transport: {
read: function (options) {
console.log(JSON.stringify(options)); // You can see what parameters send : check your console on paging
var commandOBJ=[{
Page: 1, // Once the first 20 item is loaded and you click for the next page you will have the page in "options" (should be like options.page)
PageSize:20
}];
$.ajax({
url:"http://demos.telerik.com/kendo- ui/service/Northwind.svc/Orders",
data: { }, // send your page info here
dataType: "json", // your data return type
cache: false,
success: function (result) {
options.success(result);
},
error: function (result) {
options.error(result);
}
});
}
}
I have a Kendo Grid binded to a remote OData endpoint.
How can I capture the request URL sent to the remote endpoint in one of the javascript events, like the DataSource's onRequestStart ?
this gives me the filter/sort objects
var filter = this.filter();
var sort = this.sort();
But I want the actual URL, like
http://..serviceroot/table1?$filter=....
The easiest way is via beforeSend:
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders",
beforeSend: function(e, request) {
console.log(request.url);
}
}
}
I am trying to use Kendo UI grid with remote data source, but cannot understand how to pass page size, filters and sort parameters to the ASP.Net aspx page that return a json string for grid's data source. Telerik's documentation on Kendo UI is bad because they have no examples on using server-side technologies with Kendo UI. If someone knows this please let me know?
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: "GetProducts.aspx"
},
schema: {
model: {
fields: {
ProductId: { type: "number" },
ProductName: { type: "string" },
CategoryName: { type: "string" },
IncludeProduct : { type: "boolean" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
In GetProducts.aspx page, I create a json string in page load event and send it back to browser. I am using ASP.Net Webforms.
The parameters are passed automatically in the server request. You need to look at the requests being made (ie Firebug addon for FireFox) to see them all but some of them are skip, take, filter[logic],sort[i][dir], sort[i][field] etc.
If your page number is 3 and your page size is 100 then the skip value passed would be 200 and the take would be 100.
To modify these to pass under different names you would need to use the parameterMap Kendo provides but I don't have experience with that.
I don't have familiarity with ASP.Net Web Forms to know for sure but I wrote this after a basic google search so you can get the basic idea for pulling the parameter.
protected void Page_Load(object sender, EventArgs e)
{
string skip = Request.QueryString["skip"];
}