Custom Buttons

Custom Buttons are a way to define your own button and action in the pager.


Calling Convention:


or using the new API


The default parameters are

{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"} 


  • caption: (string) the caption of the button, can be a empty string.
  • buttonicon: (string) is the ui icon name from UI theme icon set. If this option is set to “none” only the text appear.
  • onClickButton: (function) action to be performed when a button is clicked. Default null.
  • position: (“first” or “last”) the position where the button will be added (i.e., before or after the standard buttons).
  • title: (string) a tooltip for the button.
  • cursor : string (default pointer) determines the cursor when we mouseover the element
  • id : string (optional) - if set defines the id of the button (actually the id of TD element) for future manipulation

In order to use navButtonAdd method a navGrid method should be called before that as seen in the example above

Multiple buttons can be added by continuing the chain.

   onClickButton: function(){ 
     alert("Adding Row");
   onClickButton: function(){ 
      alert("Deleting Row");


It is possible to group some action adding separator. This can be done using the navSeparatorAdd method



The default separator_parameters are

{sepclass : “ui-separator”,sepcontent: ''}


  • sepclass represent the separator class defined in ui-jqgrid. You cancustomize your own class
  • sepcontent the content that can be put in the separator element


Stefan Livens, 2009/12/14 18:53

How to remove a custom button?

Sometimes it can be necessary to remove a custom button you just created in the pager. Just pass a (optional) parameter to indicate the id of this button:

    onClickButton:yourFunction,caption:"Show Full Tree" ,id:"tree_button"

Like this, it's easy to remove or manipulte this button!

Amit Kesarwani, 2010/01/19 17:54

How do I add custom icon/image? There was a parameter “buttonimg” in versions prior to 3.5 to use custom image but it is not there any more.

Jiho Han, 2010/09/02 22:02


give it an id and then upon loadComplete, change the css:

    .css({"background-image":"url('/content/excel.bmp')", "background-position":"0"});
conanca, 2010/07/03 10:23

how to change the button size?

Juan Miguel Sosso, 2010/10/19 13:38

Any way to enable/disable custom buttons depending if the user select a row?

David Smith, 2011/04/01 05:20

Is there a way to add/remove buttons, like in response to an event?

saravanan, 2011/09/13 17:11

Problem: loadonce:true disables pagination by making datatype to local from json if loadonce:false pagination will work but filteration(search) will not happen.

So is there a way to enable mouseover event on pager button. through which i can trigger the loadonce:false and reset the datatype as json. And in loadcomplete i ll set loadonce:true which n turn makes datatype local and filteration works.

amit, 2012/02/16 09:56

Helo All i a newbie to jquery- i wondered i have a jqgrid with multiselect option and i have added the nav grid to call a function when pushing the button - the problem is i can figure out how to send the jqgrid data(the checked box selected) to the function i just need to send its id

this is the line i use

$(”#TableName”).navGrid(”#Pager”,{edit:false,add:false,del:true,search:false}).navButtonAdd(”#Pager”,{caption:“Exclude”, buttonicon:“ui-icon-newwin”, onClickButton:myFunction, position: “last”, title:“test”, cursor: “pointer”});

Thank all

Boris Gurvich, 2012/02/25 06:21

If I try to specify position option to separator it throws error: Uncaught TypeError: Object #<Object> has no method 'indexOf'

This is useful if I'm adding a button as first and want to separate it from rest of buttons.

essien, 2012/11/09 03:56

when authority control,How to control the Enable or No Enabled of the custom button?

Jeffrey Lin, 2013/01/10 11:55

How to clone a custom button to the toppager?

Personal Tools