Making a CGridView to keep the selection between page changes

  1. Installing the extension
  2. Now what ?

You may find this usefull when you discover your CGridView lost the selection after an update or after a page change, nicely i have build a new extension to cover this problem in a very easy way.

Installing the extension

1) Please start by downloading the following extension by selection any of:

2) Now you have downloaded the extension and placed in your protected/extensions directory then now place a entry in your 'imports' section on your protected/config/main.php file, like this:


3) Your CGridView widget must be changed to have two options on it: The 'selectableRows' having the value 2 meaning "allowing multiple selection" (the remaining values are: 0=no selection and 1=single selection). The 'id' argument is very important too because it will be used later by the extension to make your widget keeping the selection. A third important piece here is the CCheckBoxColumn, it enables your CGridView to provide a Check Box selector.

Your CGridView will looks like this one:

$this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'my-gridview',                  // IMPORTANT
        'selectableRows'=>2,                  // 2 = allow multiple 
        'dataProvider'=> $anyDataProvider,
            array('class'=>'CCheckBoxColumn'),  // ADD A CCheckBoxColumn

4) Now the magic, make an instance of the class EKeepSelection after the widget body:

$dummy = new EKeepSelection('#my-gridview');

Done. Now your CGridView widget is keeping the selection no matter if you change the current page (in case your data provider has many pages), or if you update your CGridView.

Now what ?

You may find usefull to know what elements in your CGridView has been selected. When you arent using this extension then a call to $('#mygrid').yiiGridView('getSelection') will return only the current page selection, a comma separated values (each value being the primary key).

After using this extension you can get informed about all the values selected in any page, this task can be done by calling a jQuery method named: $.fn.keepSelectionData();

You can make this task done by inserting this piece of code near your widget definition:


$url = CHtml::normalizeUrl(array('AjaxDeleteSelectedRecords'));


             var items = $('#my-gridview').keepSelectionData();

             $.ajax({ url: '$url', type: 'post', data: { items: items } });

Now, what is returned by keepSelectionData() ? An array is returned, having what ? each array entry is a primary key in your CGridView.

To make this wiki complete i provide the code to make the selection arrive your action and take more actions over it:

// in any controller:
public function actionAjaxDeleteSelectedRecords(){
         foreach($_POST['items'] as $primaryKeyId){
              $model = SomeClass::model()->findByPk($primaryKeyId);

Done. Hope it will be usefull for you. Have a nice day!

2 0
Viewed: 11 953 times
Version: 1.1
Category: Tutorials
Written by: bluyell
Last updated by: CeBe
Created on: Mar 21, 2014
Last updated: 8 years ago
Update Article


View all history