Updating A Cgridview With A Dropdownlist

Hello there,

I use a CGridView to display a list of notes. These notes belong to categories that are filtered through a drop-down list. The first image attached (before.png) provides an overview of the result.

Since the display of the category is not relevant, I want to get a result as shown in the second image (after.png). To do this, here is the code in my view:




<h1><?php echo CHtml::encode(Yii::t('app','Notes')); ?></h1>


<div>

  <?php echo CHtml::label(CHtml::encode(Yii::t('app','Category:')),'Note_id_category'); ?>

  <?php echo CHtml::dropDownList('Note_id_category',Helper::lastCategory(),Category::byUser()); ?>

</div>


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

  'id'=>'note-grid',

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

  'updateSelector' => '{page}, {sort}, #Note_id_category',

  'columns'=>array(

    array(

      'name'=>'title',

      'type'=>'raw',

      'value'=>'CHtml::link(CHtml::encode($data->title), Yii::app()->urlManager->createUrl("/note")."/".$data->id)',

    ),

    array(

      'name'=>'date_creation',

      'value'=>'Helper::formatDate($data->date_creation)',

    ),

    array(

      'name'=>'date_modification',

      'value'=>'Helper::formatDate($data->date_modification)',

    ),

  ),

)); ?>



I want to know how to make my CGridView be updated based on the value of the drop-down list.

Thank you in advance and see you soon.

Nobody has a solution?

Why don’t you put your dropdown in the standard Gii-generated _search view of your model?

Hi bennouna

Because with the _search view you must submit the form. I would like the CGridView’s data are automatically updated as with the filter.

(sorry if my English is not good, this is an automatic translation)

You can slightly modify the form behavior:


…

/*

Localize the standard Gii code that looks like:


    $('.search-form form').submit(function(){

        $.fn.yiiGridView.update('note-grid', {

            data: $(this).serialize()

        });

        return false;

    });


and replace it with the following:

*/

    $(document).on('change', '#Note_id_category', function() {

        $.fn.yiiGridView.update('note-grid', {

            data: $(this).parents('form').serialize() // edited this line

        });

        return false;

    });

…

You can of course remove the submit button altogether from the _search view

It’s working fine now. Thanks bennouna :slight_smile:

Here the complete code:




<?php

Yii::app()->clientScript->registerScript('search', "

  $(document).on('change', '#Note_id_category', function() {

    $.fn.yiiGridView.update('note-grid', {

      data: $('#Note_id_category').serialize()

    });

    return false;

  });

",CClientScript::POS_HEAD);

?>


<div>

  <?php echo CHtml::label('Catégorie&nbsp;:','Note_id_category'); ?>

  <?php echo CHtml::dropDownList('Note[id_category]',Helper::lastCategory(),Category::byUser(),array('id'=>'Note_id_category')); ?>

</div>


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

  'id'=>'note-grid',

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

  'columns'=>array(

    array(

      'name'=>'title',

      'type'=>'raw',

      'value'=>'CHtml::link(CHtml::encode($data->title), Yii::app()->urlManager->createUrl("/note")."/".$data->id)',

    ),

    array(

      'name'=>'date_creation',

      'value'=>'Helper::formatDate($data->date_creation)',

    ),

    array(

      'name'=>'date_modification',

      'value'=>'Helper::formatDate($data->date_modification)',

    ),

  ),

)); ?>



I have followed your code, however it is not with me. please help me