KendoUI - Populating a Grid using a DataSource that reads from a WebAPI 2 ApiController returning PageResult<T>

Question

I'm implementing paging for a previously operational KendoUI grid. In order to do that I rewrote an ApiController action like so:

public PageResult<CompanyDetailedDTO> GetDetailedCompaniesByCountryPaged(int countryId, ODataQueryOptions<CompanyDetailedDTO> options) {
        ODataQuerySettings settings = new ODataQuerySettings() {
            PageSize = 10
        };

        IQueryable results = options.ApplyTo(_services.GetDetailedCompaniesByCountry(countryId).AsQueryable(), settings);

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

I've tested the action and it returns the JSON formatted as I want it to be:

http://.../GetDetailedCompaniesByCountryPaged?CountryId=1&%24inlinecount=allpages

Returns:

$id: "1"
Count: 7262
Items: [{$id:2, CompanyCategoryId:0, CompanyStateId:0, CommertialRepresentativeId:0,     ContactTypeId:0,…},…]
NextPageLink: "http://localhost/SIM/api/Company/GetDetailedCompaniesByCountryPaged?   CountryId=1&$inlinecount=allpages&$skip=10"

I've been trying to have a Kendo UI Grid show the information obtained from this action using this DataSource:

var CompaniesDetailedDataSource = new kendo.data.DataSource({
//pageSize: 10,
error: function (e) {
    var xhr = e.xhr;
    var statusCode = e.status;
    var errorThrown = e.errorThrown;
    var responseText = xhr != undefined ? xhr.responseText : e.responseText;
    showError(responseText);
},
serverPaging: true,
transport: {
    type: "odata",

    read: {
        url: appurl + "api/Company/GetDetailedCompanies",
        dataType: "json"
    },
    create: {
        url: appurl + "api/Company/PostCompany",
        dataType: "json",
        type: "POST"
    },
    update: {
        url: appurl + "api/Company/PutCompany",
        dataType: "json",
        type: "PUT"
    },
    destroy: {
        url: appurl + "api/Company/DeleteCompany",
        dataType: "json",
        type: "DELETE"
    },      

},
schema: {
    total: function (e) {
        return Number(e["odata.count"]);
    },
    model: {
        id: "Id",
        fields: {
            Id: { editable: false, type: "number" },
            LegalName: { type: "string", validation: { required: true} },
            IdentificationNumber: { type: "string", validation: { required: false} },
            CommercialName: { type: "string", validation: { required: true} },
            LegalRepresentativeFirstName: { type: "string", validation: { required: false} },
            LegalRepresentativeLastName: { type: "string", validation: { required: false} },
            LegalAddress: { type: "string", validation: { required: false} },
            LegalAddressPostalCode: { type: "string", validation: { required: false} },
            MailAddress: { type: "string", validation: { required: false} },
            MailAddressPostalCode: { type: "string", validation: { required: false} },
            LegalPhoneAreaCode: { type: "string", validation: { required: false} },
            LegalPhone: { type: "string", validation: { required: false} },
            LegalFaxAreaCode: { type: "string", validation: { required: false} },
            LegalFax: { type: "string", validation: { required: false} },
            Email: { type: "string", validation: { required: false} },
            URL: { type: "string", validation: { required: false} },
            OtherTravelCities: { type: "string", validation: { required: false} },
            OtherTravelCountries: { type: "string", validation: { required: false} },
            OtherVisitedHotels: { type: "string", validation: { required: false} },
            Longitude: { type: "string", validation: { required: false} },
            Latitude: { type: "string", validation: { required: false} },
            ActivityId: { type: "number", validation: { required: false} },
            EconomicSegmentId: { type: "number", validation: { required: false} },
            CityId: { type: "number", validation: { required: false} },
            EconomicGroupId: { type: "number", validation: { required: false} },
            CityName: { type: "string", validation: { required: false } },
            CountryName: { type: "string", validation: { required: false } },
            CountryId: { type: "string", validation: { required: false } },
            total: "total"
        }
    }
}
});

However all I get is a grid with just one row of data, probably because the Items array in the response is in a subset of the object that contains Count, NextPageLink and Items.

Here is the grid definition:

$("#companies-grid").kendoGrid({
                dataSource: CompaniesDetailedDataSource,
                autobind: true,
                pageable: true,
                selectable: true,
                navigatable: true,
                filterable: true,
                sortable: true,
                height: "500",
                toolbar: [
                   { name: "filters", template: _countryFilter },
                ],
                columns: [
                    { "field": "LegalName", "title": "Razón Social" },
                    { "field": "IdentificationNumber", "title": "N.I.T." },
                    { "field": "CommertialName", "title": "Nombre Comercial" },
                    { "field": "LegalRepresentativeFirstName", "title": "Representante", template: "<span>${ LegalRepresentativeFirstName } ${ LegalRepresentativeLastName }</span>" },
                    { "field": "CityName", "title": "Ciudad" },
                    { "field": "Id", "title": " ", template: "<a class='k-button' href='\\#/company/${ Id }'>Ver<span class='k-icon k-i-arrow-e'></span></a>" },
                ],
                mobile: true
            });

What am I doing wrong?

Petur Subev Petur Subev · Accepted Answer · 2014-02-27T21:23:59

I think you missed to specify the data options of the schema to be "Items" and the total to be "Count". Check the docs for these config options.

KendoUI - Populating a Grid using a DataSource that reads from a WebAPI 2 ApiController returning PageResult<T>

1 Answers