toolbar in jqGrid?

Question

hello,

I would like to create a toolbar in jqGrid with only the buttons that usually are on the pager.

At the moment I have the following definition

$("#foroGrid").jqGrid('navGrid', '#pager',
    { add: true, addtitle: 'Add Foro',
        edit: true, edittitle: 'Edit Foro',
        del: true, deltitle: 'Delete Foro',
        refresh: true, refreshtitle: 'Refresh data',
        search: true, searchtitle: 'Show Filters', 
        addfunc: addForo, editfunc: editForo, delfunc: deleteForo },
    {}, // default settings for edit
    {}, // default settings for add
    {}, // default settings for delete
    { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
    {}
);

and I have the requirement to add other functions like "CSV Export", "PDF Export", "Print", and so on...

It turns out that the space is going to be full and I would like to move the buttons in a toolbar on the top while still having the pager with navigator and record count info on the bottom.

Is it possible to achieve this configuration with jqGrid?

Answer 1

If you want to add buttons to the top toolbar you have to do something like this:

http://blog.anupamgupta.info/2010/01/adding-buttons-in-jqgrid-toolbar/

Like I said in my previous article adding buttons to jQGrid toolbar is a bit tricky. You need to add the following code in the end of the jQGrid setup

See on above link

after you have done that you can use

$("#tableID").toolbarButtonAdd("#t_tableID",{caption:"",position:"first",title:"Refresh", align:"right", buttonicon :'ui-icon-refresh', onClickButton:function(){ $("#tableID").trigger("reloadGrid"); } });

Answer 2

Look at my this old answer. It seems to me, that it do exactly what you want.