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

    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

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 - styles for search panel - js for search panel

Then, please, make place for search panel:

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

Then you can call search panel constructor:


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

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


{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.

Google Bookmarks Digg Reddit Ma.gnolia Technorati Slashdot Yahoo My Web БобрДобр.ru RUmarkz Ваау! МоёМесто.ru Mister Wong Rambler Закладки
Tags: ,

7 Responses to “Search panel for jqGrid”

  1.  selvi Says:

    Its Too Good,
    Is there any way to integrate with existing advanced search (in-built in jqgrid)?

  2.  Игорь Тельменко Says:

    Thank you for your comment! Please, tell me, what do you call the Advanced Search? I know 4 tools for a searching in jqgrid (look at top of this page). What tool number? Also, please, tell me, what integration do you meant? Just icon in grid footer which calls filter panel as dialog?

  3.  selvi Says:

    Advanced Search, as per your documentation it lies in 3rd tool number.
    And for the integration part, I want in 3rd tool number (advanced search) itself the following features :
    -> to select only required operations such as (’begins with’,'does not begin with’,'is in’,'is not in’,'ends with’,'does not end with’,'contains’,'does not contain’) for particular fields only.
    -> to add date picker to the value, if the type is date.
    -> to add boolean options to the value, if the configuration is boolean.

    The solution which you have given exactly matches my requirements. But I don’t know how to integrate with 3rd tool (advanced search).


  4.  Игорь Тельменко Says:

    I added dialog for search panel. You can try it here. Please, use Search link in grid footer. Thanks

  5.  Игорь Тельменко Says:

    I meant, you can use it like Advanced Search, dear selvi. Thanks for your comments!

  6.  selvi Says:

    Hi Игорь Тельменко,
    Thanks a lot, it exactly matches my requirement. You have made my task very easy.


  7.  Игорь Тельменко Says:

    Hello, friends! In April 2011 we got 4th version of jqgrid. It has new search module like smartSearchPanel. Demo is here in section named Searching (4.0) new. It is excellent!
    But I have a question. Need we smartSearchPanel still? Or new search module is better solution?


Leave a Reply

Для вставки кода используйте кнопку Код, по умолчанию используется синтаксис подсветки языка php, вы можете поменять его на любой другой поддерживаемый.