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, complete the Basic Installation first, and then perform the additional steps in the Development Installation section below.

Basic Installation

Step 1: Unpack the jqGrid and UI Theme zip files to a temporary folder.

Step 2: Create a directory on your web server to hold the jqGrid files and folders. For example:

http://myserver/myproject/

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.

Important: Be careful you don't accidentally copy the file ui-jqgrid.css from src/css directory of the package

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/
- 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 the following code:

<!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>

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.

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

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.

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:

<!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>

Now you are ready to ready to learn how it works.

Development Installation

With the development installation, your version of jqGrid will be using uncompressed source code files rather than the minimized production files.

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/
- 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

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:

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, change the javascript and CSS file include paths so they match the code below:

<!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>