Shuaib Shuaib - 3 months ago 35
ASP.NET (C#) Question

Cannot Paginate using Kendo UI and Web API

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.

enter image description here

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

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.