wiki:how_to_install - jqGrid Wiki

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 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 are a developer and want access to the source code to find bugs and make improvements, you should perform the Development Installation.

Basic Installation

Unpack the jqGrid and UI Theme zip files in temporary folder.
Create a directory on your web server, so that you can access it:
```
http://myserver/myproject/
```
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

Please do not use the file ui-jqgrid.css from src/css directory of the package

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

/myproject/css/
- ui.jqgrid.css
- /ui-lightness/
  - /images/
  - jquery-ui-1.7.2.custom.css
/myproject/js/
- /i18n/
  - grid.locale-bg.js
  - list of all language files
  - ….
- Changes.txt
- jquery-1.3.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:

<!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>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
 
</head>
<body>
...
</body>
</html>

The language JS file should be loaded before the jqGrid

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

<!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>
 
</head>
<body>
...
</body>
</html>

Using DOCTYPE declaration at the beginning of the page is recommended. Of course you can use another type depending on your needs.

Now you are ready to construct your first grid

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:

/myproject/css/
- ui-jqgrid.css
- /ui-lightness/
  - /images/
  - jquery-ui-1.7.2.custom.css
/myproject/js/
- /src/
  - /i18n/
    - grid.locale-bg.js
    - list of all language files
    - ….
  - /css/
    - ui-jqgrid.css
    - jquery.searchFilter.css
  - grid.base.js
  - grid.celledit.js
  - grid.common.js
  - grid.custom.js
  - grid.formedit.js
  - grid.import.js
  - grid.inlinedit.js
  - grid.loader.js
  - grid.postext.js
  - grid.setcolumns.js
  - grid.subgrid.js
  - grid.tbltogrid.js
  - grid.treegrid.js
  - jqDnR.js
  - jqModal.js
  - jquery.fmatter.js
  - jquery.searchFilter.js
  - json2.js
  - JsonXml.js
- jquery-1.3.2.min.js

Open the grid.loader.js and change the pathtojsfiles variable to “js/src/”. The code should look like this:

function jqGridInclude()
{
    var pathtojsfiles = "js/src/"; // need to be ajusted
    // set include to false if you do not want some modules to be included
    var modules = [
        { include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
        { include: true, incfile:'grid.base.js'}, // jqGrid base
        { include: true, incfile:'grid.common.js'}, // jqGrid common for editing
        { include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
        { include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
        { include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
        { include: true, incfile:'grid.subgrid.js'}, //jqGrid subgrid
        { 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
    ];
    var filename;
    for(var i=0;i<modules.length; i++)
    {
        if(modules[i].include === true) {
 
        	filename = pathtojsfiles+modules[i].incfile;
       		if(jQuery.browser.safari) {
       			jQuery.ajax({url:filename,dataType:'script', async:false, cache: true});
       		} else {
       			IncludeJavaScript(filename);
       		}
        }
    }
    function IncludeJavaScript(jsFile)
    {
        var oHead = document.getElementsByTagName('head')[0];
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.charset = 'utf-8';
        oScript.src = jsFile;
        oHead.appendChild(oScript);        
    };
};
jqGridInclude();

Then in your html file do this

<!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="js/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/src/css/jquery.searchFilter.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/src/grid.loader.js" type="text/javascript"></script>
 
</head>
<body>
...
</body>
</html>