Как использовать сетку Kendo-ui для виртуализации удаленных данных?

Я использую kendo-ui сетку для AngularJs и хочу активировать virtualization of remote data функциональность. Для тестирования поставил pageSize: 5. Ниже приведено описание virtualization of remote data с сайта Telerik:

Бывают случаи, когда вам может потребоваться работать с большим объемом данных в сетке, и одновременная выборка и обработка этих данных приведет к снижению производительности из-за ограниченных ресурсов браузера. К счастью, в сетке пользовательского интерфейса Kendo есть решение, называемое виртуализацией данных, которое снижает любые задержки при работе с огромными объемами данных. При включении с помощью параметра конфигурации scrollable-> virtual он отображает вертикальную полосу прокрутки для содержимого сетки и отображает только количество элементов, заданное с помощью свойства pageSize источника данных сетки. После того, как вы перетащите полосу прокрутки и размер страницы будет превышен, он автоматически запросит получение и визуализацию следующего набора строк сетки. Как локальные, так и удаленные данные поддерживаются функцией виртуализации сетки, тогда как в этой демонстрации записи получаются с удаленной конечной точки.

Также я установил следующее:

HTML:

<div kendo-grid k-options="mainGridOptions" id="historyGrid" style="width: auto;"></div>

JS для сетки:

    var vm = $scope;
vm.viewMode = {
    mainGridOptions: {
    visible: true
    }
};
vm.mainGridOptions = {

            columns: [
                // here columns
            ],
            onRegisterApi: function (gridApi) {
                vm.gridApi = gridApi;
            },
            dataSource: {
                schema: {
                    model: {
                        fields: {
                            YearBalance: { type: 'number' },
                            Typezalezh: { type: 'string' },
                            License: { type: 'string' },
                            ObjectName: { type: 'string' },
                            ZalezhName: { type: 'string' },
                            PlastName: { type: 'string' },
                            Category: { type: 'string' },
                            Parameter: { type: 'string' },
                            LastVal: { type: 'string' },
                            Val: { type: 'string' },
                            Operation: { type: 'string' },
                            EndT: { type: 'date' }
                        }
                    }
                },

                pageSize: 5,
                transport: {
                    read: function(e) {
                        dataservice.getImportResultReport().then(function(data) {
                            e.success(JSON.parse(data));
                            console.log(data);
                        });
                    }
                }
            },
            serverPaging: true,
            height: screen.height - 330,
            minwidth : 1190,
            batch: true,
            scrollable: {
                virtual: true
            },
            sortable: true,

            serverSorting: true,
            filterable: {
                extra: false,
                operators: {
                    string: {
                        // here filters
                    },
                    number: {
                        // here filters
                    },
                    date: {
                        // here filters
                    }
                }
            }
        };

На сайте телерик (Официальный сайт) написано, что больше ничего делать не нужно. При прокрутке я должен увидеть запрос к серверу, который в моем случае должен быть dataservice.getImportResultReport() вызовом. Но этого не происходит. Эта функция вызывается только один раз, и возвращаются все данные.

Может это происходит из-за того, что я не установил type: "odata"? Но я использую источник данных другого типа.

Как использовать эту функциональность?


person Seva    schedule 01.09.2017    source источник
comment
Что именно вы имеете в виду под virtualization of remote data? Вы хотите отображать данные в сетке кендо?   -  person Karan Desai    schedule 01.09.2017
comment
Я добавил описание этой функции.   -  person Seva    schedule 01.09.2017
comment
Хорошо, вы можете также сказать, какой HTML вы используете для рендеринга сетки кендо? Синтаксис angularjs выглядит хорошо, но я думаю, вы могли пропустить добавление директивы в html   -  person Karan Desai    schedule 01.09.2017
comment
Пожалуйста, посмотри. Думаю, проблема в том, что я не использую type: 'odata'. Но сетка получает из сервера JSON строку ...   -  person Seva    schedule 01.09.2017


Ответы (1)


Добавьте в свой html директиву k-scrollable, которая отображает вашу сетку кендо:

<div kendo-grid k-data-source="mainGridOptions" k-scrollable="{virtual:true}"></div>

Также вы должны использовать директиву k-data-source для вашего источника данных. Надеюсь, это поможет.

Рабочая демонстрация plunkr

person Karan Desai    schedule 01.09.2017