In Backgrid, how can I change pageSize with a select input?

Question

I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.

My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.

So, in my footer I have

select id="changePageSize"

And in the grid

events: {
    'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}

I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.

score 1 · Accepted Answer · answered Jun 27 '13 at 18:11

What I ended up doing was adding the event listener and function to the backgrid-paginator extension.

Added the select box to the _.template('...

_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');

Under events I added:

'change select.pageSize' : 'changePageSize'

And then created the function:

changePageSize: function(e){
    e.preventDefault();
    this.collection.state.pageSize = Math.floor(e.currentTarget.value);
    this.collection.reset();
},

It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.

score 1 · Answer 2 · answered Aug 28 '13 at 09:26

Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.

You just need to add: this.collection.getPage(1); // it will always select first page

In Backgrid, how can I change pageSize with a select input?

2 Answers2