Call Model Within Cgridview And Passing Value

Yii 1.1 General Discussion
1

Hi All,

I have the following code:




<?php 

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

	'id'=>'cp-organisation-grid',

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

	'filter'=>$model,

	'columns'=>array(

		'organisation_name',

		'tell_number',

		'fax_number',

		'web_url',

			array(

				'header' => '',

				'name' => 'tell_number',

				'type' => 'raw',

				'htmlOptions' => array('style' => 'width: 30px; text-align: center;',),

				'filter'=>false,

				'value' => 'CHtml::image(

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

                            "",

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

								  "title" => "Additional Info",

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

                                                $(\'#info-dialog\').html(txt);

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

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

                                  )

                            )'

			),

	),

));


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

		'id' => 'info-dialog',

		// Additional JavaScript options for the dialog plugin

		'options'=>array(

				'title' => 'Additional Info',

				'autoOpen' => false,

				'modal' => true,

				'width' => 750,

				'height' => 550,

		),

));


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


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

?>

As you can see this is a column which has an image in it. When you click on the image, it open a CJuiDialog window and displays more information. The line of code which sets the text to be displayed inside the CJuiDialog is this:


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

How possible would it be to a Model and passthe id from the record? In other words, I am trying to do something like this:


"onclick" => "javascript: txt = \'Company::model()->getFullInfo($data->id)\';

getFullInfo is a function inside Company model which will return a string value of all information. Is this possible or I missing the point totally and need to do something totally different?

Thanks

2

Anyone?

3

You have two options.

You can use an AJAX request to load the details from the server when the image is clicked. This will keep the initial page load streamlined, but will introduce a delay between clicking the image and display of the details.

You can hold the details within a hidden div in each row and load them into a dialog when the user clicks. This is likely to be the easiest and most user-friendly option unless you’re showing a lot of records at the same time.

Either way, I would personally remove the javascript from the grid view content and remove the CJuiDialog widget completely. These sorts of things can be handled much more cleanly in pure jQuery.

4

Thank you.

So I will change my onclick code to something like this?




     "onclick" => "callJQueryFunction(\'$data->id\')",

Thus passing the id from the record row to the callJQueryFunction function? Then from there use standard JQuery?

5

No, I’d remove the javascript code completely and attach the event listener to the body of the page. Let’s say you’ve created a hidden div containing the data you want to show in the dialog in each row and given the div a class of dialog-content, and that you’ve given your image a class of dialog-trigger.




<script type="text/javascript">

    $(document).ready(function(){

        $("body").on("click", "#cp-organisation-grid img.dialog-trigger", function(){

            $(this).closest("tr").find(".dialog-content").clone().dialog({

                title: "Additional Info",

                modal: true,

                width: 750,

                height: 550

            });

            return false;

        });

    });

</script>

You may need to include this at the top of your page if you’re not already loading jQuery UI:




<?php Yii::app()->clientScript->registerCoreScript('jquery.ui'); ?>
6

Thanks, but how in CGridView do I create hidden div for each row using a different model? Maybe I need to rethink my approach.

7

I don’t understand the problem. Are you saying that each row needs to load an additional model record?

If not, you could do something like this in your image column:




array(

	'header' => '',

	'name' => 'tell_number',

	'type' => 'raw',

	'htmlOptions' => array('style' => 'width: 30px; text-align: center;',),

	'filter' => false,

	'value' => function ($data){

		$result = CHtml::image(Yii::app()->request->baseUrl . '/images/notes.jpg', '', array(

			'style'=>'cursor: pointer;',

			'title'=>'Additional Info',

			'class'=>'dialog-trigger',

		));

		

		$result .= '<div class="dialog-content" style="display:none;">'

				. Yii::app()->controller->renderPartial('/path/to/view',

						array('model'=>$data), true)

				. '</div>';

		

		return $result;

	},

),

You can create a view to handle the creation of the content for the dialog.

8

Thank you, your example above has given me other things to think about. I am sure I will come right with what I have here. Thanks.

9

I followed all your suggestions above and all I can say is; THANK YOU. It works perfectly.