Question

我正在尝试管理服务器端分页，但我对kendo网格的分页始终为0。

我的代码是：

Index.cshtml

<div ng-controller="telerikGridController">
    <div id="grid" kendo-grid k-options="mainGridOptions"></div>
</div>

ASP.NET MVC JsonResult：

JsonResult上面返回的数据是：

AggregateResults: null
Data: [{DeptId: 1, DepartmentName: "Information Technology", Country:"Pakistan", City: "Lahore",…},…]
0: {DeptId: 1, DepartmentName: "Information Technology", Country: "Pakistan", City: "Lahore",…}
1: {DeptId: 2, DepartmentName: "Mechnical Engineering", Country: "India", City: "Dehli",…}
Errors: null
Total: 6

我的AngularJs控制器：

'use strict';

app.controller('telerikGridController', ['$scope', function telerikGridController($scope) {

    $scope.mainGridOptions = {
        dataSource: {
            pageSize: 5,
            serverPaging: true,
            serverSorting: true,
            type: "aspnetmvc-ajax",
            transport: {
                read: "Grid/Departments",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8"
            },
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors"
            }
        },
        sortable: true,
        pageable: true,
        dataBound: function() {
            this.expandRow(this.tbody.find("tr.k-master-row").first());
        },
        columns: [
            {
                field: "DepartmentName",
                title: "Department Name",
                width: "120px"
            }, {
                field: "Country",
                title: "Country",
                width: "120px"
            }, {
                field: "City",
                width: "120px"
            }, {
                field: "Phone",
                width: "120px"
            }, {
                field: "Description"
            }
        ]

    };

    $scope.detailGridOptions = function(dataItem) {
        return {
            dataSource: {
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                pageSize: 2,
                type: "aspnetmvc-ajax",
                transport: {
                    read: "Grid/GetEmployees",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8"
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                },
                filter: { field: "DeptId", operator: "eq", value: dataItem.DeptId }
            },                
            scrollable: false,
            sortable: true,
            pageable: true,
            filterable: true,
            columns: [
                { field: "FirstName", title: "First Name", width: "56px" },
                { field: "LastName", title: "Last Name", width: "110px" },
                { field: "Address", title: "Address" },
                { field: "Phone", title: "Phone", width: "190px" }
            ]

        };
    }
}]);

结果：

尽管在浏览器控制台中可以看到对象的完美填充

如果我在angularjs Controller中添加函数来获取Total，则返回正确的值6，但是分页始终保持为0。如下所述

schema: {
    data: 'Data',
    total: function (data) {
       return data.Total;
    },
    errors: 'Errors'
}

它始终返回 data.Total = 6 这是正确的，但结果始终保持相同，即paging = 0.

我也尝试过将固定值6分配给Total，如下所述

schema: {
    data: "Data",
    total: 6,
    errors: "Errors"
  }

但它返回错误

Uncaught TypeError: a.reader.total is not a function

请帮帮我!!感谢。

Answer 1

在使用kendo文档锤击我的头脑后，我设法通过用

替换$ scope.mainGridOptions和$ scope.detailGridOptions数据源来解决我的问题

