breaking into the unknown…

toolbar search with jqgird

Leave a comment

In my earlier post I have explained, how to implement jqgrid in rails. The detail on enabling toolbar search for jqgird is well documented here

To introduce toolbar we just need to add below script to our view file, displaying our jqgrid. See complete steps in this post. I am rewriting step 5 of that post, which needs the modification.


<table id=”unsigned_documents_list”></table>
<div id=”unsigned_documents_pager”></div>
<%= raw(unsigned_documents_jqgrid) %>


Add below lines to enable the toolbar search for the grid

<script type=”text/javascript”>

$(“#unsigned_documents_list”).jqGrid(‘filterToolbar’, { pass options available here } ); #toolbar will get attached to each column of table


An example of passing the available options is as below. note that the option can be a string, boolean or function

<script type=”text/javascript”>

function set_search(){alert(“Hi”)} # the function passed to beforeSearch option

$(“#unsigned_documents_list”).jqGrid(‘filterToolbar’, {{ searchOnEnter: true, enableClear: false, beforeSearch: set_search} }}); #see that to beforesearch I have  passed set_search function which just alert hi for demo


Note That, By deafult the above line will add toolbar search to all the column of the grid. But say you do not want search on any column say for status column, then just pass  :search => false to it in step 4 of last post

{name: ‘applied_at’, index: ‘applied_at’, width: 130) # old one

{name: ‘applied_at’, index: ‘applied_at’, width: 130, :search => false} # passing false to search will remove toolbar from the applied_at column

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s