Yii gridview rows onclick to expand and show detailview below the row in grid

Question

how to show a gridview like the grid in GRIDVIEW WITH ROW EXPAND AND COLLAPSEthe grid should show normal datas in view when clicking the row that should show the details of a thecorresponding row ..please help inthis... my output should be like

AND when i click the row it should expand and give details(the image will show table but thats need not i need to render the detail view in that.

EDITED i forgot to add onething the grid will load from one model and row details will load from another model.

<?php $this->widget('zii.widgets.grid.CGridView', array(
'id'=>'books-grid',
'dataProvider'=>$model->Projectwisereport(),
//'filter'=>$model,

'columns'=>array(

    array(
        'name'  => 'Project',
        'value' => 'Project::model()->findByPk($data->Project)->proj_name',
   'filter'=>CHtml::listData(Project::model()->findall(),'proj_id','proj_name'),
        ),

    'isbn_no',
    'source_type',
array(
        'name'  => 'complexity',
        'value' => 'Complexity::model()->findByPk($data->complexity)->Complexity_Name',
                                                      'filter'=>CHtml::listData(Complexity::model()->findall(),'id','Complexity_Name'),
       'footer'=>'Total Page',
        ),
      array('class'=>'CButtonColumn',
     'template'=>'{detail}',
     'buttons'=>array(
      'detail'=>array(
            'label'=>'Show Details', 
                    'url'  =>'Yii::app()->createUrl("Process/View",   array("id"=>$data->book_id))',
                    'options'=>array('title'=>'Show details','class'=>'detailsLink'),
  'click'=>"$('#your-grid-book_id').on('click','.detailsLink',function(){
     var row=$(this).closest('tr');
      var url=$(this).attr('href');
   $.get(url,{},function(data){
  row.after(data.row);
     },'json');
     })",

            )
    ) 
)

),
    )); ?>  

i trided this but no use grid is from books model and link to process model in the CButton column

Solution

Try this:

In GridView:

'columns'=>array
     (
            'ID',
            array
            (
                  'name'=>'...',
                  'htmlOptions'=>array('class'=>'plus','id'=>$data->id),
                  'value'=>'...',
            ),
            ...
     ),

js code:

$(".plus").click(function(){
var data = $(this).attr('id');
var url = ...ajax url...
jQuery.ajax({
                'type':'post',
                'data':data,
                'url':url,
                'cache':false,
                'success':function(html){
                                                var new_data = $("<div></div>").attr("class", "appended_data").html(html).attr("id",data);
                                                $(this).parent().append(new_data);
                                                $(this).removeClass('plus');
                                                $(this).addClass('minus');
                                        }
        }); 
});

From your controller ajax action send data in trs(table rows)..I hope the code is self explainatory..

Comments

[jayanthan]

its not updating the grid pls elobarate your sample i use htmloptions in Cbuttoncolumn and in js gave var url to the controller sction but no use i don know what i worng with my code

[jayanthan]

my code is array('class'=>'CButtonColumn', 'template'=>'{detail}', 'buttons'=>array( 'detail'=>array( 'label'=>'Show Details', 'htmlOptions'=>array('class'=>'plus','id'=>'$data->book_id')‌​)))

[jayanthan]

my js in same view <?php Yii::app()->clientScript->registerScript('plus', "$('.plus').click(function(){ var data = $(this).attr('id'); var url = '/itrack/index.php?r=/Process/detail' jQuery.ajax({ 'type':'post', 'data':data, 'url':url, 'cache':false, 'success':function(html){ var new_data = $('<div></div>').attr('class', 'appended_data').html(html).attr('id',data); $(this).parent().append(new_data); $(this).removeClass('plus'); $(this).addClass('minus'); }}); });"); ?>

[lvil]

I'm pretty sure this won't work due to this: stackoverflow.com/questions/9891340/…

[lvil]

this is the ready component yiiframework.com/wiki/314/…

[Blizz]

There is an alternative way if you are prepared in adding the attribute to the tr-tag. I've added an extra answer in the question referred to in the previous comment.