Cannot Paginate using Kendo UI and Web API - asp.net

Question

I am a complete novice in KendoUI so this might seem like a noob question.
I am trying to implement server side pagination using KendoUI and Web API.
This is my script for generating the Kendo Grid
$(function () {
$("#grid").kendoGrid({
height: 400,
columns: [
"FirstName",
"LastName",
{ field: "Mobile", width: "150px" },
{ field: "Email", width: "150px" },
{ field: "LoginVerified", width: "150px" },
{ field: "DivisionName", width: "100px" }
],
pageable: true,
sortable: true,
filterable: true,
dataSource: {
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: 10,
transport: {
read: "/api/Users/GetStaffsPaged"
}
}
});
});
And this is my Web API function
[HttpGet]
[ActionName("GetStaffsPaged")]
public IEnumerable<StaffsBasicInfo> GetStaffsPaged()
{
var take = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["take"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["take"]);
var skip = string.IsNullOrEmpty(HttpContext.Current.Request.QueryString["skip"]) ? 1000 : Convert.ToInt32(HttpContext.Current.Request.QueryString["skip"]);
StaffsBasicInfoBL staffsBL = new StaffsBasicInfoBL();
List<StaffsBasicInfo> staffs = staffsBL.getAllStaffsBasicInfo();
staffs = staffs.Skip(skip).Take(take).ToList();
return staffs;
}
When I run my code, the Grid is always showing the first 10 records, but my database has 2000+ records.
I have tried lots of tutorials to solve this, but I cannot do pagination.
http://www.telerik.com/blogs/the-facts-on-using-kendo-ui-with-asp-net-webapi
According to the above tutorial, my code should work.
I have also tried this tutorial, but I Visual Studio cannot resolve the DataSource class.
http://blog.falafel.com/server-paging-sorting-filtering-kendo-datasourcerequest/
Please help me implement pagination

Answer 1

You are not returning "total" number of items present so that Kendo could generate total/size number of items in the pagination area.
Try returning
var totalCount = staffs.Count();
staffs = staffs.Skip(skip).Take(take).ToList();
return new { data = staffs, total = totalCount};
And in JavaScript, define schema (code removed for brevity):
$("#grid").kendoGrid({
// code removed for brevity
dataSource: {
transport: {
read: {
url: "/api/Users/GetStaffsPaged"
}
},
schema: {
data: "data",
total: "total"
}
}
});
Thus said, the approach here, which pulls all data from database and doing the pagination on server side, defeats the actual purpose of having server side pagination. Pagination should happen in database and not at server side.