Differences

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

--- wiki:how_to_install [2010/03/31 04:50]
preichow
+++ wiki:how_to_install [2017/12/09 14:37] (current)
admin
@@ Line 6: / Line 6: @@
 Once you've downloaded the [[:wiki:download |needed packages]], you can continue with the installation.
-If you are a casual user of jqGrid, you should complete the Basic Installation below.
+If you're a normal user of jqGrid, you should complete the Basic Installation below, which installs all the files needed to use jqGrid.
-If you are a developer and want access to the source code to find bugs and make improvements, you should perform the Development Installation.
+If you want access to the jqGrid source code to find bugs and make improvements, complete the Basic Installation first, and then perform the additional steps in the Development Installation section below.
 ===== Basic Installation =====
-  * Unpack the jqGrid and UI Theme zip files in temporary folder.
+Step 1: Unpack the jqGrid and UI Theme zip files to a temporary folder.
-  * Create a directory on your web server, so that you can access it: <code html>http://myserver/myproject/</code> where myproject is the name that you have created.
-  * Under myproject create two additional directories **js** and **css**
-  * Copy the file ui-jqgrid.css from css directory of the jqGrid package to css directory of the new created directory myproject
- <note important> Please do not use the file ui-jqgrid.css from src/css directory of the package</note>
-  * Copy all the files and directories from js directory of jqGrid package  to js directory in myproject.
-  * Copy all the files and directories from css directory of the UI Theme package to css directory in myproject. (I suppose you have downloded the ui-lightness theme)
-After these operations you should have the following structure in your server
+Step 2: Create a directory on your web server to hold the jqGrid files and folders. For example: <code html>http://myserver/myproject/</code> where //myproject// is the name that you have created.
+Step 3: Under the myproject folder, create two additional directories named **js** and **css**
+Step 4: Copy the file ui-jqgrid.css from css directory of the jqGrid package to css directory of the new created directory myproject.
+<note important> Important: Be careful you don't accidentally copy the file ui-jqgrid.css from src/css directory of the package</note>
+Step 5: Copy all the files and directories from js directory of jqGrid package to the js directory in myproject.
+Step 6: Copy all the files and directories from css directory of the UI Theme package to the css directory in myproject. (In the example below, the ui "lightness" theme is used.  If you choose a different theme, you'll have a different folder name).
+After these six steps, you should have the following file & folder structure:
   * /myproject/css/
@@ Line 34: / Line 40: @@
           * ....
       * Changes.txt
-      * jquery-1.3.2.min.js
+      * jquery-1.4.2.min.js
       * jquery.jqGrid.min.js
-Using your favorite editor create a file named myfirstgrid.html and place this file in myproject directory. Edit the file and write the following:
+Using your favorite editor, create a file named myfirstgrid.html and place the following code:
 <code html>
@@ Line 44: / Line 50: @@
 <head>
 <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>
@@ Line 49: / Line 56: @@
 <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>
+<script src="js/jquery-1.4.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>
@@ Line 59: / Line 66: @@
 </html>
 </code>
-<note important>The language JS file should be loaded before the jqGrid</note>
-That is all - You are ready to use the jqGrid.
-Since the jQuery UI Themes have different font sizes it is a good idea to reduce the font size. This can be done using the style tag in the same file.
-Finally the code can look like this
+Save this file in myproject directory.
+Code Explanation: In the code above, the first stylesheet loads the CSS code for the UI theme selected ("lightness" in this example).  The second stylesheet loads the CSS settings for jqGrid itself.
+Below the stylesheets are three javascript files: the first one is JQuery, the second is the jqGrid language localization file, (English, -en in this example), and finally the actual minimized jqGrid file.
+<note> Using DOCTYPE declaration at the beginning of the  page is recommended. Of course you can use another type depending on your needs.</note>
+<note important>In your code, it's important that the language locale JS file gets loaded before the jqGrid .js file, or else your grid might not work correctly.  If your grid loads data but doesn't have any formatting, it's a good idea to troubleshoot the .js and .css files to make sure you have the right ones, and that they're working correctly.</note>
+That's all! You are ready to use jqGrid.
+Note: There is one additional recommended adjustment:
+Since the jQuery UI Themes have different font sizes it is a good idea to reduce the font size to make everything uniform.
+This can be done by adding a style tag just below the stylesheet file references, as shown below.
+Your final code will look like this:
 <code html>
@@ Line 70: / Line 91: @@
 <head>
 <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>
@@ Line 83: / Line 105: @@
 </style>
-<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
+<script src="js/jquery-1.4.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>
@@ Line 89: / Line 111: @@
 </head>
 <body>
-...
 </body>
 </html>
 </code>
-<note>
-Using DOCTYPE declaration at the beginning of the  page is recommended. Of course you can use another type depending on your needs.
-</note>
-Now you are ready to construct your first grid
+Now you are ready to ready to learn [[:wiki:how_it_works |how it works.]]
 ===== Development Installation =====
+If you choose the development installation, your version of jqGrid will be using uncompressed source code rather than minimized production code, for easier reading.
+<note important>There are two types of development installation as of version 4.0</note>
+**Development installation after 4.x versions** \\
+This type of installation is easy. It require  only to change the file name from //jquery.jqGrid.min.js// to j//query.jqGrid.src.js//. Actually the jquery.jqGrid.src.js is one file which contain all the files in one not compressed file.
+The location of the file is in the js folder where the compressed jquery.jqGrid.min.js is.
+This type of installation can look like this:
+<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" />
+<style>
+html, body {
+    margin: 0;
+    padding: 0;
+    font-size: 75%;
+}
+</style>
+<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
+<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
+<script src="js/jquery.jqGrid.src.js" type="text/javascript"></script>
+</head>
+<body>
+</body>
+</html>
+</code>
+**Development installation prior to version 4.0.0 and in case if you download the code from GitHub**
+Also, the source code is split into a number of different files, one for each jqGrid module.  This also makes it easier to find a particular piece of code.
+Once you've copied the files and folders as described in the basic installation above, you should copy the jqGrid source files to complete the development installation.
-Having the same structure as of previous chapter copy the entire src directory form jqGrid package in js directory. The structure should look like this:
+Copy the entire src directory from the jqGrid package in js directory to the src directory within your project folder.
+After doing so, your structure should look like this:
   * /myproject/css/
@@ Line 118: / Line 190: @@
           */css/
               * ui-jqgrid.css
-              * jquery.searchFilter.css
           * grid.base.js
           * grid.celledit.js
           * grid.common.js
           * grid.custom.js
+          * grid.filter.js
           * grid.formedit.js
           * grid.import.js
           * grid.inlinedit.js
           * grid.loader.js
-          * grid.postext.js
+          * grid.jqueryui.js
-          * grid.setcolumns.js
           * grid.subgrid.js
           * grid.tbltogrid.js
@@ Line 135: / Line 206: @@
           * jqModal.js
           * jquery.fmatter.js
-          * jquery.searchFilter.js
-          * json2.js
           * JsonXml.js
-      * jquery-1.3.2.min.js
+      * jquery-1.4.2.min.js
-Open the grid.loader.js and change the pathtojsfiles variable to "js/src/". The code should look like this:
+Next, open the grid.loader.js file and change the pathtojsfiles variable to "js/src/". This will cause your version of jqGrid to use the source code version of the files rather than the minimized production files.
+The code should look like this:
 <code javascript>
@@ Line 158: / Line 229: @@
         { include: true, incfile:'grid.treegrid.js'}, //jqGrid treegrid
         { include: true, incfile:'grid.custom.js'}, //jqGrid custom
-        { include: true, incfile:'grid.postext.js'}, //jqGrid postext
         { include: true, incfile:'grid.tbltogrid.js'}, //jqGrid table to grid
-        { include: true, incfile:'grid.setcolumns.js'}, //jqGrid setcolumns
         { include: true, incfile:'grid.import.js'}, //jqGrid import
         { include: true, incfile:'jquery.fmatter.js'}, //jqGrid formater
         { include: true, incfile:'JsonXml.js'}, //xmljson utils
-        { include: true, incfile:'jquery.searchFilter.js'} // search Plugin
+        { include: true, incfile:'grid.filter.js'} // search Plugin
     ];
     var filename;
@@ Line 193: / Line 262: @@
-Then in your html file do this
+Then, in your html file, change the javascript and CSS file include paths so they match the code below:
 <code html>
@@ Line 204: / Line 273: @@
 <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="js/src/css/ui.jqgrid.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.css" />
 <style>
@@ Line 214: / Line 282: @@
 </style>
-<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
+<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="js/src/grid.loader.js" type="text/javascript"></script>
@@ Line 224: / Line 292: @@
 </code>
-That is all. You are ready to debug and improve jqGrid.
+That is all! You are ready to debug and improve jqGrid. Click [[:wiki:how_it_works|here]] to learn how jqGrid works.

Differences

Navigation

Search

Toolbox

QR Code