Блог

Я использую сетку пользовательского интерфейса Kendo и передаю в нее данные в формате json. Поле «Всего» равно 1157, а размер страницы равен 10. Я хочу управлять подкачкой страниц на стороне сервера, но в нижней части сетки Kendo отображается сообщение «Нет элементов для отображения». Это мой 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>
 

и это действие контроллера пользователей на стороне сервера:

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

В таблице отображаются только 10 первых записей и 0 страниц после этого.

Я сделал тестовую демонстрацию почти как у вас, и она отлично работала на моей стороне. Я внес следующие изменения

1. Первая буква столбца field должна быть строчной «Полное имя»

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

2. Данные и итог также должны быть в нижнем регистре

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

Ниже приведен код:

Модель:

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

Вид:

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

Контроллер:

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

Результат: