How to Enhance a CGridView

  1. 1.Make a CGridView keep the selection between page changes
  2. 2.Make a CGridView column to be editable.

by: Christian Salazar (bluyell, @salazachris74, christiansalazarh@gmail.com)

Yes i know CGridView is very complex and complete, but two things are not covered by default: 1. Make items selected no matter if we change the page and 2. make a column to be editable.

This two things have a nice solution proposed by me, making my effort to have no bugs, if so please report.

1.Make a CGridView keep the selection between page changes

This extension (ekeepselection extension) solves the problem and it is very easy to implement.

To make it works:

$this->widget('zii.widgets.grid.CGridView', array(
        'id'=>'my-gridview',                  // IMPORTANT
        'selectableRows'=>2,                  // 2 = allow multiple 
        'dataProvider'=> $anyDataProvider,
        'columns'=>array(
            array('class'=>'CCheckBoxColumn'),  // ADD A CCheckBoxColumn
            'firstname',
            'lastname',
        ),
    ));
Yii::import('application.extensions.ekeepselection.*');
$dummy = new EKeepSelection('#my-gridview');

to receive the selected changes then use jQuery:

[javascript]
var selected_items = $('#my-gridview').keepSelectionData();
// selected_items is an array, not a string
// use: $.each(selected_items, function(k, value){ .. })

2.Make a CGridView column to be editable.

This extension makes the stuff by implementing a special column: eeditable extension

In order to make it works you need to add a special kind of column:

'class'=>'EEditableColumn' (and its extra attributes)

<?php
	Yii::import('application.extensions.eeditable.*');

	$grid_id = 'some-grid-view';
	$this->widget('zii.widgets.grid.CGridView', array(
		'id'=>$grid_id,
		'dataProvider'=>$dataProvider,
		'columns'=>array(
			array('name'=>'firstname'),
			array('name'=>'example_field',
				'class'=>'EEditableColumn', 'editable_type'=>'editbox',
				'action'=>array('/some/ajaxeditcolumn'),
			),
			array('name'=>'example_field_2',
				'class'=>'EEditableColumn', 'editable_type'=>'select',
				'editable_options'=>
					array(-1=>'--select--','1'=>'Yes','0'=>'No','3'=>'maybe!'),
				'action'=>array('/some/ajaxeditcolumn'),
			),
		),
	));
	?>

And this is the code required at server side to handle the change value event:

public function actionAjaxEditColumn(){
        $keyvalue   = $_POST["keyvalue"];   // ie: 'userid123'
        $name       = $_POST["name"];   // ie: 'firstname'
        $old_value  = $_POST["old_value"];  // ie: 'patricia'
        $new_value  = $_POST["new_value"];  // ie: '  paTTy '
 
        // do some stuff here, and return the value to be displayed..
        $new_value = ucfirst(trim($new_value));
        echo $new_value;            // Patty
    }

In hope it will be usefull for you..!

2 0
5 followers
Viewed: 6 934 times
Version: 1.1
Category: How-tos
Written by: bluyell
Last updated by: CeBe
Created on: Apr 2, 2014
Last updated: 4 years ago
Update Article

Revisions

View all history