0

I have a Web API "ApiController" that I would like to get Kendo to do server side paging.
This is not MVC this is Web API v2.
The controller is returning json data to the caller.
The kendo grid works fine when serverPaging: = false.
The kendo grid does work when the serverPaging: = true but it does not show the correct total number of items and it does not have the correct number of pages displayed at the bottom of the grid.
I used this as the example http://bitoftech.net/2013/11/25/implement-resources-pagination-asp-net-web-api/ but the Get method with the page / page size parameters never gets called.
The Get method without parameters does get called but the request url looks like the following. localhost:9000/api/products/?{"take":2,"skip":0,"page":1,"pageSize":2}
My best guess is that the response needs something to tell the grid the number of records left but I can't find any good examples on how to tell the grid the total number of records.
I did add "X-Pagination" to the header with the total count and total pages but I don't think the kendo grid is using the information.

P.S. I know that Telerik has code for paging with Web API but I can't afford / too cheap for the new Kendo so I'm using the open source kendo.


EDIT: 4-11-14
So I finally got my original problem solved where the total number of items was not showing. While still using WEB API 2 and JSON. "NOT ODATA! I'm still working on the ODATA test but that is for another post ;)".
basically in my GET method in the controller I had to return the following:

return new
{
    TotalCount = totalCount,
    TotalPages = totalPages,
    Results = results
};

This is based on the example posted above. But in the kendo datasource schema I added the following:

schema: {
    data: function (data) {
        return data.Results || data;
    },
    total: function (data) {
        if (data.TotalCount) {
            return data.TotalCount;
        }
        return result.PageSize || result.length || 0;
     },

I never did get the Get(int page = 0, int pageSize = 10) from the example to work but I was able to parse the query string to pull out the "skip" and "take" for paging to work.

1 Answer 1

4

In order to get the total records to come down correctly, you have to pass an addition query $inlinecount=allpages. I found useful information at http://www.asp.net/web-api/overview/odata-support-in-aspnet-web-api/supporting-odata-query-options. Specifically, I used the solution where the Get method in your controller looks something like:

public PageResult<Product> Get(ODataQueryOptions<Product> options)
{
    IQueryable results = options.ApplyTo(_products.AsQueryable());

    return new PageResult<Product>(
        results as IEnumerable<Product>, 
        Request.GetNextPageLink(), 
        Request.GetInlineCount());
}

That makes the result look something like:

{
  "Items": [
    { "ID":1,"Name":"Hat","Price":"15","Category":"Apparel" },
    { "ID":2,"Name":"Socks","Price":"5","Category":"Apparel" },

    // Others not shown

  ],
  "NextPageLink": "http://localhost/api/values?$inlinecount=allpages&$skip=10",
  "Count": 50
}

There are a couple things you then need to do in your kendo datasource.

var source = new kendo.data.DataSource({
    type: "odata",
    schema: {
        data: function (data) {
            if (data.Items) {
                return data.Items;
            }

            return [data];
        },
        total: function (data) {
            return data.Count;
        }
    }});

I removed a lot of configuration options for brevity, but hopefully that pulls enough details together to be helpful.

10
  • Unfortunately I am not using odata. So I don't have a "PageResult" or "ODataQueryOption". My datasource type = "json".
    – goroth
    Apr 9, 2014 at 23:17
  • The PageResult<T> object is in System.Web.Http.OData.dll. If you use the NuGet Package Manager to install the web api package (Microsoft ASP.NET Web API 2.1) that includes the odata dll. Is there a reason you can't use that? OData sits on top of the REST architecture.
    – Andy
    Apr 10, 2014 at 13:34
  • "Is there a reason you can't use OData?", well that is a good question.<br>
    – goroth
    Apr 10, 2014 at 17:19
  • I was told that OData is a Microsoft protocol and like all Microsoft stuff, it will get left behind in a few years. <br> I guess since OData can output Json, I'm not totally opposed to using OData. <br> I will give it a try and post back here with the results. Thanks for the information.
    – goroth
    Apr 10, 2014 at 17:28
  • Well I was not able to get Kendo to work with OData at all. I can call localhost:61267/odata/Products in my browser and I get back so json like { "odata.metadata":"localhost:61267/odata/… { "Id":1,"Name":"Hat","Category":"Apparel","Price":"15.00","message":null } ] } but the grid does not displaying anything.
    – goroth
    Apr 10, 2014 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.