How to add filter toolbar in JQGrid ??

Add below code after / below your grid initialization:

jQuery(“#citgrid”).jqGrid(‘filterToolbar’, { stringResult: true, searchOnEnter: true, defaultSearch: ‘cn’ });
jQuery(“#citgrid”).jqGrid(‘navButtonAdd’, ‘#citgrid-pager’,{ caption: “Filter”, title: “Toggle Searching Toolbar”,
buttonicon: ‘ui-icon-pin-s’,
onClickButton: function () { jQuery(“#citgrid”)[0].toggleToolbar(); }

By this way, it will add filter button on the bottom of the grid with icon and add one row at 0th position on top of the grid…


Now let’s say , you dont want text box on top of every colm, then add following code at initialization of that column…



{ name: ‘Edit’, index: ‘Edit’, width: “40”, formatter: editFormater, align: “left”, stype: ‘Label’ }

Happy Coding… & apologize for bad format of article. let me know if someone has idea how to place proper format of article with proper indentation and all…. Thanks.


2 thoughts on “How to add filter toolbar in JQGrid ??

    1. hi,

      Try using toolbar option to place the toolbar at the top of the grid:

      toolbar: [true, “top”]

      I never tried but this is what I found from their manual forum.

      Also, thanks for visiting my blog… 🙂 Happy Coding…


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s