This is an old revision of the document!

Navigator

Navigator is a method that can add predefined actions like editing, adding, deleting, and searching. It is also possible to add custom button 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. For more information and details refer to Form Editing.

Definition

In order to use the navigator the Form Edit module , Common module and optionally the search and Modal modules, should be checked when you download the grid. Refer to Download section.

HTML definition

...
<body>
...
   <table id="list"></table> 
   <div id="gridpager"></div> 
...
</body>

Java Script code

<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
});
jQuery("#grid_id").navGrid('#gridpager',{parameters},prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

or in chained mode

<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{parameters}, prmEdit, prmAdd, prmDel, prmSearch, prmView);
...
</script>

Where:

grid_id - the id of the already constructed jqGrid.
gridpager - the id of the navigation bar
parameters - an array of settings, defined below
prmEdit, prmAdd, prmDel, prmSearch, prmView are objects which holds the parameters and events for a particular action in Form editing

Parameters

When we use the navigator the following options are included from the 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
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
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
search	boolean	Enables or disables the search button in the pager.When the button is clicked a searchGrid method is executed	true
searchhicon	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

For the particular options regrading the editing methods refer to Form Editing

Example:

<script>
...
jQuery("#grid_id").jqGrid({
...
   pager : '#gridpager',
...
}).navGrid('#gridpager',{view:true, del:false}, 
{}, // use default settings for edit
{}, // use default settings for add
{},  // delete instead that del:false we need this
{multipleSearch : true}, // enable the advanced searching
{closeOnEscape:true} /* allow the view dialog to be closed when user press ESC key*/
);
...
</script>

The above example enables the grid view mode form enabling closing of the modal dialog with ESC key and sets advanced searching. It also disables the delete action.

¹⁾

English variant

Discussion

Hari Popuri, 2010/09/20 18:12

Hi,

I am having trouble formatting the navGrid for over 999 records. When I get records over 999 it is displaying as ex: “View 1 - 20 of 2 150”, but I would like to show either “View 1 - 20 of 2150”. or “View 1 - 20 of 2,150”. Don't want to display blank space at thousands position. Either it should be a comma (,) or no space. How can I format this to not to show any extra space or use comma (,).

Thanks

Steve Busko, 2010/11/12 18:55

I just solved this myself yesterday. You need to edit the grid.locale-en.js (or whichever language file(s) you are using) and search for: thousandsSeparator:” ” and then simply replace the ” ” (space) with whatever delimiter you want. One last note, there are three instances of this variable, I don't know the differences between each, I just changed them all. Enjoy - Steve

Chris Mathews, 2012/08/17 01:49

Easier way to do this without having to modify any of the jqgrid distributed files is: $.jgrid.formatter.integer.thousandsSeparator='';

slam, 2010/12/20 06:15

This is the quesion what i faced.

I want to delete a item but there is no item checked.it will pop a box and shows “Warning! Please Selet Row”,there is only a close button in the top right corner but I want custom a confirm button in this box.

Can it likes info_dialog ways,just configure with “buttons : []”

Could you tell me what should i do for it.

Thanks

Steffen Mutter, 2011/01/22 22:47

How can I make use of 'editfunc': I want to display a datetimepicker in the row with the id 'spieltermin'… Unfortunalely there's no example how to get this done.

Sergey, 2011/02/03 18:00

I'm using both inline jqGrid editGridRow button onclick method and edit button in the grid. When default grid button is pressed, that is ok with afterSubmit check - it returns success. But when editGridRow method is called - there is no way to see if there was problems or not. Please clarify my delusion!

wayne, 2011/03/03 09:32

who can tell me where is the “bulid in add function”???

Paul Speranza, 2011/05/06 02:21

Is there a way to override the ajax beforeSend and complete events in the delete dialog options? Also in the other CRUD dialog options. Thanks, Paul

sue, 2011/05/06 14:14

I downloaded jqgrid4.0. I can't get pager's left and right arrow to display. Do I need to download image from somewhere else?

Diosney Sarmiento Herrera, 2011/07/05 01:56, 2011/07/05 01:59

Hi!

It could be great if there is another default action(or specific to the Add action) in navigator that clones a selected row and then send the data to the server or open an Add form with the cloned data for edition.

Regards.

saravanan, 2011/09/13 14:21

Hi is there a way to add mouseover event to add in the navigator pager button

Problem:- loadonce:true 'disables' pagination by making datatype to 'local' from 'json' if loadonce:false pagination will work fine 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 in turn makes datatype local and filteration works.

Jeremy, 2011/12/21 06:28

Hi, how can i set the actions during runtime? For example, when the no row is selected, i only wan to display the “Add”. If a row is selected, two new actions: “Edit” and “Delete” will be visible. Cheers!

Jair Muñoz Gomez, 2012/05/19 18:34

Como hago para detener la recarga en la grilla; es decir en el momento que haga clic en rcargar (refresh) salga un mensage preguntando si desea recargar si dice que no la grilla no debe recargarse

Ayuda!!!!!!

.Net Champ, 2012/07/05 12:14

Hi EveryBody,

I am new to use JQGrid, Is there anybody help me to make custom paging in jqgrid as per total no of records to display in the Grid.

suhashini, 2012/09/05 08:07

Hi,

In a add popup window for date column if i want to add js calendar to that field and how to integrate with js calendar. And even for tax column i need to show search button for tax, after clicking on search button there will be 2nd popup in that i need to show search results uses can able to select the searched value. And i need to populate that search value into tax text box. Any Idea??? Please help me. i need to implement in my project.

You could leave a comment if you were logged in.

Table of Contents

Navigator

Definition

Parameters

Discussion

Navigation

Search

Toolbox

QR Code