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 [2010/04/07 19:54]
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. ​ Once you've downloaded the [[:​wiki:​download |needed packages]], you can continue with the installation. ​
  
-If you are casual ​user of jqGrid, you should complete the Basic Installation below.+If you'​re ​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,​ complete the Basic Installation first, and then perform the additional steps in the Development Installation section below.+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.
  
  
Line 25: Line 25:
 Step 5: Copy all the files and directories from js directory of jqGrid package to the js directory in myproject. ​ 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 ​name for this folder).+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: After these six steps, you should have the following file & folder structure:
Line 40: 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
  
Line 50: 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 55: 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 74: Line 75:
 <​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>​ 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 JS file get loaded before the jqGrid .js file</​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. That's all! You are ready to use jqGrid.
Line 90: 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 103: 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 123: Line 125:
  
 ===== 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.  ​
  
-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:+<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. 
 + 
 +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 139: 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 156: 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 179: 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 214: 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 225: 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 235: 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 245: 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)