Solved: Need To Add <Label> Tag In Checkbox Column In Cgridview

Hi,

I need to add <label> and <span> tag to checkbox column. Actually I want to include following code.




<label><input id="checkAll" name="checkAll" type="checkbox"><span></span></label>



My admin.php view file will like below




<?php

/* @var $this StateController */

/* @var $model State */


$this->breadcrumbs=array(

     'States '=>array('admin'),$model->name,

);

//$this->breadcrumbs=array(

//	'Manage Posts',

//);

?>


<?php $form = $this->beginWidget('CActiveForm', array(

    'id'=>'state-form',

    'enableAjaxValidation'=>true,

    'enableClientValidation'=>true,   

)); ?>


      <!-- Contents -->  

      <div class="container-fluid main-content">

          <div class="row">

          <div class="col-lg-12">

            <div class="widget-container fluid-height clearfix">

              <div class="heading">

                <h3>Manage States</h3>

              </div>

        

             <?php

                         

             

             if(Yii::app()->user->hasFlash('success')):

                echo '<div class="alert alert-success">';

                echo '    '.Yii::app()->user->getFlash('success');

                echo '</div>';

             endif; 

             ?>

                   

                                         

              <div class="btn-group btn-group-edit">

              <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

              <i class="icon-reorder"></i>Options<span class="caret"></span></button>

              <ul class="dropdown-menu">

                   <li>

                   <a onclick="document.location='<?php echo Yii::app()->request->baseUrl;?>/backend.php?r=state/create'" href="#">

                        <i class="icon-plus-sign"></i>New Item</a>

                   </li>

                 <!--  <li> <a href="#"><i class="icon-edit"></i>Edit Item</a> </li> -->

                   <li>

                         <a onclick="deleteRecord()" href="#"><i class="icon-remove"></i>Remove Item</a>

                   </li>

              </ul>

              </div>

              

              <div class="widget-content padded clearfix">

 

                <?php 

               $this->widget('bootstrap.widgets.TbBreadcrumb', array(

                   'links'=>$this->breadcrumbs,

               ));?>    

                          	

                <?php $this->widget('bootstrap.widgets.TbGridView', array(

               	'id'=>'state-grid',

               	'dataProvider'=>$model->search(),

               	'type' => array('striped', 'bordered', 'condensed','hover'),

               	'filter'=>$model,

               	'columns'=>array(

                           array(

                           'id'=>'state_id',

                           'class'=>'CCheckBoxColumn',

                           'selectableRows' => '50', 

                           'selectableRows'=>2,

                           'value'=>$model->state_id,

                           'htmlOptions'=>array('style'=>'width: 20px'),

                       ),

                         'code', 				

               		'name',

               		array(

                           'name'=>'status',

                           'header'=>'Status',

                           'filter'=>array('1'=>'Enabled','0'=>'Disabled'),

                           'value'=>'($data->status=="1")?("Enabled")<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/sad.gif' class='bbc_emoticon' alt=':(' />"Disabled")'

                       ),	

               		array(

                             'class'=>'bootstrap.widgets.TbButtonColumn',

                             'template' => '{view}    {update}   {delete}',

               		),

               	),

               )); ?>


              </div>

            </div>

          </div>

        </div>

     </div> 

<?php $this->endWidget(); ?>



Any help would be highly appreciated.

Some solutions:

http://www.yiiframework.com/forum/index.php/topic/7140-can-i-add-a-checkbox-on-per-row-in-the-cgridview/page__view__findpost__p__36228

http://www.yiiframework.com/wiki/353/working-with-cgridview-in-admin-panel/

http://www.yiiframework.com/wiki/106/using-cbuttoncolumn-to-customize-buttons-in-cgridview/

Hi,

Check this link… your solution is here :)

http://www.yiiframework.com/doc/api/1.1/CCheckBoxColumn#headerTemplate-detail

Hi Guys,

Thanks for the replies. I tried your solutions, but still couldn’t fix it.




'columns'=>array(

                           array(

                           'header'=>'html',

                           'type'=>'raw',    

                           'id'=>'state_id',

                           'class'=>'CCheckBoxColumn',

                           'selectableRows' => '50', 

                           'selectableRows'=>2,

                           'value'=>'<label>'.$model->state_id.'</label>',

                           'htmlOptions'=>array('style'=>'width: 20px'),

                       ),

                         'code',				

               		'name',



So If you could be more specific it would much grateful :)

