title: Setting grid pageSize to a variable in Kendo UI
body: <p>Using Kendo UI grid to build a list. Trying to set the pageSize parameter of the kendo.data.DataSource object.</p>
  
  <p>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.</p>
  
  <p>Variable assignment:</p>
  
  <pre><code>var varPageSize = 20;
  </code></pre>
  
  <p>Partial code for grid:</p>
  
  <pre><code>dataSource = new kendo.data.DataSource({
       pageSize: varPageSize,
       ...
  });
  </code></pre>
  
  <p>Code for click event handler</p>
  
  <pre><code>$('#moreButton').on('click', function () {
        varPageSize += 10;
  
        //print to the console to monitor the value of the varPageSize variable
        console.log(varPageSize);
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>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();)</p>
  
  <p>Any insight or push in the right direction is appreciated.</p>
  
  <p>Thanks!</p>