CGridView with CJuiAutocomplete in Filters

Yii 1.1 General Discussion
1

Hi

I i’m trying to setup a cgridview with a cjuiautocomplete in the filters and an action to filter the content according to user input

I managed to get to the point where the filter appears as it should and the autocomplete works as it should with the calls to the autocomplete action to flter the correct fields according to user input

However what happens is that when and option is selected from the cjuiautocomplete dropdown the value is copied to the filter field but this happens before the Cgridview URL is built which means that the cgridview ajax update does not include the selection from the cjuiautocomplete dropdown but instead it includes only the user input in the filter text field.

I managed to find out that this is because the event that triggers the cgridview ajax update is .change() (live event in the body element) and i believe that this event is triggered when the filter text field looses focus.

Am i right ?

How can i solve this ?

My Cgridview definition looks likes this:





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

	'id'=>'activations-grid',

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

	'filter'=>$model,

	'columns'=>array(

		array(

        	'name'=>'id_client',

        	'value'=>'CHtml::value($data,\'idClient.name\')',

			'filter'=> $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

				'model'=>$model,

				'attribute'=>'client_name',

				'source'=>$this->createUrl('/backoffice/clients/autoComplete'),

				// additional javascript options for the autocomplete plugin

				'options' => array(

					'showAnim'=>'fold',

				),

				'htmlOptions' => array(

				),

			),true),

		),

...
2

I did this once, but wound up not using it for other reasons, so I don’t have what I did immediately handy, but I think what I did was override CGridView’s updateSelector, and then triggered ajax updates manually.

3

I have the same problem as Artur. I hope somebody could help us on this. (I commented out select options here.)


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

	'id'=>'item-grid',

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

	'filter'=>$model,

	'columns'=>array(		

		array(

			'name'=>'category',

			'header'=>'Category',

			'value'=>'$data->itemCategory->category',

			'filter'=> $this->widget('zii.widgets.jui.CJuiAutoComplete', array(

				'name' => 'Item[category]',

				'sourceUrl' => array('item/CategoryAjax'),

				'value' => '',

				'options' => array(

					'showAnim' => 'fold',

					//'select' => 'js:function(event, ui){ jQuery("#Item[category]").val(ui.item["id"]); }'

					//'select' => 'js:function(event, ui){ jQuery("'.CHtml::activeId($model,'catno').'").val(ui.item["id"]); }'

				),

				'htmlOptions' => array('style'=>'height: 16px; width: 150px;'),

			), true),

		),

...
4

Hi Artur/alipato,

Did either of you find a solution for this, or, are you still having trouble?

I too am experiencing the same issue and would like to find a resolution. Autocomplete in CGridView filters are pretty much unusable at the moment.

5

No solution here yet.

Any ideas ??

6

Have you guys thought of using afterAjaxUpdate? I think that may solve your issue.

Look for instance to CJuiDatePicker with CGridview approach by softark’s wiki:

http://www.yiiframework.com//wiki/318/using-cjuidatepicker-for-cgridview-filter/

7

My problem is not after the ajax update is before.

When i select the value from the autocomplete drop down list cgridview does not use the value because the ajax update is triggered as soon as the focus leave the input filter field wich happens has soon as i select the item from the drop down list