Storing items per page in localStorage

[Troy]

Is there any easy way to get the value of the items per page drop down that shows at the bottom of the grid whenever it changes? I'd like to store the changed value in localStorage so the user doesn't have to re-pick the value every time they load the page.

[Alexander Valchev]

Hello Troy,

The value of the 'items-per-page' drop down list corresponds to the current pageSize of the DataSource. You can get it with the pageSize method.

var grid = $("#grid").data("kendoGrid");
grid.dataSource.pageSize();

Kind regards,
Alexander Valchev
the Telerik team

[Troy]

I was hoping there was an event I could subscribe to so I would know it has changed. My use case is:

• The user selects a number of items to display e.g. 50
• They find the record they want and then click an 'edit' link to edit the item
• When the item's edit page loads they realize they didn't actually want that item and they quickly click 'cancel' returning them to the grid.
• The grid will have reverted back to the default number of pages so they have to reselect the number of items they want to display.

It's a minor convenience but I think storing the items per page in local storage or in a cookie would be nice. I'm just not sure what the best way is to get the new value whenever it changes (onchange event?) so I can store it.

Thanks,

Troy

[Alexander Valchev]

Hello Troy,

I suggest you to hook up to the change event of the DropDownList which is used for pageSize adjustment.

var grid = $("#grid").data("kendoGrid");
grid.pager
    .element.find("select[data-role=dropdownlist]")
    .data("kendoDropDownList")
    .bind("change", function(e) {
        this.value(); //currently selected value
    });

The code should be executed after Grid initialization. I hope this will fit in your scenario.

Kind regards,
Alexander Valchev
the Telerik team

[Troy]

Works like a charm...thanks! In case someone else is interested in this, here's how I got it working:

In a script that runs after the page finishes loading:

var grid = $("#grid").data("kendoGrid");
grid.pager
  .element.find("select[data-role=dropdownlist]")
  .data("kendoDropDownList")
  .bind("change", function(e) {
      localStorage.setItem('itemsPerPage', this.value()); //currently selected value
  });

In the datasource configuration:
...
pageSize: localStorage.getItem('itemsPerPage') || 25
...