Setting grid pageSize to a variable in Kendo UI
javascript, jquery, kendo-grid, kendo-ui, telerik
Solution
When you set `pageSize: varPageSize`, you're assigning the immutable value of varPageSize at the time of execution. You're not assigning a reference to varPageSize. So `pageSize` will not update when you change `varPageSize` (this is how JavaScript works, not Kendo UI specific).
In order to do what you want, you need to call `dataSource.pageSize(varPageSize)` after changing it, and then `grid.refresh()` to apply this change to the grid.
See this fiddle for an example.
Problem
Using Kendo UI grid to build a list. Trying to set the pageSize parameter of the kendo.data.DataSource object. I can set the pageSize to a variable initially (e.g. varPageSize = 20). I can increment the varPageSize variable through a button click (e.g. varPageSize += 10). The pageSize of the grid, however, is not updating. Variable assignment: ``` var varPageSize = 20; ``` Partial code for grid: ``` dataSource = new kendo.data.DataSource({ pageSize: varPageSize, ... }); ``` Code for click event handler ``` $('#moreButton').on('click', function () { varPageSize += 10; //print to the console to monitor the value of the varPageSize variable console.log(varPageSize); }); ``` My question is how I should go about implementing a variable assignment to the pageSize parameter so that it can be updated in response to front end events. My initial thought is that I am not updating the grid after updating the variable value. Kendo UI forum posts from Telerik says to use grid.refresh(); - But the grid object doesn't recognize .refresh(). I've also looked for other questions on this topic and I am having a hard time identifying which one to translate to my solution - each existing post is a variant that I am not using (e.g. .pageSize();) Any insight or push in the right direction is appreciated. Thanks!