Click here to Skip to main content
12,948,566 members (64,488 online)
Click here to Skip to main content
Add your own
alternative version


35 bookmarked
Posted 25 May 2011

jqGrid Quick Tips

, 21 Aug 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
jqGrid quick tips
I'll use this post as a repository of quick tips so I'll be updating it on a regular basis... keep posted!

Get It!

The Blog
On StackOverflow

Licensing and Flavours

jqGrid is an open-source control registered under the GPL and MIT lincenses. Basically this means that it's FREE! and you can do quite anything with it. Read more about this here.

If you want to use the "side" versions of this control, specially wrapped and packaged for PHP, ASP.NET Webforms and ASP.NET MVC, then you have to pay for them... but trust me when I say that all you need is on the free package!!

See the price list here. You can also access the paid versions website here. The feature set is a huge list and has an awesome community on Stackoverflow that replies to your questions in no time.


1. Hide a Column

I'm putting this on here just because it's not the instinctive visible, it's called hidden!

colModel: [{ name: 'colName', hidden: true }]


1. Refresh Grid

If you need to refresh the grid from code, just call:


The tricky, and not too well documented part is if you want to refresh and select the desired page:

$("#grid1").trigger("reloadGrid", [{page:3}]);

This will refresh the grid and show it on page 3. With this, you can refresh the current page:

var currentPage = $('#grid1').getGridParam('page');
$("#grid1").trigger("reloadGrid", [{page: currentPage }]);

You can also keep the current selection:

$("#grid1").trigger("reloadGrid", [{current:true}]);

Note that both page and selection settings can be used together.


1. Add Custom Buttons to the NavBar

/* Add this line to allow advanced search using the toolbar button */
$('#grid1').navGrid('#grid1pager', { search: true, edit: true, add: true, del: true }, 
{}, {}, {}, { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true });

/* Add this line to include a separator between buttons */
$('#grid1').navSeparatorAdd("#grid1pager", { sepclass: 'ui-separator', sepcontent: '' });

/* Add this line to include custom buttons on the toolbar */
$('#grid1').jqGrid('navButtonAdd', "#grid1pager", { caption: "", buttonicon: 
"ui-icon-plusthick", onClickButton: function () { alert('Exporting!!!!!'); }, 
position: "last", title: "Export to Excel", cursor: "pointer" })


1. Show the Advanced Search Dialog from an External Button

function OpenSearchDialog() {
          'searchGrid', { multipleSearch: true, overlay: false });

2. Show the Filter Toolbar

The filter toolbar is a bar that appears right below the column captions that allow filtering by each column. To make this toolbar visible, use the following:

            { stringResult: true, searchOnEnter: false });


1. Get the ID of the Selected Row

$('#grid1').jqGrid('getGridParam', 'selrow')

2. Get the Row Data

var rowData = $("#grid1").jqGrid('getRowData', rowid);

rowid: is the id value set on the data source, NOT the index of the row. This returns an object with the column names and value like:

{name="alex", address="here and there", age=34}

so it's easy than the get a value using:

var myName =;

Be aware that the object will only have the columns configured on the colModel. Everything that may come on the datasource won't appear here. If you want to have values here that you don't want to show on the grid, you must add the column to the colModel collection and set it to hidden: true.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Switzerland Switzerland
Senior IT Consultant working in Switzerland as Senior Software Engineer.

Find more at on my blog.

You may also be interested in...

Comments and Discussions

QuestionSample Code with all Featues. Pin
sagar panwala24-Jul-13 7:13
membersagar panwala24-Jul-13 7:13 
AnswerRe: Sample Code with all Featues. Pin
AlexCode24-Jul-13 20:27
professionalAlexCode24-Jul-13 20:27 
GeneralRe: Sample Code with all Featues. Pin
sagar panwala27-Jul-13 23:10
membersagar panwala27-Jul-13 23:10 
GeneralRe: Sample Code with all Featues. Pin
AlexCode28-Jul-13 7:28
professionalAlexCode28-Jul-13 7:28 
Questionregarding data Pin
shashi kant niraj7-Jun-12 20:46
membershashi kant niraj7-Jun-12 20:46 
AnswerRe: regarding data Pin
AlexCode7-Jun-12 21:12
memberAlexCode7-Jun-12 21:12 
QuestionAbout Sample Code Pin
jayendrasinh13-Dec-11 0:31
memberjayendrasinh13-Dec-11 0:31 
AnswerRe: About Sample Code Pin
AlexCode7-Jun-12 21:17
memberAlexCode7-Jun-12 21:17 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170524.1 | Last Updated 21 Aug 2011
Article Copyright 2011 by AlexCode
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid