This is english version for this post

Why do we need new search panel for jqGrid?

jqGrid has 4 tools for a searching:

1. The search option for grid footer. You will have icon in footer grid. Then you click this icon, the search dialog will be displayed. Limitations! It has just one field for search. This field is input (text). There is common set of operators.
2. The following construction

         jQuery("#mysearch").filterGrid("#grid_id",{...})

   It make search bar in mysearch place. Limitations! Panel has static set of controls. User can not add or remove controls from panel. Each condition go to server in separate post-parameters. It is bad for server-side code. Json will be better.

3. The multipleSearch option for grid footer. It is just like point 1, but here user can add or remove any conditions in dialog. Limitations! All fields are input (text). There is common set of operators for each field.
4. The search toolbar.

         jQuery("#toolbar").jqGrid('filterToolbar', {stringResult: true});

   Limitations! All fields are input (text). All conditions use logic operator “equal”.

As you see, all search tools have limitations. I made new search tool - smartSearchPanel. It has not such limitations.

What is smartSearchPanel?

Now smartSearchPanel is panel near a grid. In this panel user can make set of conditions from grid fields. Control for each filed depends from type of column. If type of column is date, then control is datepicker (filed with calendar). If type of column is select, then control is html-select. Look at this video (mirror)

How can I make smartSearchPanel in JS code?

You need include js- and css-files of jquery and jquery ui, then include following files:
jquery.json-1.3.min.js - json library
jqgrid.smart.search.css - styles for search panel
jqgrid.smart.search.js - js for search panel

Then, please, make place for search panel:

<div id=”search-form”></div>

Then you can call search panel constructor:

testGrid.smartSearchPanel('#search-form');

Here testGrid is grid object. smartSearchPanel use colModel for define type of controls for grid columns. smartSearchPanel uses Text-control as default.
Select-control:

{label: 'Status', name:'status', index: 'status', align: 'left', width: 120,
	edittype: 'select', editoptions: {
		value: "new:New Ticket;assigned:Assigned;fixed:Done"} 
}

DatePicker:

{label: 'Date', name:'date', index:'date', width:100, 
	editable: true, formatter: 'date' }

I use formatter instead edittype because jqGrid has not edittype for datepicker. But I think I can add this type as custom. Look like it will be better than formatter.

If you need disable search for field, please, use search-option.

{ name:'id', index:'index', hidden: true, search: false }

That is all for now. Demo is here.

I plan to develop this search panel. I have large TODO-list for this. I need your comments and critic.