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!

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!

• javascript
• jquery
• telerik
• kendo-ui
• kendo-grid

1 Answer 1

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.