====== Custom Buttons ======

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

===== Definition =====

Calling Convention:
<code javascript>
<script>
...
jQuery("#grid_id").navGrid("#pager",...).navButtonAdd("#pager",{parameters});
...
</script>
</code>
or using the new API
<code javascript>
<script>
...
jQuery("#grid_id").jqGrid('navGrid',"#pager",...).jqGrid('navButtonAdd',"#pager",{parameters});
...
</script>
</code>

The default //parameters// are
<code>
{ caption:"NewButton", buttonicon:"ui-icon-newwin", onClickButton:null, position: "last", title:"", cursor: "pointer"} 
</code>
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. 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

<note>In order to use navButtonAdd method a navGrid method should be called before that as seen in the example above</note>
Multiple buttons can be added by continuing the chain.
<code javascript>
...
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"
});
...
</code>

===== Separator =====

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

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

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