how to add select2 extension column in yii gridvie

Question

I want to add select2 extension in one column of GridView. how can I do this? In addition I just want to use select2 Yii extension and not use its pure library.

Answer 1

I have created a class extending the CDataColumn to add a filter to the column:

Yii::import('zii.widgets.grid.CDataColumn');

class TbTableDeviceType extends CDataColumn {
    public $model;
    public $fieldName;

    public function init() {
        $ajaxUpdate = $this->grid->afterAjaxUpdate;
        $this->grid->afterAjaxUpdate = "function(id,data){'.$ajaxUpdate.' 
                $('#" . get_class($this->model) . "_" . $this->fieldName .     "').select2({placeholder:' ', allowClear: true});
        }";
    }

    /**
     * Renders the filter cell.
     */
    public function renderFilterCell() {
        echo '<td><div class="filter-container">';
        $deviceTypes = Helper::getDeviceTypesArray();
        $deviceTypes[''] = ''; // Add empty value to select all
        asort($deviceTypes);
        $this->filter = $deviceTypes;
        $model = $this->model;
        $field = $this->fieldName;
        if (empty($model->$field))
            echo CHtml::dropDownList(get_class($this->model) . '[' . $this-    >fieldName . ']', $this->fieldName, $deviceTypes);
        else
            echo CHtml::dropDownList(get_class($this->model) . '[' . $this->fieldName . ']', $this->fieldName, $deviceTypes, array(
                'options' => array(
                    $model->$field => array(
                        'selected' => true
                    )
                )
            ));
        Yii::app()->controller->widget('ext.ESelect2.ESelect2', array(
            'selector' => '#' . get_class($this->model) . '_' . $this-    >fieldName,
            'data' => $deviceTypes,
            'options' => array(
                'placeholder' => ' ',
                'allowClear' => true
            ),
            'htmlOptions' => array(
                'minimumInputLength' => 2,
                'style' => 'width:100%'
            )
        ));
        echo '</div></td>';
    }
}

And then you add this column to your cgridview:

array(
    'class' => 'ext.widgets.TbTableDeviceType',
    'model' => $model,
    'fieldName' => 'deviceType_id',
    'name' => 'deviceType_id',
),

Answer 2

Use the following way to show the select2 for your Gridview column, hope it helps.

array(            
      'name'=>'category_id',
      'type'=>'html',
      'value'=>'select2::activeDropDown($model,"my_select",CHtml::listData($dataToShowFromModel,"field_name_for_value","field_name_for_text"),array("empty"=>"","placeholder"=>"Please Select",select2Options=>array("allowClear"=>true)))'
)

Answer 3

See examples of this Yii Gridview

In view e.g: admin.php

$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider'=>$dataProvider,
    'columns'=>array(
        'title',          // display the 'title' attribute
        'content:html',   // display the 'content' attribute as purified HTML
        array(            // display 'create_time' using an expression
            'name'=>'category_id',
            'type'=>'html',
            'value'=>'Post::model()->getSelectTwo()',
        ),
        array(            // display 'author.username' using an expression
            'name'=>'authorName',
            'value'=>'$data->author->username',
        ),
        array(            // display a column with "view", "update" and "delete" buttons
            'class'=>'CButtonColumn',
        ),
    ),
));

In Post.php model

public function getSelectTwo(){
    $categories = Category::model()->findAll();
    $data = array();
    foreach($categories as $category){
        $data[$category->id] = $category->title;
    }

    $this->widget('ext.select2.ESelect2',array(
      'name'=>'category_id',
      'data'=>$data,
      'htmlOptions'=>array(
      ),
    ));

}

See more Yii tutorials at http://www.codexamples.com/