Excel like filtering in jqgrid

Question

I am new to jquery and jqGrid. I am struggling with it.I need someone to help me in the JqGrid that I need a filtering headers in the jqGrid.I look for it when I found a demo done by Oleg. But I need checkbox when I select on checkbox search values have to to be filtered just like Excel Filtering.Please help me out someone.

Even I findout the implementation but that is not working to me.Please help me in it,as I need it badly.

Thanks in Advance

Answer 1

I don't like words like "Excel like filtering" because everybody interprets it in different way. So I have to answer in the way how I interpret it.

I think that you should use jQuery UI MultiSelect Widget written by Eric Hynds. I wrote some answers and demos before which shows how to use it.

The demo shows how to use jQuery UI MultiSelect Widget together with toolbar searching to implement "Excel like filtering".

By the way you can build the list of values displayed by the multiselect widget dynamically like the values of jQuery UI Autocomplete in the answer.

Another answers (this and this) with the corresponding demos (this and this) shows how to use the widget for editing.

UPDATED: The updated demo uses jqGrid 4.4.1, jQuery UI 1.8.24 and jQuery 1.8.2 and the current (version 1.13.6 from 29.09.2012) version of jQuery UI Multiselect downloaded from github.

UPDATED 2: The answer contains beforeClear callback of filterToolbar which is required in case of usage "Refresh" button. The answer contains the updated demo which uses jqGrid 4.6.0.