'use strict';
app.controller('telerikGridController', ['$scope',function telerikGridController($scope) {
$scope.mainGridOptions = {
    dataSource: new kendo.data.DataSource({
        type: "aspnetmvc-ajax",
        transport: {
            read: "Grid/Departments",
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8"                
        },
        schema: {
            data: "Data",
            errors: "Errors",
            total: "Total"
        },
        serverPaging: true,
        serverSorting: true,
        pageSize: 2
    }),

    sortable: true,
    pageable: true,
    dataBound: function () {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    },
    columns: [
        {
            field: "DepartmentName",
            title: "Department Name",
            width: "120px"
        }, {
            field: "Country",
            title: "Country",
            width: "120px"
        }, {
            field: "City",
            width: "120px"
        }, {
            field: "Phone",
            width: "120px"
        }, {
            field: "Description"
        }
    ]

};

$scope.detailGridOptions = function (dataItem) {
    return {
        dataSource: new kendo.data.DataSource({
            type: "aspnetmvc-ajax",
            transport: {
                read: "Grid/GetEmployees",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8"
            },
            schema: {
                data: "Data",
                errors: "Errors",
                total: "Total"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 1,
            filter: { field: "DeptId", operator: "eq", value: parseInt(dataItem.DeptId) } //Use for single Filter Condition
            //filter: { logic: "and", filters: [{ field: "DeptId", operator: "eq", value: dataItem.DeptId }] } //Use For Multiple Filter Conditions
        }),
        scrollable: false,
        sortable: true,
        pageable: true,
        filterable: true,
        columns: [
            { field: "FirstName", title: "First Name", width: "56px" },
            { field: "LastName", title: "Last Name", width: "110px" },
            { field: "Address", title: "Address" },
            { field: "Phone", title: "Phone", width: "190px" }
        ]

    };

}
}]);

我在下面发布完整的解决方案来帮助他人并节省他们的时间。通过使用DataSourceRequest，您也可以使用kendo的数据源过滤器/分组/分页等。

telerikGridController.js Contrller：

<div ng-controller="telerikGridController">
<div kendo-grid k-options="mainGridOptions">
    <div k-detail-template>
        <div kendo-tabstrip >
            <ul>
                <li class="k-state-active">Orders</li>
                <li>Contact information</li>
            </ul>
            <div>
                <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
            </div>
            <div>
                <ul>
                    <li>Country: <input ng-model="dataItem.Country" /></li>
                    <li>City: <input ng-model="dataItem.City" /></li>
                    <li>Address: {{dataItem.Description}}</li>
                    <li>Home phone: {{dataItem.Phone}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>

<强> Index.cshtml

using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using KendoGridApp.Models;

namespace KendoGridApp.Controllers
{
    [DataSourceRequestAttribute]
    public class GridController : Controller
    { 
      List<Employee> employees = new List<Employee>();
      List<Department> deptList = new List<Department>();

      public GridController()
      {
        Employee employe = new Employee();
        employe.Id = 1;
        employe.FirstName = "First Name 1";
        employe.LastName = "Last Name 1";
        employe.Phone = "+92 302 9888 779";
        employe.Address = "Lahore, Pakistan";
        employe.DeptId = 1;

        var employe2 = new Employee();
        employe2.Id = 2;
        employe2.FirstName = "First Name 2";
        employe2.LastName = "Last Name 2";
        employe2.Phone = "+92 302 4444 779";
        employe2.Address = "Bahrain, UAE";
        employe2.DeptId = 2;

        var employe3 = new Employee();
        employe3.Id = 3;
        employe3.FirstName = "First Name 3";
        employe3.LastName = "Last Name 3";
        employe3.Phone = "+92 302 4444 779";
        employe3.Address = "Bahrain, UAE";
        employe3.DeptId = 3;

        var employe4 = new Employee();
        employe4.Id = 4;
        employe4.FirstName = "First Name 4";
        employe4.LastName = "Last Name 4";
        employe4.Phone = "+92 302 4444 779";
        employe4.Address = "Bahrain, UAE";
        employe4.DeptId = 4;

        var employe5 = new Employee();
        employe5.Id = 5;
        employe5.FirstName = "First Name 5";
        employe5.LastName = "Last Name 5";
        employe5.Phone = "+92 302 4444 779";
        employe5.Address = "Bahrain, UAE";
        employe5.DeptId = 5;

        var employe6 = new Employee();
        employe6.Id = 6;
        employe6.FirstName = "First Name 6";
        employe6.LastName = "Last Name 6";
        employe6.Phone = "+92 302 4444 779";
        employe6.Address = "Bahrain, UAE";
        employe6.DeptId = 6;

        var employe7 = new Employee();
        employe7.Id = 7;
        employe7.FirstName = "First Name 5";
        employe7.LastName = "Last Name 5";
        employe7.Phone = "+92 302 4444 779";
        employe7.Address = "Bahrain, UAE";
        employe7.DeptId = 1;

        var employe8 = new Employee();
        employe8.Id = 8;
        employe8.FirstName = "First Name 6";
        employe8.LastName = "Last Name 6";
        employe8.Phone = "+92 302 4444 779";
        employe8.Address = "Bahrain, UAE";
        employe8.DeptId = 1;

        employees.Add(employe);
        employees.Add(employe2);
        employees.Add(employe3);
        employees.Add(employe4);
        employees.Add(employe5);
        employees.Add(employe6);
        employees.Add(employe7);
        employees.Add(employe8);

        Department dept = new Department();
        dept.DeptId = 1;
        dept.DepartmentName = "Information Technology";
        dept.Phone = "+1 111 111 111";
        dept.Country = "Pakistan";
        dept.City = "Lahore";
        dept.Description = "This is Description Text 1";

        Department dept2 = new Department();
        dept2.DeptId = 2;
        dept2.DepartmentName = "Mechnical Engineering";
        dept2.Phone = "+1 222 111 111";
        dept2.Country = "India";
        dept2.City = "Dehli";
        dept2.Description = "This is Description Text 2";

        Department dept3 = new Department();
        dept3.DeptId = 3;
        dept3.DepartmentName = "Civil Engineering";
        dept3.Phone = "+1 111 000 111";
        dept3.Country = "Pakistan";
        dept3.City = "Islamabad";
        dept3.Description = "This is Description Text 3";

        Department dept4 = new Department();
        dept4.DeptId = 4;
        dept4.DepartmentName = "Radiology";
        dept4.Phone = "+1 111 222 000";
        dept4.Country = "UAE";
        dept4.City = "Dubai";
        dept4.Description = "This is Description Text 4";

        Department dept5 = new Department();
        dept5.DeptId = 5;
        dept5.DepartmentName = "Defence";
        dept5.Phone = "+1 555 888 999";
        dept5.Country = "Australia";
        dept5.City = "Sydney";
        dept5.Description = "This is Description Text 5";

        Department dept6 = new Department();
        dept6.DeptId = 6;
        dept6.DepartmentName = "Socialogy";
        dept6.Phone = "+1 555 777 000";
        dept6.Country = "United States";
        dept6.City = "New York";
        dept6.Description = "This is Description Text 6";

        deptList.Add(dept);
        deptList.Add(dept2);
        deptList.Add(dept3);
        deptList.Add(dept4);
        deptList.Add(dept5);
        deptList.Add(dept6);
     }
     public ActionResult Index()
     {
        return View();
     }
     [HttpPost]
     public JsonResult GetEmployees([DataSourceRequest]DataSourceRequest command)
     {
        return Json(employees.ToDataSourceResult(command), JsonRequestBehavior.AllowGet);
     }
     [HttpPost]
     public JsonResult Departments([DataSourceRequest]DataSourceRequest command)
     {
        return Json(deptList.ToDataSourceResult(command),    JsonRequestBehavior.AllowGet);
     }
  }
}

<强> GridController.cs

kendo.web.min.js
kendo.dataviz.min.js

注意：

请避免使用

Object.n.trigger.n.online.n.transport.read.success Object.ht.extend.read.n._queueRequest.n.trigger.n.online.n.transport.read.success

因为kendo.web.min.js和kendo.dataviz.min.js共享公共代码（kendo.core.js，kendo.data.js等）并使用它们会产生冲突并在返回时返回DataSource的异常阅读功能的成功。这些错误可能就像，

kendo.all.min.js kendo.aspnetmvc.min.js

仅限使用

{{1}}

AngularJS Kendo Grid Paging始终为零

1 个答案: