How To Customize Cgridview?

I would like to add one more button next to default button : “CButtonColumn” in the CGridView but dont know how to do it. Also I want to add the id for these buttons to use later in javascript. The id attribute should be :id =“button.$data->id” to easier recognized. Any helps should be great. Thank in advance :).

Configure your buttons using the buttons property. Use the identifier of the button that you configure to specify the template property.

For example:




    'buttons'=>array(

        'mybutton'=>array(

            // mybutton config

        ),

    ),

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






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

 'id'=>'user-grid',

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

 'columns'=>array(

                 'username',

                 'type',

                  array(

                  'class'=>'CButtonColumn',

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

                        'buttons'=>array(

                        'newbutton'=>array(

                               'label'=>'Click',

                                'url'=>'Yii::app()->createAbsoluteUrl('controller/action'))',           

                               ),            

                     ),

  ),

 ),

)); 

?>

]]>

Thank so much :). Please check that if it correct or not:

in the CgridView:




....

'class'=>'CButtonColumn',

    'button.$data->id' => array(

    'click'=>aFunction($data->id)

)

....



in the javascript:




function aFunction(id){ // work here }



And could I do it the same with the column?


	'columns'=>array(

		'id',

		'display_name'=>array( 

                'id'=>$data->id,

                'name'=>'display. $data->id',

                ),

),

Thank for your reply. Can you show me where is the id or name attribute of these buttons?

No, that’s not correct. The button identifier is so that the framework knows where to render the button. You can’t really apply a unique HTML id attribute to each button, but you shouldn’t need to. What’s the use case?




................

'newbutton'=>array(

                               'label'=>'Click',

                               'url'=>'Yii::app()->createAbsoluteUrl('controller/action'))',

                               'options'=>array(

                                         'class'=>'activatestatus',

                                         'id'=>'user',

                                '),

............




http://www.bsourcecode.com/2012/12/how-to-handle-cgridview-in-yii.html#cgridview-cbuttoncolumn

Great link, thank you so much. According to this, hopefully it likes that:


................

'newbutton'=>array(

                               'options'=>array(

                                         'id'=>'button'.$data->id,

                                         'click'=>aFunction($data->id),

                                ),

............

List all the items, each item has a button, click on the button run a javacript to display a processed data in this page, not other page. CGridView use for the searching the needed item.

Reason to do this is I dont know how to use ajax in the Yii :).

You can’t do this:




'options'=>array(

    'id'=>'button'.$data->id,

    'click'=>aFunction($data->id),

),



The id attribute is not an expression, so it doesn’t have access to the $data object.

To do what you need, apply the same class to each button like this:




'options'=>array(

    'class'=>'my-trigger-button',

),



then use separate javascript code like this:




<script type="text/javascript">

    $(document).ready(function(){

        $('body').on('click', '.my-trigger-button', function(){

            // Get the table row that the button is in

            var row = $(this).closest('tr');


            // Now use jQuery selectors to find and display hidden content in the row

            var hiddenContent = row.find('.hidden-content').html();


            // Etc


            return false;

        });

    });

</script>



You will need to add the hidden div within one of the existing table cells, it doesn’t really matter which.

Well, I’ve had a look at the structure of CButtonColumn, it not a button.


<a class="view" href="........../user/31" title="View"> <img alt="View" src="......./assets/50d9b27b/gridview/view.png"> </a>



So it is impossible to do anything with this.

Thank Keith but your code will not work in here while it is a link :).

Why? My code isn’t button specific.

It will jump to another page :)

Not if you return false at the end of the function.

Thank you a lot, I will get through the JQuery instead of javascript from now :).