Navigator and Buttons

Navigator is a method that can add predefined actions like editing, adding, deleting, and searching. It is also possible to add custom buttons with custom actions. The built in navigator should be applied to the pager element. In other words, the pager element should be defined. The built in navigator actions correspond to the form editing actions.

By default navigaror is disabled. To enable navigator just set the navigator variable to true

<?php
...
// Create the jqGrid instance
$grid = new jqGridRender($conn);
...
$grid->navigator = true;
$grid->renderGrid(...);
?>

With this action we enable the following actions in pager - add, edit, del, search, refresh, export to excel.
The view action is disabled.
To disable some action in navigator use setNavOptions method specifiyng the word navigator. If by example we want to disable adding of records do this

<?php
...
// Create the jqGridRender instance
$grid = new jqGridRender($conn);
...
$grid->navigator = true;
$grid->setNavOptions('navigator',array('add'=>false));
$grid->renderGrid(...);
?>

Parameters

When we use the navigator the following options are included from the language file.
Below are the defaults for the English language file.

$.jgrid = {
...
   search : {
     caption: "Search...",
     Find: "Find",
     Reset: "Reset",
     odata : ['equal', 'not equal', 'less', 'less or equal','greater','greater or equal', 'begins with','does not begin with','is in','is not in','ends with','does not end with','contains','does not contain'],
     groupOps: [ { op: "AND", text: "all" }, { op: "OR", text: "any" } ],
     matchText: " match",
     rulesText: " rules"
   },
   edit : {
     addCaption: "Add Record",
     editCaption: "Edit Record",
     bSubmit: "Submit",
     bCancel: "Cancel",
     bClose: "Close",
     saveData: "Data has been changed! Save changes?",
     bYes : "Yes",
     bNo : "No",
     bExit : "Cancel",
  },
  view : {
    caption: "View Record",
    bClose: "Close"
  },
  del : {
    caption: "Delete",
    msg: "Delete selected record(s)?",
    bSubmit: "Delete",
    bCancel: "Cancel"
  },
  nav : {
    edittext: "",
    edittitle: "Edit selected row",
    addtext:"",
    addtitle: "Add new row",
    deltext: "",
    deltitle: "Delete selected row",
    searchtext: "",
    searchtitle: "Find records",
    refreshtext: "",
    refreshtitle: "Reload Grid",
    alertcap: "Warning",
    alerttext: "Please, select row",
    viewtext: "",
    viewtitle: "View selected row"
  },
...

The options $.jgrid.edit, $.jgrid.add, $.jgrid.del and $.jgrid.search are included to tier modules if enabled.

The full list of the parameters is as follow:

Property	Type	Description	Default
add	boolean	Enables or disables the add action in the navigator. When the button is clicked a editGridRow with parameter new method is executed	true
addicon	string	Set a icon to be displayed if the add action is enabled. Note that currently only icons from UI theme images can be added	ui-icon-plus
addtext	string	The text than can be set in the add button	empty
addtitle	string	The title that appear when we mouse over to the add button (if enabled)	Add new row
alertcap	string	The header of the message that appear when we try to edit,delete or view a row without to select it	Warning
alerttext	string	The message text that appear when we try to edit,delete or view a row without to select it	Please, select row
alertwidth	integer	The width of the alert dialog	200
alertheight	integer	The height of the alert dialog	auto
alerttop	integer	The top position of the alert dialog	null
alertleft	integer	The left position of the alert dialog	null
alertzIndex	integer	The zIndex of the alert dialog	null
cloneToTop	boolean	Clones all the actions from the bottom pager to the top pager if defined. Note that the navGrid can be applied to the top pager only. The id of the top pager is a combination of grid id and “_toppager”	false
closeOnEscape	boolean	Determine if the alert dialog can be closed if the user pres ESC key	true
del	boolean	Enables or disables the delete action in the navigator. When the button is clicked a delGridRow method is executed.	true
delicon	string	Set a icon to be displayed if the delete action is enabled. Note that currently only icons from UI theme images can be used	ui-icon-trash
deltext	string	The text than can be set in the delete button	empty
deltitle	string	The title that appear when we mouse over to the delete button (if enabled)	Delete selected row
edit	boolean	Enables or disables the edit action in the navigator. When the button is clicked a editGridRow method is executed with parameter the - current selected row	true
editicon	string	Set a icon to be displayed if the edit action is enabled. Note that currently only icons from UI theme images can be used	ui-icon-pencil
edittext	string	The text than can be set in the edit button	empty
edittitle	string	The title that appear when we mouse over to the edit button (if enabled)	Edit selected row
excel	boolean	Enables/Disables export to Excel	true
position	string	Determines the position of the navigator buttons in the pager. Can be left, center and right.	left
refresh	boolean	Enables or disables the refresh button in the pager. When the button is clicked a trigger(“reloadGrid”) is executed and the search parameters are cleared	true
refreshicon	string	Set a icon to be displayed if the refresh action is enabled. Note that currently only icons from UI theme images can be used	ui-icon-refresh
refreshtext	string	The text than can be set in the refresh button	empty
refreshtitle	string	The title that appear when we mouse over to the refresh button (if enabled)	Reload Grid
refreshstate	string	Determines how the grid should be reloaded - firstpage - the grid reload the data from the first page. - current - the reloading should save the current page and current selection	firstpage
afterRefresh	function	If defined this event fire after the refresh button is clicked	null
beforeRefresh	function	If defined this event fire before the refresh button is clicked	null
search	boolean	Enables or disables the search button in the pager.When the button is clicked a searchGrid method is executed	true
searchicon	string	Set a icon to be displayed if the search action is enabled. Note that currently only icons from UI theme images can be used	ui-icon-search
searchtext	string	The text than can be set in the search button	empty
searchtitle	string	The title that appear when we mouse over to the search button (if enabled)	Find records
view	boolean	Enables or disables the view button in the pager. When the button is clicked a viewGridRow method is executed	false
viewicon	string	Set a icon to be displayed if the search action is enabled. Note that currently only icons from UI theme images can be used	ui-icon-document
viewtext	string	The text that can be set in the view button	empty
viewtitle	string	The title that appear when we mouse over to the view button (if enabled)	View selected row

Additionally to this there is a way to add a custom button in the navigator with action defined from the developer

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

The creation of custom button should be done with
callGridMethod where the seciond parameter is navButtonAdd

something like:

$grid->callGridMethod("#grid", "navButtonAdd", $buttonoptions);

where $buttonoptions is array containing the options

The default options are

Property	Type	Description	Default
caption	string	The caption of the button	New button
buttonicon	string	The ui icon name from UI theme icon set	ui-icon-newwin
onClickButton	function	Action to be performed when a button is clicked	null
position	string	(�first� or �last�) The position where the button will be added (i.e., before or after the standard buttons)	last
title	string	tooltip for the button	empty
cursor	string	Determines the cursor when we mouseover the element	pointer
id	string	if set defines the id of the button (actually the id of TD element) for future manipulation	empty