AngularJS剑道电网寻呼始终为零 [英] AngularJS Kendo Grid Paging is always Zero

问题描述

我试图来管理服务器端分页但我对剑道电网分页始终为0。

I am trying to manage server side paging but my paging for kendo grid is always 0.

我的code是：

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" }
            ]

        };
    }
}]);

结果：

而对象填充完美的，因为可以在浏览器控制台看到

Whereas objects are populated perfect as can seen in Browser Console

如果我添加函数获取angularjs控制器总计它返回我正确的值是6，但分页始终保持0 .i.e。如下面提到

If i add function to get Total in angularjs Controller it returns me correct value which is 6 but paging always remain 0 .i.e. as mentioned below

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

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

It always return me data.Total = 6 which is correct, but result always remain same i.e. paging = 0.

我也通过分配固定值6至总尝试以下

I also tried by assigning fixed value 6 to Total as mentioned below

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

但是，返回错误

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

请帮助我！谢谢你。

推荐答案

锤击我的头剑道文件后，我设法通过更换$ scope.mainGridOptions和$ scope.detailGridOptions数据源与

After Hammering my head with kendo documentation, I managed to fix my issue by replacing $scope.mainGridOptions and $scope.detailGridOptions datasource with

dataSource : new kendo.data.DataSource({

}),

我张贴下面完整的解决方案，以帮助出他人，以节省他们的时间。通过使用DataSourceRequest，你可以使用剑道的数据源过滤器/分组/分页等为好。

I am posting complete solution below to help-out others and to save their time. By using DataSourceRequest, you can use kendo's datasource filters/grouping/paging etc as well.

telerikGridController.js Contrller：

'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" }
        ]

    };

}
}]);

Index.cshtml

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

GridController.cs

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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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 = "[phone]";
        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);
     }
  }
}

注意：

请避免使用

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

由于kendo.web.min.js和kendo.dataviz.min.js有着共同code（kendo.core.js，kendo.data.js等），并使用它们将发生冲突，并将返回例外数据源在返回读取功能成功时。这些错误可以像

because kendo.web.min.js and kendo.dataviz.min.js share common code (kendo.core.js, kendo.data.js etc) and using them will create conflicts and will return exceptions For DataSource when returning success at read function. these errors can be like,

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

使用仅

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

这篇关于AngularJS剑道电网寻呼始终为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！