are you trying to do this…

just try my code





		array(

			'header'=>'html',

			'id'=>'state_id',

			'class'=>'CCheckBoxColumn',

			'selectableRows' => '50',

			'selectableRows'=>2,

			'value'=>'$data->pgm_web_status',

			'headerTemplate'=>'<label>{item}<span></span></label>',

			'htmlOptions'=>array('style'=>'width: 20px'),

		),




Hi Chandran,

Thank you for your reply. I followed your instruction but it did not give expected out put. I need each and every check box placed in between <label></label>




<?php $this->widget('bootstrap.widgets.TbGridView', array(

               	'id'=>'state-grid',

               	'dataProvider'=>$model->search(),

               	'type' => array('striped', 'bordered', 'condensed','hover'),

               	'filter'=>$model,

               	'columns'=>array(

                           array(                         

                           'id'=>'state_id',

                           'class'=>'CCheckBoxColumn',

                           'selectableRows' => '50', 

                           'selectableRows'=>2,

                           'headerTemplate'=>'<label>{$model->state_id}<span></span></label>',    

                           'value'=>$model->state_id,

                           'htmlOptions'=>array('style'=>'width: 20px'),

                       ),

                         'code', 				

               		'name',

               		array(

                           'name'=>'status',

                           'header'=>'Status',

                           'filter'=>array('1'=>'Enabled','0'=>'Disabled'),

                           'value'=>'($data->status=="1")?("Enabled")<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/sad.gif' class='bbc_emoticon' alt=':(' />"Disabled")'

                       ),	

               		array(

                             'class'=>'bootstrap.widgets.TbButtonColumn',

                             'template' => '{view} &nbsp;&nbsp; {update} &nbsp;&nbsp;{delete}',

               		),

               	),

               )); ?>




Given below is a screen shot of the result.

I don’t see a solution with the CCheckboxColumn if you want to add different labels in every row.

Take a look at my wiki article customized datacolumns





'columns'=>array(

        array(            

            'name'=>'state',

            'type'=>'raw', //because of using html-code <br/>

            //call the controller method gridStateColumn for each row

            'value'=>array($this,'gridStateColumn'), 

        ),

        ...




Add the method gridStateColumn to your controller.

Not tested, maybe you have to set another name, label …

Do a var_dump here to see whats comining in.





    //return the value for the state checkbox column

    protected function gridStateColumn ($data,$row,$dataColumn) 

    {

         //var_dump($data,$row,$dataColumn);

 

         $name = 'state_id[]'; 

         $cbId = 'state_id_'.$data->state_id;

         $checked = $data->state_id == 1; //<img src='http://www.yiiframework.com/forum/public/style_emoticons/default/huh.gif' class='bbc_emoticon' alt='???' />

         $options = array('value'=>"value"=>$data->state_id, 'id'=>$cbId);

         

         $input = CHtml::checkBox($name,$checked,$options);          

         $label = $input .' '.$data->state_id; //??


         return CHtml::label($label,$cbId);

    }

 




Hi,

I have created article for you . just look your solution

http://www.yiiframework.com/wiki/627/cgridview-customized-ccheckboxcolumn/

If it help dont forget to share and upvote :)

and another thing … change your title with SOLVED keyword

Hi Chandran,

It is working now. Thank you very much for your help to solve this issue. By the way I tried to change the title with SOLVED. But I could not find how to change it :)

[size=2]Hi,[/size]

Another tips for you

Just edit the post and choose "Use Full Editor"… this way you can edit even the post title

Thanks for the tip. :)

Hi,

Sorry for bothering you again. I got small issue. Your java script is working perfectly. But after applying filter style of check box (css class of the <label> and ‘<span>’) will be removing. I attempted to fix it but could not do that.

If you can help on this also it would be a great.

Before filter

After applying filter

Here goes your solution…





$this->widget('zii.widgets.grid.CGridView', array(

    'afterAjaxUpdate'=>'function(id, data){

        $("[id^=state_id_]").wrap("<label class=list></label>");

        $("<span></span>").insertAfter("[id^=state_id_]");      

    }',

        'id'=>'programm-grid',

));



Hi Chandran,

It worked. Thanks again