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:options [2012/05/24 14:17]
varunvats
wiki:options [2018/02/02 20:50]
admin
Line 1: Line 1:
 ~~DISCUSSION~~ ~~DISCUSSION~~
-~~ODT~~ 
 ====== Options ====== ====== Options ======
  
Line 50: Line 49:
 |data|array|An array that stores the local data passed to the grid. You can directly point to this variable in case you want to load an array data. It can replace the ''​addRowData''​ method which is slow on relative big data| empty array| Yes| |data|array|An array that stores the local data passed to the grid. You can directly point to this variable in case you want to load an array data. It can replace the ''​addRowData''​ method which is slow on relative big data| empty array| Yes|
 |datastr|string|The string of data when datatype parameter is set to [[wiki:​retrieving_data#​xml_string | xmlstring]] or [[wiki:​retrieving_data#​json_string | jsonstring]]|null|Yes| |datastr|string|The string of data when datatype parameter is set to [[wiki:​retrieving_data#​xml_string | xmlstring]] or [[wiki:​retrieving_data#​json_string | jsonstring]]|null|Yes|
-|datatype|string|Defines in what format to expect the data that fills the grid. Valid options are ''​xml''​ (we expect data in xml format), ''​xmlstring''​ (we expect xml data as string), ''​json''​ (we expect data in JSON format), ''​jsonstring''​ (we expect JSON data as a string), ''​local''​ (we expect data defined at client side (array data)), ''​javascript''​ (we expect javascript as data), ''​function''​ (custom defined function for retrieving data). See [[wiki:​colmodel_options | colModel API]] and [[wiki:​retrieving_data| Retrieving Data]]|xml| Yes| +|datatype|string|Defines in what format to expect the data that fills the grid. Valid options are ''​xml''​ (we expect data in xml format), ''​xmlstring''​ (we expect xml data as string), ''​json''​ (we expect data in JSON format), ''​jsonstring''​ (we expect JSON data as a string), ''​local''​ (we expect data defined at client side (array data)), ''​javascript''​ (we expect javascript as data), ''​function''​ (custom defined function for retrieving data), or ''​clientSide''​ to manually load data via the ''​data''​ array. See [[wiki:​colmodel_options | colModel API]] and [[wiki:​retrieving_data| Retrieving Data]]|xml| Yes| 
-|deepempty|boolean|This option should be set to ''​true''​ if an event or a plugin is attached to the table cell. The option uses jQuery empty for the the row and all its children elements. This of course has speed overhead, but prevents memory leaks|false|Yes|+|deepempty|boolean|This option should be set to ''​true''​ if an event or a plugin is attached to the table cell. The option uses jQuery empty for the the row and all its children elements. This of course has speed overhead, but prevents memory leaks. This option should be set to ''​true''​ if a sortable rows and/or columns are activated.|false|Yes|
 |deselectAfterSort|boolean|Applicable only when we use ''​datatype : local''​. Deselects currently selected row(s) when a sort is applied.|true| Yes| |deselectAfterSort|boolean|Applicable only when we use ''​datatype : local''​. Deselects currently selected row(s) when a sort is applied.|true| Yes|
 |direction|string|Determines the direction of text in the grid. The default is ''​ltr''​ (Left To Right). When set to ''​rtl'' ​ (Right To Left) the grid automatically changes the direction of the text. It is important to note that in one page we can have two (or more) grids where the one can have direction ''​ltr''​ while the other can have direction ''​rtl''​. This option works only in Firefox 3.x versions and Internet Explorer versions >=6. Currently Safari, Google Chrome and Opera do not completely support changing the direction to ''​rtl''​. The most common problem in Firefox is that the default settings of the browser do not support ''​rtl''​. In order change this see this [[wiki:​howto_grid_base |HOW TO]] section in this chapter .|ltr|No| ​ |direction|string|Determines the direction of text in the grid. The default is ''​ltr''​ (Left To Right). When set to ''​rtl'' ​ (Right To Left) the grid automatically changes the direction of the text. It is important to note that in one page we can have two (or more) grids where the one can have direction ''​ltr''​ while the other can have direction ''​rtl''​. This option works only in Firefox 3.x versions and Internet Explorer versions >=6. Currently Safari, Google Chrome and Opera do not completely support changing the direction to ''​rtl''​. The most common problem in Firefox is that the default settings of the browser do not support ''​rtl''​. In order change this see this [[wiki:​howto_grid_base |HOW TO]] section in this chapter .|ltr|No| ​
-|editurl|string|Defines the url for inline and form editing.|null|Yes|+|editurl|string|Defines the url for inline and form editing. May be set to ''​clientArray''​ to manually post data to server, see [[wiki:​inline_editing&​s[]=clientarray |Inline Editing]]. |null|Yes|
 |emptyrecords| string| The string to display when the returned (or the current) number of records in the grid is zero. This option is valid only if ''​viewrecords''​ option is set to ''​true''​.|see lang file|Yes| |emptyrecords| string| The string to display when the returned (or the current) number of records in the grid is zero. This option is valid only if ''​viewrecords''​ option is set to ''​true''​.|see lang file|Yes|
 |ExpandColClick|boolean| When ''​true'',​ the tree grid (see ''​treeGrid''​) is expanded and/or collapsed when we click anywhere on the text in the expanded column. In this case it is not necessary to click exactly on the icon. |true|No| |ExpandColClick|boolean| When ''​true'',​ the tree grid (see ''​treeGrid''​) is expanded and/or collapsed when we click anywhere on the text in the expanded column. In this case it is not necessary to click exactly on the icon. |true|No|
Line 66: Line 65:
 |height|mixed| The height of the grid. Can be set as number (in this case we mean pixels) or as percentage (only 100% is acceped) or value of ''​auto''​ is acceptable. |150|No.Method avail.| |height|mixed| The height of the grid. Can be set as number (in this case we mean pixels) or as percentage (only 100% is acceped) or value of ''​auto''​ is acceptable. |150|No.Method avail.|
 |hiddengrid|boolean| If set to ''​true''​ the grid is initially is hidden. The data is not loaded (no request is sent) and only the caption layer is shown. When the show/hide button is clicked for the first time to show grid, the request is sent to the server, the data is loaded, and grid is shown. From this point we have a regular grid. This option has effect only if the ''​caption''​ property is not empty and the ''​hidegrid''​ property (see below) is set to ''​true''​. |false| No| |hiddengrid|boolean| If set to ''​true''​ the grid is initially is hidden. The data is not loaded (no request is sent) and only the caption layer is shown. When the show/hide button is clicked for the first time to show grid, the request is sent to the server, the data is loaded, and grid is shown. From this point we have a regular grid. This option has effect only if the ''​caption''​ property is not empty and the ''​hidegrid''​ property (see below) is set to ''​true''​. |false| No|
-|hidegrid|boolean| Enables or disables the show/hide grid button, which appears on the right side of the caption layer (see [[how_it_works | How It Works]]. Takes effect only if the ''​caption''​ property is not an empty string. |true|No|+|hidegrid|boolean| Enables or disables the show/hide grid button, which appears on the right side of the caption layer (see [[how_it_works | How It Works]]). Takes effect only if the ''​caption''​ property is not an empty string. |true|No|
 |hoverrows|boolean| When set to ''​false''​ the effect of mouse hovering over the grid data rows is disabled.|true|Yes| |hoverrows|boolean| When set to ''​false''​ the effect of mouse hovering over the grid data rows is disabled.|true|Yes|
 |idPrefix|string|When set, this string is added as prefix to the id of the row when it is built. |empty|Yes| |idPrefix|string|When set, this string is added as prefix to the id of the row when it is built. |empty|Yes|
Line 72: Line 71:
 |inlineData|empty object|an array used to add content to the data posted to the server when we are in inline editing. |{}|Yes| |inlineData|empty object|an array used to add content to the data posted to the server when we are in inline editing. |{}|Yes|
 |jsonReader|array| An array which describes the structure of the expected json data. For a full description and default setting, see [[wiki:​retrieving_data#​json_data| Retrieving Data JSON Data]]| |No| |jsonReader|array| An array which describes the structure of the expected json data. For a full description and default setting, see [[wiki:​retrieving_data#​json_data| Retrieving Data JSON Data]]| |No|
-|lastpage|integer| ​Readonly property. ​Gives the total number of pages returned from the request. |0|No|+|lastpage|integer| Gives the total number of pages returned from the request. If you use a function as datatype, your_grid.setGridParam({lastpage:​ your_number}) can be used to specify the max pages in the pager. |0|No|
 |lastsort|integer| Readonly property. Gives the index of last sorted column beginning from 0. |0|No| |lastsort|integer| Readonly property. Gives the index of last sorted column beginning from 0. |0|No|
 |loadonce|boolean|If this flag is set to ''​true'',​ the grid loads the data from the server only once (using the appropriate datatype). After the first request, the datatype parameter is automatically changed to ''​local''​ and all further manipulations are done on the client side. The functions of the pager (if present) are disabled.|false|No| |loadonce|boolean|If this flag is set to ''​true'',​ the grid loads the data from the server only once (using the appropriate datatype). After the first request, the datatype parameter is automatically changed to ''​local''​ and all further manipulations are done on the client side. The functions of the pager (if present) are disabled.|false|No|
Line 82: Line 81:
 |multiselect|boolean| If this flag is set to ''​true''​ a multi selection of rows is enabled. A new column at left side containing checkboxes is added. Can be used with any datatype option. |false| No. see HOWTO| |multiselect|boolean| If this flag is set to ''​true''​ a multi selection of rows is enabled. A new column at left side containing checkboxes is added. Can be used with any datatype option. |false| No. see HOWTO|
 |multiselectWidth|integer| Determines the width of the checkbox column created when the ''​multiselect''​ option is enabled. |20|No| |multiselectWidth|integer| Determines the width of the checkbox column created when the ''​multiselect''​ option is enabled. |20|No|
 +|multiSort|boolean|If set to true enables the multisorting. The options work if the datatype is local. In case when the data is obtained from the server the //sidx// parameter contain the order clause. It is a comma separated string in format field1 asc, field2 desc ..., fieldN. Note that the last field does not not have asc or desc. It should be obtained from sord parameter \\ When the option is true the behavior is a s follow. The first click of the header field sort the field depending on the firstsortoption parameter in colModel or sortorder grid parameter. The next click sort it in reverse order. The third click removes the sorting from this field|false|Yes|
 |page|integer| Set the initial page number when we make the request.This parameter is passed to the url for use by the server routine retrieving the data. |1|Yes| |page|integer| Set the initial page number when we make the request.This parameter is passed to the url for use by the server routine retrieving the data. |1|Yes|
 |pager|mixed| Defines that we want to use a pager bar to navigate through the records. This must be a valid HTML element; in our example we gave the div the id of "​pager",​ but any name is acceptable. Note that the navigation layer (the "​pager"​ div) can be positioned anywhere you want, determined by your HTML; in our example we specified that the pager will appear after the  body layer. The valid settings can be (in the context of our example) ''​pager'',​ ''#​pager'',​ ''​jQuery('#​pager'​)''​. I recommend to use the second one - ''#​pager''​. See [[Pager]]|empty string. <​del>​Currently only one pagebar is possible.</​del>​|No| |pager|mixed| Defines that we want to use a pager bar to navigate through the records. This must be a valid HTML element; in our example we gave the div the id of "​pager",​ but any name is acceptable. Note that the navigation layer (the "​pager"​ div) can be positioned anywhere you want, determined by your HTML; in our example we specified that the pager will appear after the  body layer. The valid settings can be (in the context of our example) ''​pager'',​ ''#​pager'',​ ''​jQuery('#​pager'​)''​. I recommend to use the second one - ''#​pager''​. See [[Pager]]|empty string. <​del>​Currently only one pagebar is possible.</​del>​|No|
Line 102: Line 102:
 |savedRow|array| This is a readonly property and is used in inline and cell editing modules to store the data, before editing the row or cell. See [[Cell Editing]] and [[Inline Editing]]. |empty array|No| |savedRow|array| This is a readonly property and is used in inline and cell editing modules to store the data, before editing the row or cell. See [[Cell Editing]] and [[Inline Editing]]. |empty array|No|
 |<​del>​searchdata</​del>​|<​del>​array {}</​del>​|<​del>​This property contain the searched data in pair name:​value.</​del>​|<​del>​empty array{}</​del>​|<​del>​Yes</​del>​| |<​del>​searchdata</​del>​|<​del>​array {}</​del>​|<​del>​This property contain the searched data in pair name:​value.</​del>​|<​del>​empty array{}</​del>​|<​del>​Yes</​del>​|
-|scroll|boolean or \\ integer|Creates dynamic scrolling grids. When enabled, the pager elements are disabled and we can use the vertical scrollbar to load data. When set to ''​true''​ the grid will always hold all the items from the start through to the latest point ever visited. \\ When ''​scroll''​ is set to an integer value  (example 1), the grid will just hold the visible lines. This allow us to load the data in portions whitout caring about memory leaks. In addition to this we have an optional extension to the server protocol: ''​npage''​ (see ''​prmNames''​ array). If you set the npage option in ''​prmNames'',​ then the grid will sometimes request more than one page at a time; if not, it will just perform multiple GET requests. |false|No|+|scroll|boolean or \\ integer|Creates dynamic scrolling grids. When enabled, the pager elements are disabled and we can use the vertical scrollbar to load data. When set to ''​true''​ the grid will always hold all the items from the start through to the latest point ever visited. \\ When ''​scroll''​ is set to an integer value  (example 1), the grid will just hold the visible lines. This allow us to load the data in portions whitout caring about memory leaks. In addition to this we have an optional extension to the server protocol: ''​npage''​ (see ''​prmNames''​ array). If you set the npage option in ''​prmNames'',​ then the grid will sometimes request more than one page at a time; if not, it will just perform multiple GET requests. \\ Note that this option is not compatible when a grid parameter **height** is set to ''​auto''​ or ''​100%''​. |false|No|
 |scrollOffset|integer| Determines the width of the vertical scrollbar. Since different browsers interpret this width differently (and it is difficult to calculate it in all browsers) this can be changed. |18|No.Method avail.| |scrollOffset|integer| Determines the width of the vertical scrollbar. Since different browsers interpret this width differently (and it is difficult to calculate it in all browsers) this can be changed. |18|No.Method avail.|
 |scrollTimeout|integer \\ (milliseconds)| This controls the timeout handler when ''​scroll''​ is set to 1. |200|Yes| |scrollTimeout|integer \\ (milliseconds)| This controls the timeout handler when ''​scroll''​ is set to 1. |200|Yes|
Line 127: Line 127:
 |treeReader|array| Extends the ''​colModel''​ defined in the basic grid. The fields described here are appended to end of the ''​colModel''​ array and are hidden. This means that the data returned from the server should have values for these fields. For a full description of all valid values see [[:​wiki:​treegrid | Tree Grid]].| |No| |treeReader|array| Extends the ''​colModel''​ defined in the basic grid. The fields described here are appended to end of the ''​colModel''​ array and are hidden. This means that the data returned from the server should have values for these fields. For a full description of all valid values see [[:​wiki:​treegrid | Tree Grid]].| |No|
 |tree_root_level|numeric| Defines the level where the root element begins when treeGrid is enabled. |0|No| |tree_root_level|numeric| Defines the level where the root element begins when treeGrid is enabled. |0|No|
-|url|string| The url of the file that returns the data needed to populate the grid. |null|Yes|+|url|string| The url of the file that returns the data needed to populate the grid.  May be set to ''​clientArray''​ to manualy post data to server; see [[wiki:​inline_editing&​s[]=clientarray |Inline Editing]]. |null|Yes|
 |userData|array| This array contains custom information from the request. Can be used at any time. |empty array|No| |userData|array| This array contains custom information from the request. Can be used at any time. |empty array|No|
 |userDataOnFooter|boolean| When set to ''​true''​ we directly place the user data array ''​userData''​ in the footer. The rules are as follows: If the ''​userData''​ array contains a name which matches any name defined in ''​colModel'',​ then the value is placed in that column. If there are no such values nothing is placed. Note that if this option is used we use the current formatter options (if available) for that column.|false|Yes| |userDataOnFooter|boolean| When set to ''​true''​ we directly place the user data array ''​userData''​ in the footer. The rules are as follows: If the ''​userData''​ array contains a name which matches any name defined in ''​colModel'',​ then the value is placed in that column. If there are no such values nothing is placed. Note that if this option is used we use the current formatter options (if available) for that column.|false|Yes|
 |viewrecords|boolean| If ''​true'',​ jqGrid displays the beginning and ending record number in the grid, out of the total number of records in the query. ​ This information is shown in the pager bar (bottom right by default)in this format: "View X to Y out of Z"​. ​ If this value is ''​true'',​ there are other parameters that can be adjusted, including ''​emptyrecords''​ and ''​recordtext''​. |false|No| |viewrecords|boolean| If ''​true'',​ jqGrid displays the beginning and ending record number in the grid, out of the total number of records in the query. ​ This information is shown in the pager bar (bottom right by default)in this format: "View X to Y out of Z"​. ​ If this value is ''​true'',​ there are other parameters that can be adjusted, including ''​emptyrecords''​ and ''​recordtext''​. |false|No|
-|viewsortcols|array| The purpose of this parameter is to define a different look and behavior for the sorting icons (up/down arrows) that appear in the column headers. This parameter is an array with the following default options ''​viewsortcols : [false,'​vertical',​true]''​. The first parameter determines if sorting icons should be visible on all the columns that have the sortable property set to ''​true''​. Setting this value to ''​true''​ could be useful if you want to indicate to the user that (s)he can sort on that particular column. The default of false sets the icon to be visible only on the column on which that data has been last sorted. Setting this parameter to ''​true''​ causes all icons in all sortable columns to be visible.\\ The second parameter determines how icons should be placed - ''​vertical''​ means that the sorting arrows are one under the other. '​horizontal'​ means that the arrows should be next to one another. \\ The third parameter determines the click functionality. If set to ''​true''​ the data is sorted if the user clicks anywhere in the column'​s header, not only the icons. If set to false the data is sorted only when the sorting icons in the headers are clicked. \\ **Important:​** If you are setting the third element to false, make sure that you set the first element to ''​true''; ​else, the icons will not be visible and the user will not know where to click to be able to sort since clicking just anywhere in the header will not guarantee a sort. |[false,'​vertical',​true]|No|+|viewsortcols|array| The purpose of this parameter is to define a different look and behavior for the sorting icons (up/down arrows) that appear in the column headers. This parameter is an array with the following default options ''​viewsortcols : [false,'​vertical',​true]''​. The first parameter determines if sorting icons should be visible on all the columns that have the sortable property set to ''​true''​. Setting this value to ''​true''​ could be useful if you want to indicate to the user that (s)he can sort on that particular column. The default of false sets the icon to be visible only on the column on which that data has been last sorted. Setting this parameter to ''​true''​ causes all icons in all sortable columns to be visible.\\ The second parameter determines how icons should be placed - ''​vertical''​ means that the sorting arrows are one under the other. '​horizontal'​ means that the arrows should be next to one another. \\ The third parameter determines the click functionality. If set to ''​true''​ the data is sorted if the user clicks anywhere in the column'​s header, not only the icons. If set to false the data is sorted only when the sorting icons in the headers are clicked. \\ **Important:​** If you are setting the third element to false, make sure that you set the first element to ''​true''; ​if you don't, the icons will not be visible and the user will not know where to click to be able to sort since clicking just anywhere in the header will not guarantee a sort. |[false,'​vertical',​true]|No|
 |width|number| If this option is not set, the width of the grid is the sum of the widths of the columns defined in the colModel (in pixels). If this option is set, the initial width of each column is set according to the value of the ''​shrinkToFit''​ option. |none|No. Method avail.| |width|number| If this option is not set, the width of the grid is the sum of the widths of the columns defined in the colModel (in pixels). If this option is set, the initial width of each column is set according to the value of the ''​shrinkToFit''​ option. |none|No. Method avail.|
 |xmlReader|array| An array which describes the structure of the expected xml data. For a full description refer to [[wiki:​retrieving_data#​xml_data| Retrieving Data in XML Format]]. | |No| |xmlReader|array| An array which describes the structure of the expected xml data. For a full description refer to [[wiki:​retrieving_data#​xml_data| Retrieving Data in XML Format]]. | |No|
  
 ===== Setting Options Globally ===== ===== Setting Options Globally =====
-There are cases where you want to have some particular options to be changed (change the default value) and that this option should be a common for all your grids. This can be done using extend function of jQuery. \\+There are cases where you want to have some particular options to be changed (change the default value) and that this option should be a common for all your grids. This can be done using ''​extend'' ​function of jQuery. \\
  
-Let suppose that you want  to have a zebra like grid and want that all you grids have this options set to true. If you do not want this code to be written every time when you crate a grid here is a way to do this once (using the code from our tutorial):+Let us suppose that you want to have a zebra like grid (alternate rows have different colors) ​and want that all you grids have this options set to true. If you do not want this code to be written every time when you create ​a gridhere is a way to do it (using the code from our tutorial):
  
 <code html> <code html>
Line 145: Line 145:
 <​head>​ <​head>​
 <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ /> <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ />
 +<meta http-equiv="​X-UA-Compatible"​ content="​IE=edge"​ />
 <​title>​My First Grid</​title>​ <​title>​My First Grid</​title>​
   ​   ​
Line 163: Line 164:
  
 <script type="​text/​javascript">​ <script type="​text/​javascript">​
-// Here we set a globally ​the altRows option+// Here we set the altRows option ​globally
 jQuery.extend(jQuery.jgrid.defaults,​ { altRows:​true }); jQuery.extend(jQuery.jgrid.defaults,​ { altRows:​true });
 </​script>​ </​script>​
Line 174: Line 175:
 </​code>​ </​code>​
  
-You can add here as many as you want valid jqGrid options.+You can add as many valid jqGrid options ​as you want here.
  
 ===== How to Overwrite Global Options ===== ===== How to Overwrite Global Options =====
  
-In the previous example, we learned ​how to set common options for all grids in your application. ​  ​However, you might encounter situations where you'​d ​like to overwrite the global options for particular grid. +In the previous example, we learnt ​how to set common options for all grids in your application. However, you might encounter situations where you would like to overwrite the global options for particular grid. 
  
-To do this, you'​ll ​need to change the option in the desired grid. For example, let's say we set a global option for all rows to have alternating colors. ​ If we don't want alternating colors for a certain grid, just set altRows to false and the global option will be overwritten.+To do this, you will need to change the option in the desired grid. For example, let's say we set a global option for all rows to have alternating colors ​(the zebra grid).  If we don't want alternating colors for a certain grid, just set ''​altRows'' ​to ''​false'' ​and the global option will be overwritten.
  
 The code for this scenario can be found here: The code for this scenario can be found here:
Line 189: Line 190:
 <​head>​ <​head>​
 <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ /> <meta http-equiv="​Content-Type"​ content="​text/​html;​ charset=utf-8"​ />
 +<meta http-equiv="​X-UA-Compatible"​ content="​IE=edge"​ />
 <​title>​My First Grid</​title>​ <​title>​My First Grid</​title>​
   ​   ​
Line 207: Line 209:
  
 <script type="​text/​javascript">​ <script type="​text/​javascript">​
-// Here we set a globally ​the altRows option+// Here we set the altRows option ​globallly
 jQuery.extend(jQuery.jgrid.defaults,​ { altRows:​true }); jQuery.extend(jQuery.jgrid.defaults,​ { altRows:​true });
 </​script>​ </​script>​

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