How to Enhance a CGridView

You are viewing revision #3 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#2)next (#4) »

  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: 12 000 times
Version: Unknown (update)
Category: How-tos
Written by: bluyell
Last updated by: CeBe
Created on: Apr 2, 2014
Last updated: 10 years ago
Update Article

Revisions

View all history