This is an old revision of the document!
Table of Contents
~~ODT~~
Options
The setup and configuration of jqGrid are controlled by setting options for the grid. Examples of configuration settings include: the height and width of the grid, type of data that should be in each column, and other similar things.
These options are set in the grid options array, and many of the options are set in name: value pairs, separated by commas. The array is given as an argument to the declaration of the jqGrid object.
The properties and options available are listed below in alphabetic order. Some have more details described and a link is provided in those circumstances.
Some properties cannot be changed after the grid is created; the last column of the table labelled Can be changed? mentions if that particular property can or cannot be changed. Also see Methods (getGridParam and setGridParam methods) for more details on this.
Also, some properties are read-only, meaning they cannot be changed. Generally these are related to server-side data fetches.
The column Can be changed? indicates whether this parameter can or can not be changed after the grid creation.
In our tutorial, we saw that jqGrid should load the appropriate language file in order to work properly. This file is used in all modules and the main purpose is to have multilingual capabilities. In this file several objects with their properties and corresponding descriptive texts are stored.
The name of the main object in jqGrid is jQuery.jgrid or in short $.jgrid. Every property is loaded in a particular method or in jqGrid itself. The properties that are loaded in jqGrid are taken from a static object $.jgrid.defaults.
The English variant of these properties looks like this:
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, ... }
In other words, the options recordtext, emptyrecords, loadtext and pgtext are loaded in the grid with these default values. See below how you can overwrite these values with only one line of code for all grids in your application.
| Property | Type | Description | Default1) | Can be changed? |
|---|---|---|---|---|
| ajaxGridOptions | object | This option allows to set global ajax settings for the grid when requesting data. Note that with this option it is possible to overwrite all current ajax settings in the grid including the error, complete and beforeSend events. | empty object | Yes |
| ajaxSelectOptions | object | This option allows to set global ajax settings for the select element when the select is obtained via dataUrl option in editoptions or searchoptions objects | empty object | Yes |
| altclass | string | The class that is used for alternate (zebra) rows. You can construct your own class and replace this value. This option is valid only if altRows options is set to true | ui-priority-secondary | Yes. Requires reload |
| altRows | boolean | Set a zebra-striped grid | false | Yes. After reload |
| autoencode | boolean | When set to true encodes (html encode) the incoming (from server) and posted data (from editing modules). By example < will be converted to < | false | Yes |
| autowidth | boolean | When set to true, the grid width is recalculated automatically to the width of the parent element. This is done only initially when the grid is created. In order to resize the grid when the parent element changes width you should apply custom code and use the setGridWidth method for this purpose | false | No |
| caption | string | Defines the Caption layer for the grid. This caption appears above the Header layer. If the string is empty the caption does not appear. | empty string | No.Method avail. |
| cellLayout | integer | This option determines the padding + border width of the cell. Usually this should not be changed, but if custom changes to td element are made in the grid css file this will need to be changed. The initial value of 5 means paddingLef⇒2+paddingRight⇒2+borderLeft⇒1=5 | 5 | No |
| cellEdit | boolean | Enables (disables) cell editing. See Cell Editing for more details | false | Yes |
| cellsubmit | string | Determines where the contents of the cell are saved: 'remote' or 'clientArray'. See Cell Editing for more details | 'remote' | Yes |
| cellurl | string | the url where the cell is to be saved. See Cell Editing for more details | null | Yes |
| cmTemplate | object | Defines a set of properties which overwrite the default values in column Model. By example if you want to make all columns not sortable, then only one propery here can be written instead of specifying it in all columns in column model | null | No |
| colModel | array | Array which describes the parameters of the columns.This is the most important part of the grid. For a full description of all valid values see colModel API. | empty array | No |
| colNames | array[] | An array in which we place the names of the columns. This is the text that appears in the head of the grid (Header layer). The names are separated with commas. Note that the number of element in this array should be equal of the number elements in the colModel array. | empty array[] | No |
| data | array | A array that store the local data passed to the grid. You can directly point to this variable in case you want to load a array data. It can replace addRowData method which is slow on relative big data | empty array | Yes |
| datastr | string | The string of data when datatype parameter is set to xmlstring or jsonstring | null | Yes |
| datatype | string | Defines what type of information to expect to represent data in the grid. Valid options are xml - we expect xml data; xmlstring - we expect xml data as string; json - we expect JSON data; jsonstring - we expect JSON data as 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 colModel API and Retrieving Data | xml | Yes |
| deepempty | boolean | This option should be set to true if a 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 have of course speed overhead, but prevent memory leaks | false | 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 language direction in grid. The default is “ltr” (Left To Right language). When set to “rtl” (Right To Left) the grid automatically do the needed. 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 work only in FireFox 3.x versions and Internet Explorer versions >=6. Currently Safai and Google Chrome does not support fully direction “rtl”. Also the same apply to Opera browsers. The most common problem in FireFox is that the default settings of the browser does not support RTL. In order change this see HOW TO section in this chapter . | ltr | No |
| editurl | string | Defines the url for inline and form editing. | null | Yes |
| emptyrecords | string | Display the information when the returned (or the current) number of records is zero. This option is valid only if viewrecords option is set to true. | see lang file | Yes |
| ExpandColClick | boolean | when true, the treeGrid is expanded and/or collapsed when we click on the text of the expanded column, not only on the image | true | No |
| ExpandColumn | string | indicates which column (name from colModel) should be used to expand the tree grid. If not set the first one is used. Valid only when treeGrid option is set to true. | null | No |
| footerrow | boolean | If set to true this will place a footer table with one row below the gird records and above the pager. The number of columns equal of these from colModel | false | No |
| forceFit | boolean | If set to true, and resizing the width of a column, the adjacent column (to the right) will resize so that the overall grid width is maintained (e.g., reducing the width of column 2 by 30px will increase the size of column 3 by 30px). In this case there is no horizontal scrolbar. Note: this option is not compatible with shrinkToFit option - i.e if shrinkToFit is set to false, forceFit is ignored. | false | No |
| gridstate | string | Determines the current state of the grid (i.e. when used with hiddengrid, hidegrid and caption options). Can have either of two states: 'visible' or 'hidden' | visible | No |
| gridview | boolean | In the previous versions of jqGrid including 3.4.X,reading a relatively big data sets (Rows >=100 ) caused speed problems. The reason for this was that as every cell was inserted into the grid we applied about 5-6 jQuery calls to it. Now this problem is resolved; we now insert the entry row at once with a jQuery append. The result is impressive - about 3-5 times faster. What will be the result if we insert all the data at once? Yes, this can be done with a help of gridview option when set to true. The result is a grid that is 5 to 10 times faster. Of course when this option is set to true we have some limitations. If set to true we can not use treeGrid, subGrid, or afterInsertRow event. If you do not use these three options in the grid you can set this option to true and enjoy the speed. | false | Yes |
| grouping | boolean | Enables grouping in grid. Please refer grouping page. | false | Yes |
| headertitles | boolean | If the option is set to true the title attribute is added to the column headers | false | No |
| 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 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 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. Takes effect only if the caption property is not an empty string. | true | No |
| hoverrows | boolean | When set to false the mouse hovering is disabled in the grid data rows. | true | Yes |
| idPrefix | string | When set this string is added as prefix to the id of the row when it is build | empty | Yes |
| ignoreCase | boolean | By default the local searching is case sensitive. To make the local search and sorting not case sensitive set this options to true | false | 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 | Array which describes the structure of the expected json data. For a full description and default setting, see Retrieving Data JSON Data | No | |
| lastpage | integer | Readonly property. Determines the total number of pages returned from the request. | 0 | No |
| lastsort | integer | Readonly property. Determines 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 |
| loadtext | string | The text which appear when requesting and sorting data. This parameter is located in language file | Loading… | No |
| loadui | string | This option controls what to do when an ajax operation is in progress. disable - disables the jqGrid progress indicator. This way you can use your own indicator. enable (default) - enables “Loading” message in the center of the grid. block - enables the “Loading” message and blocks all actions in the grid until the ajax request is finished. Note that this disables paging, sorting and all actions on toolbar, if any. | enable | Yes |
| mtype | string | Defines the type of request to make (“POST” or “GET”) | GET | Yes |
| multikey | string | This parameter have sense only multiselect option is set to true. Defines the key which will be pressed when we make multiselection. The possible values are: shiftKey - the user should press Shift Key altKey - the user should press Alt Key ctrlKey - the user should press Ctrl Key | empty string | Yes |
| multiboxonly | boolean | This option works only when multiselect = true. When multiselect is set to true, clicking anywhere on a row selects that row; when multiboxonly is also set to true, the multiselection is done only when the checkbox is clicked (Yahoo style). Clicking in any other row (suppose the checkbox is not clicked) deselects all rows and the current row is selected. | false | Yes |
| multiselect | boolean | If this flag is set to true a multi selection of rows is enabled. A new column at left side is added. Can be used with any datatype option. | false | No. see HOWTO |
| multiselectWidth | integer | Determines the width of the multiselect column if multiselect is set to true. | 20 | No |
| page | integer | Set the initial number of page 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 Table Body layer. The valid calls can be (using our example) 'pager', '#pager', jQuery('#pager'). I recommend to use the second one. See Pager | empty string. Currently only one pagebar is possible. | No |
| pagerpos | string | Determines the position of the pager in the grid. By default the pager element when created is divided in 3 parts (one part for pager, one part for navigator buttons and one part for record information) | center | No |
| pgbuttons | boolean | Determines if the Pager buttons should be shown if pager is available. Also valid only if pager is set correctly. The buttons are placed in the pager bar. | true | No |
| pginput | boolean | Determines if the input box, where the user can change the number of requested page, should be available. The input box appear in the pager bar. | true | No |
| pgtext | string | Show information about current page status. The first value is the current loaded page. The second value is the total number of pages | See lang file | Yes |
| prmNames | array | Default values prmNames: {page:“page”,rows:“rows”, sort: “sidx”, order: “sord”, search:“_search”, nd:“nd”, id:“id”, oper:“oper”, editoper:“edit”, addoper:“add”, deloper:“del”, subgridid:“id”, npage: null, totalrows:“totalrows”} Customizes names of the fields sent to the server on a Post. For example, with this setting, you can change the sort order element from “sidx” to “mysort”: prmNames: {sort: “mysort”}. The string that will be posted to the server will then be myurl.php?page=1&rows=10&mysort=myindex&sord=asc rather than myurl.php?page=1&rows=10&sidx=myindex&sord=asc When some parameter is set to null they will be not sent to the server. By example if we set prmNames: { nd:null} the nd parameter will not be sent. For npage option see scroll option. The options mean the following page - the the requested page - default value page, rows - the number of rows requested - default value rows, sort - the sorting column - default value sidx, order - the sort order default value sord, search - the search indicator - default value _search, nd - the time passed to the request (for IE browsers not to cache the request) - default value nd, id - the name of the id when post data in editing modules - default value id, oper - the operation parameter - default value oper, editoper - the name of operation when the data is posted in edit mode - default value edit, addoper - the name of operation when the data is posted in add mode - default value add, deloper - the name of operation when the data is posted in delete mode - default value del totalrows - the name of the total rows to be obtained from server - see rowTotal - default value totalrows subgridid - the name passed when we click to load data in subgrid - default value id | none | Yes |
| postData | array | This array is passed directly to the url. This is associative array and can be used this way: {name1:value1…}. See API methods for manipulation. | empty array | Yes |
| reccount | integer | Readonly property. Determines the exactly number of rows in the grid. Do not mix this with records parameter. Instead that in most cases they are equal there is a case where this is not true. By example you define rowNum parameter 15, but you return from server records parameter = 20, then the records parameter will be 20, the reccount parameter will be 15, and in the grid you will have 15 records. | 0 | No |
| recordpos | string | Determines the position of the record information in the pager. Can be left, center, right | right | No |
| records | integer | Readonly property. Determines the number of returned records in grid from the request | none | No |
| recordtext | string | Represent information that can be shown in the pager. Also this option is valid if viewrecords option is set to true. This text appears only if the total number of records is greater then zero.In order to show or hide some information the items in {} mean the following: {0} the start position of the records depending on page number and number of requested records; {1} - the end position {2} - total records returned from the data | see lang file | Yes |
| resizeclass | string | Assigns a class to columns that are resizable so that we can show a resize handle only for ones that are resizable | empty string | No |
| rowList | array[] | An array to construct a select box element in the pager in which we can change the number of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter that is passed to the url. If the array is empty the element does not appear in the pager. Typically you can set this like [10,20,30]. If the rowNum parameter is set to 30 then the selected value in the select box is 30. | empty array - [] | No |
| rownumbers | boolean | If this option is set to true, a new column at left of the grid is added. The purpose of this column is to count the number of available rows, beginning from 1. In this case colModel is extended automatically with new element with name - 'rn'. Also, be careful not to use the name 'rn' in colModel | false | No |
| rowNum | integer | Sets how many records we want to view in the grid. This parameter is passed to the url for use by the server routine retrieving the data. Note that if you set this parameter to 10 (i.e. retrieve 10 records) and your server return 15 then only 10 records will be loaded. | 20 | Yes |
| rowTotal | integer | When set this parameter can instruct the server to load the total number of rows needed to work on. Note that rowNum determines the total records displayed in the grid, while rowTotal determines the total number of rows on which we can operate. When this parameter is set, we send an additional parameter to the server named totalrows. You can check for this parameter, and if it is available you can replace the rows parameter with this one. Mostly this parameter can be combined with loadonce parameter set to true. | null | Yes |
| rownumWidth | integer | Determines the width of the row number column if rownumbers option is set to true. | 25 | No |
| savedRow | array | This is read only 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 |
| 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 a value (eg 1), the grid will just hold the visible lines. This allow us to load the data in portions whitout caring about the 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 gets. | 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. |
| scrollTimeout | integer (milliseconds) | This controls the timeout handler when scroll is set to 1. | 200 | Yes |
| scrollrows | boolean | When enabled, selecting a row with setSelection scrolls the grid so that the selected row is visible. This is especially useful when we have a verticall scrolling grid and we use form editing with navigation buttons (next or previous row). On navigating to a hidden row, the grid scrolls so that the selected row becomes visible. | false | Yes |
| selarrrow | array-[] | This options is read only. Gives the currently selected rows when multiselect is set to true. This is one dimensional array and the values in the array correspond to the selected id's in the grid. | empty array [] | No |
| selrow | string | This option is read only. Contain the id of the last selected row. If you sort or apply a pagging this options is set to null | null | No |
| shrinkToFit | boolean or integer | This option, if set, defines how the the width of the columns of the grid should be re-calculated, taking into consideration the width of the grid. If this value is true, and the width of the columns is also set, then every column is scaled in proportion to its width. For example, if we define two columns with widths 80 and 120 pixels, but want the grid to have a width of 300 pixels, then the extra width assigned to the columns depends on the width of the column itself and the extra width available. The re-calculation is done as follows: the first column gets the width (300(new width)/200(sum of all width))*80(first column width) = 120 pixels, and the second column gets the width (300(new width)/200(sum of all width))*120(second column width) = 180 pixels. Now the widths of the columns sum up to 300 pixels, which is the width of the grid. If the value is false and the value in width option is set, then the widths of the columns are not re-calculated (they retain the widths specified in the width option in colModel) and the width of the remains unchanged. So in the example that we saw, if shrinkToFit is set to false, column one will have a width of 80 pixels, column two will have a width of 120 pixels and the grid will retain the width of 300 pixels. If the value of shrinkToFit is an integer, the width is calculated according to it. | true | No |
| sortable | boolean | When set to true, this option allows reordering columns by dragging and dropping them with the mouse. Since this option uses the jQuery UI sortable widget, be a sure to load this widget and its related files in HTML head tag of the page. Also, be sure to select the jQuery UI Addons option under the jQuery UI Addon Methods section while downloading jqGrid if you want to use this facility. | false | No |
| sortname | string | The column according to which the data is to be sorted when it is initially loaded from the server (note that you will have to use datatypes xml or json to load remote data). This parameter is appended to the url. If this value is set and the index (name) matches the name from colModel, then an icon indicating that the grid is sorted according to this column is added to the column. Also, this icon indicates the sorting order - descending or ascending (see the parameter sortorder below). Also see prmNames. | empty string | Yes |
| sortorder | string | The initial sorting order (ascending or descending) when we fetch data from the server using datatypes xml or json. This parameter is appended to the url - see prnNames. Two possible values - asc or desc. | asc | Yes |
| subGrid | boolean | If set to true this enables using a subgrid. If the subGrid is enabled, an additional column at left side is added to the basic grid. This column contains a 'plus' image which indicate that the user can click on it to expand the row. By default all rows are collapsed. See Subgrid | false | No |
| subGridOptions | object | A set of additional options for the subgrid. For more information and default values see Subgrid. | see Subgrid | Yes |
| subGridModel | array-[] | This property, which describes the model of the subgrid, has an effect only if the subGrid property is set to true. It is an array in which we describe the column model for the subgrid data. For more info see Subgrid. | empty array | No |
| subGridType | mixed | This option allows loading subgrid as a service. If not set, the datatype parameter of the parent grid is used. | null | Yes |
| subGridUrl | string | This option has effect only if subGrid option is set to true. This option points to the url from which we get the data for the subgrid. jqGrid adds the id of the row to this url as parameter. If there is a need to pass additional parameters, use the params option in subGridModel. See Subgrid | empty string | Yes |
| subGridWidth | integer | Defines the width of the subGrid column if subgrid is enabled. | 20 | No |
| toolbar | array | This option defines the toolbar of the grid. This is an array with two elements in which the first element's value enables the toolbar and the second defines the position relative to the body layer (table data). Possible values are “top”, “bottom”, and “both”. When we set it like toolbar: [true,“both”] two toolbars are created – one on the top of table data and the other at the bottom of the table data. When we have two toolbars, then we create two elements (div). The id of the top bar is constructed by concatenating the string “t_” and the id of the grid, like “t_” + id_of_the_grid and the id of the bottom toolbar is constructed by concatenating the string “tb_” and the id of the grid, like “tb_” + id_of_the grid. In the case where only one toolbar is created, we have the id as '“t_” + id_of_the_grid, independent of where this toolbar is located (top or bottom)|[false,] | No | |
| toppager | boolean | When enabled this option place a pager element at top of the grid, below the caption (if available). If another pager is defined both can coexists and are kept in sync. The id of the newly created pager is the combination grid_id + “_toppager”. | false | No |
| totaltime | integer | Readonly parameter. It gives the loading time of the records - currently available only when we load xml or json data. This measure begins when the request is complete and ends when the last row is added. | 0 | No |
| treedatatype | mixed | Determines the initial datatype (see datatype option). Usually this should not be changed. During the reading process this option is equal to the datatype option. | null | No |
| treeGrid | boolean | Enables (disables) the tree grid format. For more details see Tree Grid | false | No |
| treeGridModel | string | Deteremines the method used for the treeGrid. Can be either nested or adjacency. See Tree Grid | nested | No |
| treeIcons | array | This array set the icons used in the tree. The icons should be a valid names from UI theme roller images. The default values are: {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | 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 Tree Grid. | 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 (in the appropriate format) needed to populate the grid. | null | Yes |
| 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 follow: 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 |
| viewsortcols | array | The purpose of this parameter is to define a different look and behavior of sorting icons (up/down arrows) that appear in the column headers. This parameter is an array with the following default options viewsortcols : . 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 [false,'vertical',true](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 another. '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. If set to false the data is sorted only when the 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 |
| width | number | If this option is not set, the width of the grid is a 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 shrinkToFit option. | none | No. Method avail. |
| xmlReader | array | Array which describes the structure of the expected xml data. For a full description refer to Retrieving Data XML Data. | No |
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.
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):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> // Here we set a globally the altRows option jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', ...
You can add here as many as you want valid jqGrid 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.
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.
The code for this scenario can be found here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <style> html, body { margin: 0; padding: 0; font-size: 75%; } </style> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script type="text/javascript"> // Here we set a globally the altRows option jQuery.extend(jQuery.jgrid.defaults, { altRows:true }); </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', // here we do not want zebra for this grid altRows: false, ...
1)
some default properties use the English translation
Discussion
hi this is rangaiah, how to change grid position,i mean dispaly grid at 200px from top. please give me reply.
var grid = $(”#list”); grid.jqGrid({
…
…
});
$(”#gbox_list”).css(“top”, 200);
$(”#gbox_list”).css(“left”,50);
I am trying to re-word the wiki to make things more clear. Can someone confirm if div elements with the appropriate ids have to be created manually to use the toolbars, or jqGrid automatically creates them and assigns them the appropriate tags?
Thank you.
I am using jqGrid with options autowidth : true and shrinkToFit: true and not specifying width in colModel as my grid and its column are dynamic so I dont know which column to assign what width. My problem is as I cant specify width to columns I want jqGrid to shrink column width according to max length content in that column so that other column can use that space. I understand this might produce really big width for multi-line content,but I guess if there is option like max-width in colModel that will solve this issue as well.
in one line : can I have jqGrid with dynamic width columns where width will be calculated up content ?
i'm using jqgrid inside a Jquery dialog, and it's working but i cannot see the column header names?
the row values are ok ,do you know what can cause this ?
i followed all the documentation here and didn't find a clue to what it might be
This seems to work too.
$.jgrid.defaults.rowNum=100;