Update CGridView when a dropdown value changes

I have a CGridView with columns from a table "product" => {'product_id','category_id',...} I have another table "category" => {'category_id','category_name'}

category_id is the FK in the product table.

Now i want a dropdown list of the category table and on selecting a particular value the CGridView of product should be updated to show only the rows with that category_id. I also need the column filtering/sorting for the CGridView to work (using AJAX).

I was able to refresh the CGridView when a value is selected from the dropdown, however i am not able to send the category_id with the 'data' for the CGridView:

clientScript->registerScript('search', "
$('.cat_dropdown').change(function(){
    $.fn.yiiGridView.update('order-grid', {
        data: $(this).serialize(),
    });
    r开发者_如何学运维eturn false;
});
");

The data: $(this).serialize() sends only the values that are present in the filtering text fields of the CGridView. How do i append the category_id with it?

If the above method is not the right one, please suggest an alternative method.

---

This is how i finally did it. I dont know if the solution is optimal or not, but it works. Any comments welcome.

Yii::app()->clientScript->registerScript('yiiGridView.update', "
  $.fn.yiiGridView.update = function(id, options) {
    var settings = $.fn.yiiGridView.settings[id];
    var data = {
        'product[category_id]': $('.cat_dropdown option:selected').val(),
    };
    options = $.extend({
         type: 'GET',
         data: data,
         success: function(data,status) {
             $.each(settings.ajaxUpdate, function() {
                 $('#'+this).replaceWith($(data).find('#'+this));
                 });
                 if(settings.afterUpdate != undefined)
                     settings.afterUpdate(id, data);
                 },
                 error: function(XMLHttpRequest, textStatus, errorThrown) {
                     alert(XMLHttpRequest.responseText);
                 }
             }, options || {});
    if(settings.beforeUpdate != undefined)
        settings.beforeUpdate(id);
    $.ajax(options);
    };
 ");
 

The above solution, however, needs the category_id in the columns option of CGridView. If it is removed the filtering on other columns does not work. If it is kept the filtering on other columns work, but the category_id is present in the grid( which is not required) Need a way to hide the category_id column in CGridView or some other solution.

---

You only need to add the drop menu to CGridView, nothing more, eg.:

array('name' => 'category_id', 'value' => 'Categories::model()->getCategoryName($data->category_id)', 'filter'=>CHtml::listData(Categories::model()->getCategoryObj(), 'category_id', 'category_name')),

Looking at the above, you will need to add two methods to your Categories class:

getCategoryName getCategoryObj

Read this:

http://www.mattiressler.com/customising-cgridview-select-menu/

http://www.mattiressler.com/using-class-properties-to-minimise-database-queries/

You don't need to add any javascript :-)