Custom Page Size for CGridView

Yii Framework

Yii FrameworkThis post is actually something that, after permission granted from a Yii collegue Mike, was posted on Yii forum and I thought that was a *golden hint* too bad not to be shared among people interested on Yii: How to include a custom page size select box on your CGridView.

Step 1

First we need to modify the actionAdmin of the (CRUD) controller we want to include the select box that will change the page size of our CGridView. For the sake of this example, we are going to use the user controller which is created by default with Yii.

//
// page size drop down changed
if (isset($_GET['pageSize'])) {
//
// pageSize will be set on user's state
Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
//
// unset the parameter as it
// would interfere with pager
// and repetitive page size change
unset($_GET['pageSize']);
}

Step 2

Now we have to modify the model’s search() function (e.g. model/User.php):

return new CActiveDataProvider(get_class($this),array(
'pagination'=>array(
//
// please check how we get the
// the pageSize from user's state
'pageSize'=> Yii::app()->user->getState('pageSize',
//
// we have previously set defaultPageSize
// on the params section of our main.php config file
Yii::app()->params['defaultPageSize']),
),
'criteria'=>$criteria,
));

Step 3

Finally, we need to change our view (e.g. views/user/admin.php) and we are done:

//
//
$pageSize=Yii::app()->user->getState('pageSize',Yii::app()->params['defaultPageSize']);
// we use header of button column for the drop down
// so change the CButtonColumn in columns array like this:
...
array(
    'class'=>'CButtonColumn',
    'header'=>CHtml::dropDownList('pageSize',
        $pageSize,
        array(20=>20,50=>50,100=>100),
        array(
       //
       // change 'user-grid' to the actual id of your grid!!
        'onchange'=>
        "$.fn.yiiGridView.update('user-grid',{ data:{pageSize: $(this).val() }})",
    )),
),
...

Hope you find this hint as good as I thought it is. As Mike states, this information is to prove how easy is to enhance Yii components if you are not afraid of Javascript.

References

For futher reading please refer to original post.
Mike’s Forum Post

Happyiing!

6 comments

  1. Roland   •  

    Thank you!

  2. Juan Pulido   •  

    Hi Antonio, thanks for shared this post.

    Firts, in step 3, this code:

    //
    user->getState('pageSize',Yii::app()->params['defaultPageSize']);
    ...
    

    should be:

    //
    $pageSize=Yii::app()->user->getState('pageSize',Yii::app()->params['defaultPageSize']);
    

    Second, i have a problem, when i select one option in dropdown, (20 to 100) no problem but when i select (100 to 20) then no refresh the number in dropdown and no change the size search.

    which may be the problem?

    Thanks for you help me.

  3. Antonio Ramirez   •     Author

    Need to see some code to help you… best

  4. Jon   •  

    Is there any other way to display it outside the header column? For example below the summary ?

  5. Antonio Ramirez   •     Author

    Change the “template” attribute.

Add Comment Register



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>