Combogrid integration with yii

Here I will show you how to integrate combogrid with Yii Framework. For that there is a plugin for Yii which can be downloaded from here. After downloading the file you can unzip the files and copy the combogrid folder  into the ‘extensions’ folder. Now you have to map the controller class into Yii application, for that open the config file located at ” and paste the below code at the appropriate location.

'controllerMap' => array('combogrid' => array(
'class' => 'ext.combogrid.CombogridController',
),)

Then copy the model file ‘CombogridModel.php’ in the downloaded folder into ‘myapp\protected\models’. Now you can use the widget in your view file. Here I will show you how to display the data from the table ‘subject’ from the database ‘report’ which I created as explained here. Below is the view file located at ‘myapp\protected\views\site\students.php’

<?php
$form=$this->beginWidget('CActiveForm', array(
'id'=>'subject-form',
'action' => Yii::app()->createUrl('//'),
'enableAjaxValidation' => true,
'enableClientValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'afterValidate'=>'js:function(form,data,hasError){
if(!hasError){
$.ajax({
"type":"POST",
"url":"'.CHtml::normalizeUrl(array("//")).'",
"data":form.serialize(),
"success":function(data){$.fn.yiiGridView.update("subjects-grid");$("#subject-form")[0].reset();$("#Subjects_editmode").val(0);return false;},
"error":function(xhr, status, error){alert(xhr.responseText);},
});
}
}'
),
'htmlOptions' => array(
"class"=>"form-horizontal"
),
));

echo $form->hiddenField($model,'editmode',array('value'=>0));
?>
<?php echo $form->labelEx($model,'name',array('class'=>'control-label')); ?>

<?php
$DisplayColumns = "id,name";

$query ="select id,name from subject where name LIKE :searchTerm ORDER BY name";

$cntrlr = Yii::app()->createAbsoluteUrl('combogrid/generateoptions', array('sql'=>$query,'dColumns' => $DisplayColumns));

$this->widget('ext.combogrid.CombogridWidget',array(
'model'=>$model,
'attribute'=>'name',
'htmlOptions'=>array('class'=>'form-control','title'=>'Name'),
'options'=>array(
'minLength'=>'1',
'showOn'=>true,
'url'=> $cntrlr,
'debug'=>true,
'width'=>500,
'alternate'=> true,
'colModel'=>array( array('columnName'=>'id','width'=>'10','label'=>'Id','align'=>'left','hidden'=>true),
array('columnName'=>'name','width'=>'50','label'=>'Name','align'=>'left')
),
'select'=>'js: function( event, ui ) {
$("#subject_id").val( ui.item.id );
$("#Subjects_name").val( ui.item.name );
return false;
} '
),
));
echo $form->hiddenField($model,'id',array('id'=>'subject_id'));
echo $form->error($model,'name');
?>


<?php echo CHtml::submitButton('Save',array('class'=>'btn btn-primary top-buffer')); ?>
<?php $this->endWidget(); ?>

Now you can create the action in the ‘SiteController’.

public function actionSubjects()
{
$model=new Subjects;
if(isset($_GET['Subjects']))
{
$model->unsetAttributes();
$model->attributes = $_GET['Subjects'];
}
$this->render('subjects',array('model'=>$model));
}

Now edit the ‘myapp\protected\views\layouts\main.php’ file to add the menu link. Add the below code to the menu.

array('label'=>'Subjects', 'url'=>array('/site/subjects')),

Now if you click the menu you will be able to see the view. If you type characters in the text field combogrid will be displayed and you can select the item.

combogrid