How to hide/show columns based on filter in jqgrid?

Question

I am using jQgrid to display mysql data as grid.

For few columns in grid I applied filter. I want to show/hide columns based on filtered values. How to achieve this?

Answer 1

You can use onInitGrid for achieve this, in this function you can show/hide columns that you want to show/hide according to filters by using hideCol and showCol.

jQuery("#jqGrid").jqGrid({
   url: '[sever_url]',
   mtype: "POST",
   postData: [postdata], // {name:value}
   datatype: 'json',
   colModel: [
      { index: 'column1_index', name: 'column1_name' },
      { index: 'column2_index', name: 'column2_name' },
      { index: 'column3_index', name: 'column3_name' },
      { index: 'column4_index', name: 'column4_name' },
      { index: 'column5_index', name: 'column5_name' }
   ],
   onInitGrid: function(){
      jQuery("#jqGrid").jqGrid('hideCol','column2_name');
      jQuery("#jqGrid").jqGrid('hideCol','column4_name');
      jQuery("#jqGrid").jqGrid('showCol','column5_name');
   }
});

Answer 2

You can use beforeSearch or afterSearch callback of filterToolbar to access postData.filters parameter. Alternatively you can do the same inside of loadComplete. You can convert it to object using $.parseJSON and analyse the filed where the filter set. You will get full information about the filters in the way and can call showCol or hideCol.

Look in the answer, this one and this one for the corresponding code examples.