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

hi,

how to show a gridview like the grid in My linkcheck the grid formatthe 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

after i click the row it should show somthing like delailview but in the image it showing rows thats need not

Take a look to groupgridview extension. When you are done implementing it, add some jQuery in the grid’s afterAjax to toggle the visibility of the desired rows. That should do it imho.

thanks bennouna …i am totally new can you suggest any jquery for that or any sample. i forgot to add onething the grid will load from one model and row details will load from another model

Well I don’t have any sample code for that. If you’re familiar with PHP, HTML (DOM) and jQuery, that should be easy:

  • The grid that Yii generates in your view is no more than an HTML table.

  • When (if) you sort the table, use the filters, or search the view using the Advanced Search, it’s done using Ajax, thus the afterAjax event in the CGridVIew.

  • Each table row is a record. So you just have to insert a new row after each row, just after it has been initialized or filtered by Ajax.

  • That new row will contain all the contents you want. One approach is to build that contents by a method in your model (class).

  • Of course, you hide the new row(s) by jQuery, and attach a handler for your (+) buttons to show the clicked row’s related inserted row.

If you’re not familiar with these. You can post your running codes, and members could help. BUT I think you won’t really learn…

Oh, ok, so the standard CGridView will do just fine

my code i used is

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

‘id’=>‘books-grid’,

‘dataProvider’=>$model->Projectwisereport(),

//‘filter’=>$model,

‘columns’=>array(

array(


    'name'  =&gt; 'Project',


    'value' =&gt; 'Project::model()-&gt;findByPk(&#036;data-&gt;Project)-&gt;proj_name',

‘filter’=>CHtml::listData(Project::model()->findall(),‘proj_id’,‘proj_name’),

    ),





'isbn_no',


'source_type',

array(

    'name'  =&gt; 'complexity',


    'value' =&gt; 'Complexity::model()-&gt;findByPk(&#036;data-&gt;complexity)-&gt;Complexity_Name',


                                                  'filter'=&gt;CHtml::listData(Complexity::model()-&gt;findall(),'id','Complexity_Name'),


   'footer'=&gt;'Total Page',


    ),


  array('class'=&gt;'CButtonColumn',


 'template'=&gt;'{detail}',


 'buttons'=&gt;array(


  'detail'=&gt;array(


        'label'=&gt;'Show Details', 


                'url'  =&gt;'Yii::app()-&gt;createUrl(&quot;Process/detail&quot;,   array(&quot;id&quot;=&gt;&#036;data-&gt;book_id))',


                'options'=&gt;array('title'=&gt;'Show details','class'=&gt;'detailsLink'),

‘click’=>"$(’#your-grid-book_id’).on(‘click’,’.detailsLink’,function(){

 var row=&#036;(this).closest('tr');


  var url=&#036;(this).attr('href');

$.get(url,{},function(data){

row.after(data.row);

 },'json');


 })&quot;,





        )


) 

)

),

)); ?&gt;  

in controller

public function actiondetail($id)

{


	&#036;model=new Process('search');





	&#036;model-&gt;unsetAttributes();  // clear any default values


	if(isset(&#036;_GET['Process']))


		&#036;model-&gt;attributes=&#036;_GET['Process'];


		&#036;model-&gt;book_id=&#036;id;


	&#036;this-&gt;render('detail',array(


		'model'=&gt;&#036;model,


	));

this will rendering anothed view correesponding grid filtered by id

my detail view is

<?php

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

‘id’=>‘process-grid’,

'dataProvider'=&gt;&#036;model-&gt;search(),


'filter'=&gt;&#036;model,


    'selectableRows'=&gt;50,


  'columns'=&gt;array(


		'book_id',


		//'isbn_no',


	array(


        'name'  =&gt; 'isbn_no',


        'value' =&gt; 'Books::model()-&gt;findByPk(&#036;data-&gt;isbn_no)-&gt;isbn_no'


		),


		'Task',


		'employee',


		'totalpage',


		'total_pg',


		'totaltime',





		),

));