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 dem

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.