Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision Last revision Both sides next revision | ||
|
wiki:howto_grid_base [2009/11/09 09:05] tony |
wiki:howto_grid_base [2017/12/09 14:41] admin |
||
|---|---|---|---|
| Line 3: | Line 3: | ||
| ==== Allow FireFox to work with RTL (Right To Left) languages ==== | ==== Allow FireFox to work with RTL (Right To Left) languages ==== | ||
| - | jqGrid support fully FireFox versions 3.x and Internet Explorer versions >=6. | + | jqGrid fully supports RTL in FireFox versions 3.x and Internet Explorer versions >=6 |
| The default settings in FireFox are not compatible with RTL. In order to change this: | The default settings in FireFox are not compatible with RTL. In order to change this: | ||
| - In the url bar in FireFox type about:config and confirm the alert dialog. | - In the url bar in FireFox type about:config and confirm the alert dialog. | ||
| Line 17: | Line 17: | ||
| <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 43: | Line 44: | ||
| This line should be after the language file and before the jqGrid JS file | This line should be after the language file and before the jqGrid JS file | ||
| <note>New jqGrid API is available from version 3.6 and up</note> | <note>New jqGrid API is available from version 3.6 and up</note> | ||
| - | ==== Configuring jqGrid to use build JSON.parse for browsers that support it==== | ||
| - | At the time of this writing, three major browsers already include support for native JSON parsing: IE8, Firefox 3.5, and Chrome 3. \\ | ||
| - | This should be done in the installation procedure following these steps: | ||
| - | <code html> | ||
| - | <!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" /> | ||
| - | <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> | + | ==== Client side sorting, but server side paging ==== |
| - | <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> | + | |
| - | <script type="text/javascript"> | + | |
| - | jQuery.jgrid.useJSON = true; | + | |
| - | </script> | + | |
| - | <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> | + | |
| - | </head> | + | In order to have this we should define two events in the grid - loadComplete and onPaging. Below is the code how can be this achieved |
| - | <body> | + | |
| - | ... | + | |
| - | </body> | + | |
| - | </html> | + | |
| - | </code> | + | |
| - | Note the callling of | + | |
| <code javascript> | <code javascript> | ||
| - | <script type="text/javascript"> | + | jQuery("#gridid").jqGrid({ |
| - | jQuery.jgrid.useJSON = true; | + | |
| - | </script> | + | |
| - | </code> | + | |
| - | This line should be after the language file and before the jqGrid JS file. \\ Note that this does not affect browsers that do not support this function - i.e if the broser does not support it we use eval to parse the request. | + | |
| - | <note>This option is available from version 3.6 and up</note> | + | |
| - | + | ||
| - | ==== Replace the jqGrid eval with JSON.parse when we use JSON response ==== | + | |
| - | In case if you want to use the JSON.parse provided from [[http://www.json.org/js.html |here ]] you can do the following | + | |
| - | <code html> | + | |
| - | <!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" /> | + | |
| - | + | ||
| - | <script src="js/json2.js" type="text/javascript"></script> | + | |
| - | <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"> | + | |
| - | jQuery.extend(jQuery.jgrid,{ | + | |
| - | parse:function(jsstring) { | + | |
| - | return JSON.parse(jsstring); | + | |
| - | } | + | |
| - | }); | + | |
| - | </script> | + | |
| - | + | ||
| - | </head> | + | |
| - | <body> | + | |
| ... | ... | ||
| - | </body> | + | datatype: 'json', // can be xml |
| - | </html> | + | loadComplete : function () { |
| + | jQuery("#gridid").jqGrid('setGridParam',{datatype:'local'}); | ||
| + | }, | ||
| + | onPaging : function(which_button) { | ||
| + | jQuery("#gridid").jqGrid('setGridParam',{datatype:'json'}); | ||
| + | }, | ||
| + | ... | ||
| + | }); | ||
| </code> | </code> | ||
| - | Where the json2.js is the file downloaded from link provided above | + | In order local sorting to work properly a sorttype parameter in colModel should be set |
