AngularJS Kendo Grid Paging is always Zero

Question

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

My Code is :

Index.cshtml

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

ASP.NET MVC JsonResult:

Data Returned by Above JsonResult is :

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

My AngularJs controller:

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

        };
    }
}]);

Result:

Whereas objects are populated perfect as can seen in Browser Console

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

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

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

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

But it return error

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

Please help me!! Thanks.

Answer 1

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

}),

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

NOTE:

Please avoid using

kendo.web.min.js
kendo.dataviz.min.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

Use Only

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