Настройка сетки pageSize для переменной в пользовательском интерфейсе Kendo

Question

Использование сетки пользовательского интерфейса Kendo для создания списка. Попытка установить параметр pageSize объекта kendo.data.DataSource.

Я могу установить pageSize на переменную изначально (например, varPageSize = 20). Я могу увеличить значение переменной varPageSize с помощью нажатия кнопки (например, varPageSize + = 10). Однако размер страницы в сетке не обновляется.

Присваивание:

var varPageSize = 20; 

Частичный код сетки:

dataSource = new kendo.data.DataSource({ 
    pageSize: varPageSize, 
    ... 
}); 

Код для обработчика событий нажмите

$('#moreButton').on('click', function() { 
     varPageSize += 10; 

     //print to the console to monitor the value of the varPageSize variable 
     console.log(varPageSize); 
}); 

Мой вопрос, как я должен идти о реализации переменной назначения к параметру pageSize, чтобы он мог обновляться в ответ на события переднего конца.

Моя первоначальная мысль заключается в том, что я не обновляю сетку после обновления значения переменной. Сообщения форума Kendo UI от Telerik говорят использовать grid.refresh(); - Но объект сетки не распознает .refresh(). Я также искал другие вопросы по этой теме, и мне сложно определить, какой из них перевести на мое решение - каждый существующий пост - это вариант, который я не использую (например .pageSize();)

Любое понимание или толчок в правильном направлении приветствуется.

Спасибо!

Answer 1

Когда вы установили pageSize: varPageSize, вы назначаете неизменяемое значение varPageSize во время выполнения. Вы не назначаете ссылку на varPageSize. Таким образом, pageSize не будет обновляться при изменении varPageSize (так работает JavaScript, а не пользовательский интерфейс Kendo).

Для того, чтобы сделать то, что вы хотите, вам необходимо позвонить dataSource.pageSize(varPageSize) после его изменения, а затем grid.refresh(), чтобы применить это изменение к сетке.

См. Например, this fiddle.