Create a custom column with custom buttons?

Question

Q : how to create a custom column with custom buttons?

I want to create a grid view with cgridview as follow. How can I do?

Company Name | header 1.1 | header 1.2 | header 2.1 | header 2.2 | header 3.1 | header 3.2

AAAA1 | [button] | [button] | [button] | [button] | [button] | [button]

BBBB1 | [button] | [button] | [button] | [button] | [button] | [button]

CCCC1 | [button] | [button] | [button] | [button] | [button] | [button]

================================================================================== update

This is my cgridview code

<?php $this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'customer-grid',
    'dataProvider'=>$model->search(),
    'filter'=>$model,
    'columns'=>array(
        'customer_name',
        array(
            'class'=>'CButtonColumn',
            'template'=>'{select1} {select2} {select3} {select4} {select5} {select6} {select7} {select8}',
            'buttons'=>array
            (
                'select1' => array
                (
                    'label'=>'Send an e-mail to this user',
                    'url'=>'Yii::app()->createUrl("job/getjobno", array("c_code"=>$data->c_code))',
                    'imageUrl'=>Yii::app()->request->baseUrl.'/protected/assets/images/gridview/icon_select.gif',
                    'options'=>array('style'=>'width:10px; border:none'),
                    'click'=>'function(event) { 
                        $.ajax({
                            url:$(this).attr("href"),
                            dataType: \'json\',
                            success: function(data){
                                //alert(data.newjobno);

                                $("#Job_name").val(data.newjobno); 
                                //console.log(\'target tr: \' + target);
                                //$(target).find(\'.item-price\').val(data.newjobno);
                                $("#customerlist").dialog("close");
                            }
                        });                     
                        event.preventDefault();
                    }',
                ),      
            ),
        ),
        array(
            'type'=>'raw',
            'value'=>'$data->c_code',
            //'filter'=>array('style'=>'visible:none'), 
            'headerHtmlOptions'=>array('style'=>'width:0px; display:none; border:none; textdecoration:none'),
            'htmlOptions'=>array('style'=>'display:none; border:none;', 'class'=>'customer-id'),  
            'header'=>false,
            'filter'=>false,
        ),
    ),
)); ?>

Answer 1

You almost got it right. Just that you will need more button columns, use a proper template for each column, and specify buttons for each column correctly:

'columns'=>array(
    'customer_name',
    array(
        'header'=>'Header 1.1', // add headers this way
        'class'=>'CButtonColumn',
        'template'=>'{select1}', // only 1 button
        'buttons'=>array
        (
            'select1' => array
            (
                // ... options for select1 button
            ),      
        ),
    ),
    array(
        'header'=>'Header 1.2', // add headers this way
        'class'=>'CButtonColumn',
        'template'=>'{select2}', // only 1 button
        'buttons'=>array
        (
            'select2' => array
            (
                // ... options for select2 button
            ),      
        ),
    ),
    // ... and so on add the other button columns ...
    // ... rest of columns ...
),

---

Incase you wanted all buttons in 1 column, you just have to add the button options within the buttons property:

'columns'=>array(
    'customer_name',
    array(
        'class'=>'CButtonColumn',
        'template'=>'{select1}{select2}{select3}', // only 1 button
        'buttons'=>array
        (
            'select1' => array
            (
                // ... options for select1 button
            ),
            'select2' => array
            (
                // ... options for select2 button
            ),
            'select3' => array
            (
                // ... options for select3 button
            ),      
            // ... and so on add the other button options ...
        ),
    ),
    // ... rest of columns ...
),

---

Update: Just remember that whatever buttonId you mention in the template, use that buttonId to specify the button options:

'class'=>'CButtonColumn',
'template'=>'{buttonId1}{buttonId2}',
'buttons'=> array(
    'buttonId1'=>array(
        // ... options ...
    ),
    'buttonId2'=>array(
        // ... options ...
    )

)