How to call cjuidialog in cgridview?

Yii 1.1 General Discussion
1

haiii… !

never give up about cgridview. :)

i can’t put this widget in the CGridView value. its throw error.

but when i put it outside cgridview, it’s works,





$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

    'id'=>'mydialog',

    // additional javascript options for the dialog plugin

    'options'=>array(

        'title'=>'Dialog box 1',

        'autoOpen'=>false,

    ),

));


    echo 'dialog content here';


$this->endWidget('zii.widgets.jui.CJuiDialog');




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

	'id'=>'t-surat-grid',

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

	'filter'=>$model,

	'columns'=>array(


.....


array(

	'filter'=>false,

	'type'=>'raw',

	'value'=>'CHtml::link(\'open dialog\', \'#\', array(\'onclick\'=>\'$("#mydialog").dialog("open"); return false;\',))',

),


....

       	),

	'summaryCssClass'=>'summary_manage',

));

the problem is how to pass the row data record load by cgridview to cjuidialog content?.

or perhaps is there any other solutions to accompolish it ?

big thanks for the help…

2

What’s the error? I am not sure but give it a try.


 'value'=>'CHtml::link(\'open dialog\', \'#\', array(\'onclick\'=>\'js: function () { $("#mydialog").dialog("open"); return false;} \',))',

what i would do ( thought this very quick is ). To the value use an ajax to call a action in ccontroller where i pass the key value of specific row from the data provider. This action will return the html content i want to show in the CJuiDialog and then in the ajax call told before use ‘update’ to update the data in the CJuiDialog. THEN i would dialog(“open”);

3

thank for reply #tydeas_dr




What's the error? I am not sure but give it a try.

i cannot add cjuidialog widget class in value cgridview like :




Chtml::

but this not work




Cjuidialog::

the problem is how to pass $data->id_user, $data->name, $data->email etc to the content of cjuidialog. ?




call a action in ccontroller where i pass the key value of specific row from the data provide

is there any example/snipet of this ?

i read your cookbook about cjuidialog, can it accompolsh this case ?

the problem is there are 10 rows of record data.

should i loop 10 times cjuidialog outside/inside cgridview?




for($i=0; $i<10 $i++)

{


$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

    'id'=>'mydialog',

    // additional javascript options for the dialog plugin

    'options'=>array(

        'title'=>'Dialog box 1',

        'autoOpen'=>false,

    ),

));


echo 'dialog content here';


$this->endWidget('zii.widgets.jui.CJuiDialog');


}

sorry for my poor english & my lack of skill :lol:

best regards,

4

You don’t need/can not add CJuiDialog in the code of CGridView. There is NO need for this.

The CJuiDialog is simple a <div> </div> you must use client side ( javascript/jquery ) to add or remove data in it. What are the steps you have to do.

  1. Create an empty CJuiDialog.

  2. Create CGridView and use an CHtml::ajaxLink to display the name of a person for example.

    2.1. In the ajaLink what you have to do is 2~3 things.

    2.2. Make an async call to your controller action…(let’s name it )…actionMyDialog

    2.3. When you create the url for this ajaxlink you know the id of the specific person, you can get this id the same way you get his name to display it :) . So what are you going to do with this id?! Send it with GET or POST to the actionMyDialog when you create the url.

  3. Create actionMyDialog. This actions wait for a $_GET or $_POST [‘id’] take this find what you want to find and echo html code similar to rendering partial something. When this action ends, what happens is that we return to the ajaxLink and ‘success’ option. WHERE we use jquery to append and then open the dialog.

Some tips…use ids for what has to do with ajax, and remove the data form the CJuiDialog <div> before you append other ( this can be done in similar way i think it’s jquery remove when you close the dialog.)

5

I really thank you for step by step logic you describe #tydeas_dr,

it’s really surprise me.

man…, i dont think it’s so compilcated. :lol:

btw, i will keep this in mind and try it later, for now just make it simple.

thank you.

6

Of course you can do it an other way ;)

What happened at last?

7

In case it heps someone else, here’s how I did it:




<?php

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

	'id' => 'payment-grid',

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

	'filter' => $model,

	'columns' => array(

		'date',

		'description',

		'amount',

		array(

			'header' => 'Notes',

			'name' => 'notes',

			'type' => 'raw',

			'value' => 'CHtml::image(

                            Yii::app()->request->baseUrl . "/images/notes.png",

                            "",

                            array("style" => "cursor: pointer;",

                                  "onclick" => "javascript: txt = \'$data->notes\';

                                                $(\'#payment-dialog\').text(txt);

                                                $(\'#payment-dialog\').dialog(\'open\');

                                                $(\'#payment-dialog\').click(function() { $(this).dialog(\'close\'); });"

                                  )

									)'

		),

	),

));


$this->beginWidget('zii.widgets.jui.CJuiDialog', array(

        'id' => 'payment-dialog',

        // Additional JavaScript options for the dialog plugin

        'options'=>array(

                'title' => 'Notes',

                'autoOpen' => false,

                'modal' => true,

                'width' => 350,

        ),

));


// No content needed - it will be set by the JavaScript in the grid


$this->endWidget('zii.widgets.jui.CJuiDialog');

?>

The extra jQuery .click property is optional - it sets the window to close when clicked on.

8

And How about to call cgridview in cjuidialog? I mean update cgridview through cjuidialog… have idea?

9

You should set the route for pagination and sorting to be the route of the action that returns the datagrid.

Use CActiveDataProvider->pagination->route and CActiveDataProvider->sort->route

10

Ok I’ll try… Thanks for the response zaccaria. :D