Adding button to jqGrid top toolbar

Question

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.

Answer 1

Enjoy:

$('#datagridnav').insertBefore('#t_datagrid'); //relocate footer to top

Answer 2

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.

Answer 3

To have the toolbar at the top of the grid with the same buttons and events as the bottom toolbar you must activate the toppager:true to the definition of the grid and add the next lines after the definition

/** Duplicating the Nav Toolbar in top **/
var toolbarClone = $('#pager_left').clone(true);
// Assuming that your grid's ID is myGrid
$('#myGrid_toppager_left').prepend(toolbarClone);

Those lines will do the trick :)

Answer 4

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 setting options for the grid) 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 jqGrid Demos (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 jqGrid footer cells "inherits" CSS from cells in the main grid I described names of some important div's which are parts of jqGrid. I wish you much success in coding.