jQuery("#grid_id").navGrid("#pager",{standard parameters}).navButtonAdd("#pager",{custom parameters});

The Custom parameters are

{ caption:'NewButton', buttonimg:'', onClickButton:null, position "last", title:'ToolTip' }

• caption: (string) the caption of the button, can be a empty string.
  
• buttonimg: (string) full path to valid image. If empty string, no image will be attached.
  
• 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.
  

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", buttonimg:"fullpath/row_add.gif", onClickButton: function(){ alert("Adding Row")}, position:"last"
        }).navButtonAdd('#Pager',{
          caption:"Del", buttonimg:"fullpath/row_del.gif", onClickButton: function(id){ alert("Deleting Row: "+id)}, position:"last"
         });

Example I

We want to mimic the look of form editing when in-line editing (i.e., showing buttons on the Navigation bar rather than in the toolbar or on the form), like this:

The code:

jQuery("#grid_id").navGrid('#Pager',{
        edit:false,add:false,del:false,search:false
      }).navButtonAdd('#Pager',{
        caption:"Add", buttonimg:"fullpath/row-insert-under.gif", onClickButton: function(){ 
        var datarow = {name1: value1, name2: value2', ...}; 
        var su=jQuery("#grid_id").addRowData("X",datarow,"last"); 
        if(su) { jQuery("#grid_id").setSelection('X') };   }, position:"last"
        }).navButtonAdd('#Pager',{
          caption:"Delete", buttonimg:"fullpath/row-delete.gif", onClickButton: function(){ 
          var gr = jQuery("#grid_id").getGridParam("selrow"); 
          if( gr != null ) { 
            jQuery("#grid_id").delGridRow(gr,{afterSubmit: function(xhr,postdata){ alert ('After Submit: ' + postdata); return [true]}, 
        url: 'delete.php'}); 
          } else { 
            alert("Please Select Row to delete!"); 
          }; 
         }, position:"last"
         });

Example II

This example shows uses one of the methods new to version 3.2 to synchronize the grid with a form manually defined in html. (A button on the form moves the data back again).

The code:

jQuery("#tbleditable").navGrid('#pcustbut',{edit:false,add:false,del:false})
   .navButtonAdd('#pcustbut',{caption:"Edit",
   onClickButton:function(){
      var gsr = jQuery("#custbut").getGridParam('selrow');
      if(gsr){
         jQuery("#custbut").GridToForm(gsr,"#order");
      } else {
         alert("Please select Row")
      }                     
} 
});