Cjuidialog, Foreign Key Cgridview Filtering

I am stumped and stuck! Seem like a common question though.

I have a Product Table and Product Group table. Product has GroupId element indicating BELONGS_TO relationship with Product Group table. Both have Models, Views and Controls.

Requirement: When I create product, I need to set which Group it belongs to. Example: product ‘iPhone’ belongs to ‘Smart Phones’ group.

So on Product Create form - I have group ID field. I tried dropdown and autocomplete options, both working well in getting the Group descriptions. However, dropdown field will not work since the group description list is too large. AutoComplete will not work since users have to know what to type. Hence my quest for an ajax dialog that will let users enter the criteria to filter on Group description.

This is what I have:

Product Create View:

$form=$this->beginWidget(‘CActiveForm’, array(



<div class="row">

<?php echo $form->labelEx($model,‘group’); ?>

<?php echo $form->textField($model,‘group’); ?>

<?php echo $form->error($model,‘group’); ?>



echo CHtml::link(‘open dialog’, ‘#’, array(

‘onclick’=>’$("#mydialog").dialog(“open”); return false;’,


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



                    'title'=&gt;'Product Group',

                    'width' =&gt; 'auto',




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

            'dataProvider' =&gt; prodGroup::model()-&gt;search(),

            'id' =&gt; 'CGridViewPgroup',


             'columns' =&gt; array(





            'htmlOptions' =&gt; array(

                'style'=&gt;'cursor: pointer;'


            'selectionChanged'=&gt;'js:function(id){ onSelectionChange(); }',




Dialog is pulling all the Group descriptions, however does not perform Filter operation. What am I doing wrong?


turns out, the controller is treating the CJuiDialog.CGridView as a part of the CActiveForm that is used to collect the Product information and not differentiating the CGridView Search separately, which is pulling/searching the data from Product Group model.

How do I enforce the transaction data entry form to treat the CJuiDialog.CGridView as a referential table look-up?

I tried brute force Search Submit approach within the CJuiDialog and JavaScript to re-serialize the CGridView - interestingly it ended up inserting the transaction data for every row on the CGridView table and took me to the Search form of the Lookup data model (product group in this case)

Any thoughts? Appreciate your insights.

Hello Yii experts,

Is this even possible (please view the attached image)?? If so can you guide me to a good example/how to article…

Dear Friend

The problem we are facing due to the following lines.

'dataProvider' => prodGroup::model()->search(),


With above approaches, I am reasonably sure that we can not do search.

Now I have two models.



one brand has many items.

Let us try to simulate your scenario when we are creating an item.

We want to get the b_id from gridView of brand in a dialog.


public function actionCreate()


		$model=new Item;

		$brand=new Brand('search');
















<?php echo $this->renderPartial('_form', array('model'=>$model,'brand'=>$brand)); ?>


<div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(



)); ?>

	<p class="note">Fields with <span class="required">*</span> are required.</p>

	<?php echo $form->errorSummary($model); ?>

	<div class="row">

		<?php echo $form->labelEx($model,'name'); ?>

		<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>256)); ?>

		<?php echo $form->error($model,'name'); ?>



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




'title'=>'Choose a Brand',










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









			'selectableRows'=>1, //can only choose one item at a time.




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

<?php echo CHtml::link('Choose a Brand', '#', array(

   'onclick'=>'$("#mydialog").dialog("open"); return false;',



$("body").on("change","#brand-grid input[type=\"checkbox\"]",function(){

var key=$("#brand-grid").yiiGridView("getChecked","brand-grid_c2");





	<div class="row">

		<?php echo $form->labelEx($model,'b_id'); ?>

		<?php echo $form->textField($model,'b_id'); ?>

		<?php echo $form->error($model,'b_id'); ?>


	<div class="row buttons">

		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>


<?php $this->endWidget(); ?>

I have registered a following script at _form.php.


$("body").on("change","#brand-grid input[type=\"checkbox\"]",function(){

var key=$("#brand-grid").yiiGridView("getChecked","brand-grid_c2");




This script ensures that whenever user selects a row from brand grid,

it takes the id of the that particular row.

it updates the b_id field of Item with that value.

Here "brand-grid_c2" indicates that checkBox column resides as 3rd column.

"#Item_b_id" is the id of b_id input field rendered by yii by default.

Now the grid is searchable and we can fetch values from it to update the form.


Awesome Seeni, it is working like a charm!

Thank you for the very detailed, step by step instructions. Appreciate it. Hopefully others can benefit from this as well.