Looks like the default toolbar for jqGrid is always at the bottom. Buttons like Next/Prev page and the dropdown to select the number of rows per page will always show at the bottom of the grid.
I found a way to add a custom top toolbar and push custom buttons into it.
What a really need is a way to add default functionality (like paging) to the top of the grid, instead the bottom.
Hi!
I don't understand why it's so important to have top toolbar. Do you use no paging or have to many rows in the grid, that one can not see bottom toolbar without scrolling? Or there is another reason?
There is boolean toppager parameter of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options) to create additional top pager. You can display a toolbar see toolbar parameter, but I am not sure that you use the same terminology as jqGrid. Look at demo on http://trirand.com/blog/jqgrid/jqgrid.html (expand "New in version 3.1"). Probably you mean a navigation bar?
Generally jqGrid will display HTML fragment and divide all with some predefined div elements. Navigation bar will be placed inside the div with id="pg_pager" and class="ui-pager-control". You can manipulate jqGrid with respect of jQuery for example to move this div on the other place. If you implement such movement, you should redo this every time inside gridComplete event handle (or after one other completion event are fired).
EDITED: It is easy to move an existing HTML fragment to another place with respect of jQuery('#element_to_be_moved').insertAfter('#existing_element') or jQuery('#element_to_be_moved').insertBefore('#existing_element'). In http://stackoverflow.com/questions/2683108/jqgrid-footer-cells-inherits-css-from-cells-in-the-main-grid/2697747#2697747 I described names of some important div's which are parts of jqGrid. I wish you much success in coding.
I upgraded to jqgrid 3.7.2, in hope that its toppager parameter would help. While it does put the paging controls to the top, the search button did not come along for the ride.
// assuming a jqgrid with id='the_grid'
$('#the_grid_pager_left').clone(true).insertBefore('#the_grid_toppager_center')
The above, with some minor CSS tweaking, copied the search/refresh buttons into the toppager as well, and preserved their events/behaviors.