Kendo UI for jQuery paging not work - "No items to display"

Question

I use Kendo UI grid and pass data in json format to it. The "Total" field is 1157 and pagesize is 10. I want to control server side paging, but at the bottom of Kendo grid a "No items to display" message is shown. This is my index.cshtml:

<div dir="rtl"><div id="grid" class="k-rtl"></div></div>
    <script at="Foot">
        $(document).ready(function(){
            $("#grid").kendoGrid({
                columns: [{
                        field: "Fullname",
                        title: "name"
                    }],
                dataSource: {
                    transport: {
                        type: "json",
                        read: "/pms/Persons/Persons_Read",
                        data: {
                            format: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total"},
                    serverPaging: true,
                    pageSize: 10
                },
                pageable: true
            });
        });
    </script>

and this is server side Persons controller action:

[AcceptVerbs("Get")]
        public ActionResult Persons_Read([DataSourceRequest]DataSourceRequest request)
        {
            return Json(Getpersons().ToDataSourceResult(request));
        }

The grid shows only 10 first records with 0 pages after that.

Answer 1

I made a test demo almost as yours, and it worked fine on my side. I made the following modifications

1.The first letter of column field should be lowercase "fullName"

    columns: [{
        field: "fullName",
        title: "name"
    }],

2.The data and total should also be lowercase

    schema: {
        data: "data",
        total: "total"
    },

Below is the code:

Model:

public class Person
{
    public string FullName { get; set; }
}

View:

<div dir="rtl"><div id="grid" class="k-rtl"></div></div>

@section scripts{

    <script at="Foot">
        $(document).ready(function () {
            $("#grid").kendoGrid({
                columns: [{
                    field: "fullName",
                    title: "name"
                }],
                dataSource: {
                    transport: {
                        type: "json",
                        read: "/Person/Persons_Read",
                        data: {
                            format: "json"
                        }
                    },
                    schema: {
                        data: "data",
                        total: "total"
                    },
                    serverPaging: true,
                    pageSize: 10
                },
                pageable: true,
            });
        });
    </script>
}

Controller:

public class PersonController : Controller
{
    [AcceptVerbs("Get")]
    public ActionResult Persons_Read([DataSourceRequest] DataSourceRequest request)
    {
        return Json(Getpersons().ToDataSourceResult(request));
    }

    private List<Person> Getpersons()
    {
        var people = new List<Person>();
        for (int i = 0; i < 1157; i++)
        {
            var person = new Person()
            {
                FullName = "Person"+i
            };
            people.Add(person);
        }
        return people;
    }
}

Result: