AngularJS Кендо Сетка пейджинговой всегда Нулевой

Question

Я пытаюсь управлять на стороне сервера подкачки, но мой подкачки для кендо сетки всегда 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 контроллер возвращает мне правильное значение, которое 6, но пейджинг всегда остаются 0 .i.e. как указано ниже

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

Он всегда возвращает меня data.Total = 6, который является правильным, но результат всегда остается прежним, т.е. подкачки = 0.

Я также попытался путем присвоения фиксированное значение 6 для Total, как нижеперечисленным

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

Но возвращать ошибки

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

Пожалуйста, помогите мне! Благодарю.

Answer 1

После ударного моего голову кендо документации, мне удалось исправить мою проблему, заменив $ scope.mainGridOptions и $ scope.detailGridOptions DataSource с

dataSource : new kendo.data.DataSource({ 

}), 

Я отправляю полное решение ниже, чтобы помочь, из других и чтобы сохранить свое время. Используя DataSourceRequest, вы также можете использовать фильтры источника данных/группировку/подкачку кендо.

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 = "+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); 
    } 
    } 
} 

Примечание:

Пожалуйста, избегайте использования

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

потому kendo.web.min.js и Kend o.dataviz.min.js обмениваются общим кодом (kendo.core.js, kendo.data.js и т. д.), и их использование создаст конфликты и вернет исключения для DataSource при возврате успеха при чтении. эти ошибки могут быть, как

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