How do I customize header and footer in jqgrid?

Question

I place to place few buttons in header and footer in jqgrid. Is there any way I can customize it?

I did the footerData option in jqgrid on this link:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods

However I think it is different and unrelated. Let me know if I am wrong.

Thanks.

You cannot customize header and footer using jqgrind API methods. Try to customize yourself using `css`. — , Nov 12 '11 at 17:34
Probably you use wrong terminology if you read about header and footer. Look at the picture in the middle of [the page](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:how_it_works). You will see: Caption (title bar), top toolbar, top pager, column headers, searching toolbar, grid body, footer (summary) row, bottom toolbar and bottom pager. Where you want to do customization and which kind of customization you need? — Oleg, Nov 12 '11 at 18:15
@Oleg: Right. It's wrong terminology. As per terminology I want to put few buttons on navigation layer. I want to put buttons like "Buy Now" etc. — TCM, Nov 13 '11 at 04:14

score 2 · Accepted Answer · edited May 23 '17 at 12:06

To add custom button in the navigator bar you can use navButtonAdd method. It should be used after the navigator bar is created. The navigator are the part of pager which can be at the bottom of the grid, on the top of the grid or both.

If you prefer top pager you should just use toppager: true option of jqGrid. It create the div for the pager itself. The id of the toppager will be constructed from the grid id like "list" and the suffix "_toppager" (see here for details).

If you want use bottom pager you should define pager div in the HTML markup of the page, for example the empty div with the id="pager" and use pager parameter of jqGrid: pager: "#pager".

To create navigator bar in the pager you should call navGrid method. As the first (pager) parameter of navigator you should use the id of the pager where the navigator bar should be created. For example

$("#list").jqGrid('navGrid', '#list_toppager',
    {add: false, edit: false, del: false, search: false, refresh: false});

to create empty navigator (without any standard button) in the top pager or

$("#list").jqGrid('navGrid', '#pager',
    {add: false, edit: false, del: false, search: false, refresh: false});

to create empty navigator of the bottom pager with id="pager". If you want create both top and bottom pager you can use cloneToTop: true:

$("#list").jqGrid('navGrid', '#pager',
    {cloneToTop: true, add: false, edit: false, del: false, search: false, refresh: false});

If you crate navigator bar with some standard buttons you can move the buttons between top and bottom navigator bars (see here).

After having navigator bar exist you should call navButtonAdd to add button on the navigator bar specified by the pager (see here). To get the rowid of selected row inside of the onClickButton callback you should use selrow parameter of jqGrid (see here).

How do I customize header and footer in jqgrid?

1 Answers1

Linked