Update CGridView when a dropdown value changes

Question

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(),
    });
    return 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.