wiki:custom_buttons - jqGrid Wiki

Definition

Calling Convention:

<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
...
</script>

or using the new API

<script>
...
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
...
</script>

The default parameters are

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

where

caption: (string) the caption of the button, can be a empty string.
buttonicon: (string) is the ui icon name from UI theme icon set.
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

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.

...
jQuery("#grid_id")
.navGrid('#pager',{edit:false,add:false,del:false,search:false})
.navButtonAdd('#pager',{
   caption:"Add", 
   buttonicon:"ui-icon-add", 
   onClickButton: function(){ 
     alert("Adding Row");
   }, 
   position:"last"
})
.navButtonAdd('#pager',{
   caption:"Del", 
   buttonicon:"ui-icon-del", 
   onClickButton: function(){ 
      alert("Deleting Row");
   }, 
   position:"last"
});
...

Separator

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

Syntax:

<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters}).navSeparatorAdd("#pager",{separator_parameters}};
...
</script>

The default separator_parameters are

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

Where:

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

Discussion

Stefan Livens, 2009/12/14 16: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:

...
.jqGrid(”navButtonAdd”,”#your_pager”,{
    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 15: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 19:02, 2010/09/02 19:05

Workaround:

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

$("#export").find(".ui-icon")
    .css({"background-image":"url('/content/excel.bmp')", "background-position":"0"});

conanca, 2010/07/03 07:23, 2010/07/03 07:33

how to change the button size?

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

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

David Smith, 2011/04/01 02:20

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

saravanan, 2011/09/13 14: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 07:56, 2012/02/16 08:08

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 04: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 01:56

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

Jeffrey Lin, 2013/01/10 09:55

How to clone a custom button to the toppager?

You could leave a comment if you were logged in.