Question

我正在为以前可操作的KendoUI网格实现分页。为了做到这一点，我重写了ApiController动作，如下所示：

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());
    }

我已经测试了该操作，并返回格式化为我想要的格式：

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

返回：

$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"

我一直试图让Kendo UI Grid使用此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"
        }
    }
}
});

但是我得到的只是一行只包含一行数据，可能是因为响应中的Items数组位于包含Count，NextPageLink和Items的对象的子集中。

这是网格定义：

$("#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
            });

我做错了什么？

Answer 1

我认为您错过了将架构的数据选项指定为“项目”而将总计指定为“计数”。检查docs以获取这些配置选项。

KendoUI - 使用从WebAPI 2 ApiController读取的DataSource填充网格返回PageResult <t> </t>

1 个答案: