Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:navigator [2010/02/07 09:42]
tony
wiki:navigator [2018/02/02 20:53] (current)
admin
Line 1: Line 1:
 ====== Navigator ====== ====== Navigator ======
  
-Navigator is a method ​that can add predefined actions ​like editingaddingdeleting, and searching.  ​It is also possible to add [[custom buttons]] with custom actions. +The Navigator is a user interface feature ​that allows easy accessibility to record actions such as Find or Edit.  
-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]].+The user can activate a grid action by pressing the appropriate icon button in the Navigation layer.  
 + 
 +Developers can create custom actions, or they can use any of the six predefined actions ​that come with [[http://​www.trirand.com/​jqgridwiki/​doku.php?​id=start|jqGrid]]. jqGrid provides icon button graphics for the predefined actions. 
 + 
 +The full set of predefined actions are: 
 + 
 +1) Add New Row2) Edit Selected Row3) View Selected Row, 4) Delete Selected Row, 5) Find Records, and 6) Reload Grid 
 + 
 +The image below shows these six buttons in the bottom-left. 
 + 
 +{{:​wiki:​navigator1.png|}} 
 + 
 +<note tip>The Navigation layer doesn'​t have to be located on the bottom: ​ it can be positioned inside the grid window. Also, the Navigation layer itself ​is optional and can be removed.</​note>​ 
 + 
 +<note tip> ​ * You can also add your own [[custom buttons]] with custom actions ​to the Navigation layer 
 +  * You can also change the text that appears when a user hovers over a button (see below: that text is found in the language file) 
 + * Navigator buttons can be positioned on the left, middle, or right side. </​note>​ 
 + 
 +=====How to Use:===== 
 + 
 +The Navigator is a jqGrid method. ​ It's activated and configured by extending your main grid function, as shown in the code examples below. The full list of all possible configurable parameters is listed in the table below. 
 + 
 +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 ===== ===== 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.+<note important>​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.</​note>​
  
 HTML definition HTML definition
Line 20: Line 42:
 </​code>​ </​code>​
  
-Java Script ​code+JavaScript ​code
 <code javascript>​ <code javascript>​
 <​script>​ <​script>​
Line 66: Line 88:
     * //​parameters//​ - an array of settings, defined below     * //​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]]     * prmEdit, prmAdd, prmDel, prmSearch, prmView are objects which holds the parameters and events for a particular action in [[Form editing]]
 +
 +<note tip>​Additionally to every particular module defined with prmEdit, prmAdd, prmDel, prmSearch, prmView a id parameter can be passed in order to identify the id of the button in the Navigator. If this id is not defined we use the combination of a prefix and the grid id. See below.</​note>​
 +
 +If the id of the button is not set we use the following rule: \\
 +For the add button we use "​add_"​ + the id of the grid \\
 +For the edit button we use "​edit_"​ + the id of the grid \\
 +For the delete button we use "​del_"​ + the id of the grid \\
 +For the view button we use "​view_"​ + the id of the grid \\
 +For the search button we use "​search_"​ + the id of the grid \\ 
 +For the refresh button we use "​refresh_"​ + the id of the grid \\
 +
 +The code below defines a edit button with id myedit.
 +
 +<code javascript>​
 +<​script>​
 +...
 +jQuery("#​grid_id"​).jqGrid({
 +...
 +   pager : '#​gridpager',​
 +...
 +}).navGrid('#​gridpager',​{},​ {id:'​myedit'​});​
 +...
 +</​script>​
 +</​code>​
 +
 +<note tip>If a class ui-state-disabled is added to some of these buttons we disable not only the button, but the click action too </​note>​
  
 ===== Parameters ===== ===== Parameters =====
  
-When we use the navigator ​the following options are included from the language file. +When we use the Navigator ​the following options are included from the language file.  
 + 
 +<note tip>If you want to change the text that appears when a user hovers over a button, simply replace the text in the title string in the bottom part of the code below. For example: hover text for the view button is supplied by viewtitle: "View selected row" </​note>​ 
  
 <code javascript>​ <code javascript>​
Line 128: Line 179:
  
 ^Property^Type^Description^Default((English variant))^ ^Property^Type^Description^Default((English variant))^
-|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|+|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| |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| |addtext|string| The text than can be set in the add button|empty|
Line 136: Line 187:
 |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| |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| |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|+|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| |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| |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| |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|+|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| |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| |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| |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|+|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| |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| |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|
Line 151: Line 202:
 |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| |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| |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| |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|+|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| |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| |searchtitle|string|The title that appear when we mouse over to the search button (if enabled)|Find records|
Line 159: Line 211:
 |viewtext|string| The text that can be set in the view button|empty| |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| |viewtitle|string|The title that appear when we mouse over to the view button (if enabled)|View selected row|
 +|addfunc|function|If defined replaces the build in add function. No parameters are passed to this function ​ |null|
 +|editfunc|function|If defined replaces the build in edit function. Parameter passed to this function is the id of the edited row  |null|
 +|delfunc|function|If defined replaces the build in del function. Parameter passed to this function is the id of the edited row  |null|
  
 For the particular options regarding the editing methods refer to [[Form Editing]] For the particular options regarding the editing methods refer to [[Form Editing]]

QR Code
QR Code wiki:navigator (generated for current page)