there is filter box for searching in CGridView Yii

Question

I have used CGridView here is my code:-

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'striped bordered condensed',
    'dataProvider'=>$model->searchsecond(),
    'filter'=>$model,
    'columns'=>array(
        array('name'=>'id', 'header'=>'#'),
        array('name'=>'sparktype_id', 'header'=>'First name'),
       array(
            'class'=>'bootstrap.widgets.TbButtonColumn',
            'htmlOptions'=>array('style'=>'width: 50px'),
        ),
    ),
)); ?>  

here is my output

here under firstname tab there is one textbox is there i want to add class to this.

here is the html for this textbox

<div class="filter-container">
<input type="text" name="Spark[sparktype_id]">
</div>

I want to add new class to this input tag.

thanks in advance...

Answer 1

try

<?php $this->widget('bootstrap.widgets.TbGridView', array(
    'type'=>'striped bordered condensed',
      'filterCssClass'=>'your Css class'
    'dataProvider'=>$model->searchsecond(),
    'filter'=>$model,
    'columns'=>array(
        array('name'=>'id', 'header'=>'#'),
        array('name'=>'sparktype_id', 'header'=>'First name'),
       array(
            'class'=>'bootstrap.widgets.TbButtonColumn',
            'htmlOptions'=>array('style'=>'width: 50px'),
        ),
    ),
)); ?>  

Answer 2

You must create a class that extends the CDataColumn class and put it for example in extensions folder.

dont forget add this folder to import section in main.php config

'import'=>array(
   ...
   'application.extensions.*',
   ...
)

In it, you must override renderFilterCellContent method.

class MyDataColumn extends CDataColumn{
        public function __construct($grid) {
            parent::__construct($grid);
        }

        protected function renderFilterCellContent()
        {
                if(is_string($this->filter))
                        echo $this->filter;
                elseif($this->filter!==false && $this->grid->filter!==null && $this->name!==null && strpos($this->name,'.')===false)
                {
                        if(is_array($this->filter))
                                echo CHtml::activeDropDownList($this->grid->filter, $this->name, $this->filter, array('id'=>false,'prompt'=>''));
                        elseif($this->filter===null)
                                echo CHtml::activeTextField($this->grid->filter, $this->name, array('id'=>false, 'class'=>'HereIsMyClassNameForFilterInput'));
                }
                else
                        parent::renderFilterCellContent();
        }
    }

Pay attention to: echo CHtml::activeTextField(..., ..., ..., 'class'=>' HereIsMyClassNameForFilterInput '));

Also in the class TbDataColumn of bootstrap extension, you must change the name of the class that it extends.

class TbDataColumn extends MyDataColumn
{
...

if you want add different classes for every input you can:

• add property public $filterClass = ""; to MyDataColumn class;

• change echo CHtml::activeTextField($this->grid->filter, $this->name, array('id'=>false, 'class'=>'HereIsMyClassNameForFilterInput'));

  to echo CHtml::activeTextField($this->grid->filter, $this->name, array('id'=>false, 'class'=>$this->filterClass));

• and in column section of TbGridView widget set value of` this variable:

  'columns'=>array( ... array( 'name'=>'name', 'filterClass'=>'CustomClassForFilterInputInNameColumn' ), ... )