Yii 1.1: How to Enhance a CGridView

5 followers

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:

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..!

Total 5 comments

#16961 report it
pravi at 2014/04/16 11:45am
This is the case when it happens

I make selection some rows in the first page and some in second page. When I move back to second page, this error is thrown:

Uncaught TypeError: Cannot read property 'length' of undefined jquery.js:583 jQuery.extend.each jquery.js:583 $.fn.keepSelectionData ekeepselection.js:94 (anonymous function)

#16960 report it
bluyell at 2014/04/16 11:17am
@pravi

what is the error ? can you copy that here ?

#16899 report it
pravi at 2014/04/10 11:31pm
I got this error in part 1

I am unable to keep selection in multiple pages of gridview

#16898 report it
bluyell at 2014/04/10 06:47pm
hi, in which part did u get that error ?

"..Uncaught TypeError: Cannot read property 'afterAjaxUpdate' of undefined.."

#16870 report it
pravi at 2014/04/05 02:01am
got an error

Uncaught TypeError: Cannot read property 'afterAjaxUpdate' of undefined

Leave a comment

Please to leave your comment.

Write new article
  • Written by: bluyell
  • Updated by: CeBe
  • Category: How-tos
  • Yii Version: 1.1
  • Votes: +4
  • Viewed: 2,941 times
  • Created on: Apr 2, 2014
  • Last updated: Apr 14, 2014
  • Tags: CGridView custom