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:how_to_install [2009/11/28 08:07]
127.0.0.1 external edit
wiki:how_to_install [2017/12/09 14:37] (current)
admin
Line 1: Line 1:
 ~~DISCUSSION~~ ~~DISCUSSION~~
  
-====== ​Installation ​======+====== ​How to Install ​====== 
 + 
 +Installation of jqGrid is just a matter of copying the files and folders to your web server or development directory. 
 +Once you've downloaded the [[:​wiki:​download |needed packages]], you can continue with the installation.  
 + 
 +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 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.
  
-Having all the [[:​wiki:​download |needed packages]] we can continue with the installation. In this section we will describe a step by step installation procedure and how to make some little additions that will make our life easy. 
-I suppose that you have a web server installed in your machine. 
  
 ===== Basic Installation ===== ===== 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** +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. 
-  ​* ​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>​ +Step 3: Under the myproject ​folder, ​create two additional directories ​named **js** and **css** 
-  ​* ​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)+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 operations ​you should have the following structure ​in your server+After these six steps, ​you should have the following ​file & folder ​structure:
  
   * /​myproject/​css/​   * /​myproject/​css/​
Line 29: Line 40:
           * ....           * ....
       * Changes.txt       * Changes.txt
-      * jquery-1.3.2.min.js+      * jquery-1.4.2.min.js
       * jquery.jqGrid.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 editorcreate a file named myfirstgrid.html and place the following ​code:
  
 <code html> <code html>
Line 39: Line 50:
 <​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 44: Line 56:
 <link rel="​stylesheet"​ type="​text/​css"​ media="​screen"​ href="​css/​ui.jqgrid.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>​+<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/​i18n/​grid.locale-en.js"​ type="​text/​javascript"></​script>​
 <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​ <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​
Line 54: Line 66:
 </​html>​ </​html>​
 </​code>​ </​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> <code html>
Line 65: Line 91:
 <​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 78: Line 105:
 </​style>​ </​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/​i18n/​grid.locale-en.js"​ type="​text/​javascript"></​script>​
 <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​ <script src="​js/​jquery.jqGrid.min.js"​ type="​text/​javascript"></​script>​
Line 84: Line 111:
 </​head>​ </​head>​
 <​body>​ <​body>​
-...+ 
 + 
 </​body>​ </​body>​
 </​html>​ </​html>​
 </​code>​ </​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 ===== ===== 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/​   * /​myproject/​css/​
Line 113: Line 190:
           */css/           */css/
               * ui-jqgrid.css               * ui-jqgrid.css
-              * jquery.searchFilter.css 
           * grid.base.js           * grid.base.js
           * grid.celledit.js           * grid.celledit.js
           * grid.common.js           * grid.common.js
           * grid.custom.js           * grid.custom.js
 +          * grid.filter.js
           * grid.formedit.js           * grid.formedit.js
           * grid.import.js           * grid.import.js
           * grid.inlinedit.js           * grid.inlinedit.js
           * grid.loader.js           * grid.loader.js
-          * grid.postext.js +          * grid.jqueryui.js
-          * grid.setcolumns.js+
           * grid.subgrid.js           * grid.subgrid.js
           * grid.tbltogrid.js           * grid.tbltogrid.js
Line 130: Line 206:
           * jqModal.js           * jqModal.js
           * jquery.fmatter.js           * jquery.fmatter.js
-          * jquery.searchFilter.js 
-          * json2.js 
           * JsonXml.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>​ <code javascript>​
Line 153: Line 229:
         { include: true, incfile:'​grid.treegrid.js'​},​ //jqGrid treegrid         { include: true, incfile:'​grid.treegrid.js'​},​ //jqGrid treegrid
         { include: true, incfile:'​grid.custom.js'​},​ //jqGrid custom ​         { 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.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:'​grid.import.js'​},​ //jqGrid import
         { include: true, incfile:'​jquery.fmatter.js'​},​ //jqGrid formater         { include: true, incfile:'​jquery.fmatter.js'​},​ //jqGrid formater
         { include: true, incfile:'​JsonXml.js'​},​ //xmljson utils         { 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;     var filename;
Line 188: Line 262:
  
  
-Then in your html file do this+Thenin your html file, change the javascript and CSS file include paths so they match the code below:  ​
  
 <code html> <code html>
Line 199: 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="​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/​ui.jqgrid.css"​ />
-<link rel="​stylesheet"​ type="​text/​css"​ media="​screen"​ href="​js/​src/​css/​jquery.searchFilter.css"​ /> 
  
 <​style>​ <​style>​
Line 209: Line 282:
 </​style>​ </​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>​ <script src="​js/​src/​grid.loader.js"​ type="​text/​javascript"></​script>​
  
Line 219: Line 292:
 </​code>​ </​code>​
  
-That is allYou are ready to debug and improve jqGrid.+That is allYou are ready to debug and improve jqGrid. ​Click [[:​wiki:​how_it_works|here]] to learn how jqGrid works. 
 + 

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