jquery Installation

jqGrid

 Installation

First you need to download the jQuery JavaScript library. This library can be downloaded from www.jquery.com. Please download the latest stable version of jQuery library and not a development version.You need to download the jqGrid plugin.
Create a directory on your web server, so that you can access it: http://myserver/mydir/, where mydir is the name that you have created.
Place the jQuery library in that directory; unpack the jqGrid.zip in the same directory. You should have this directory structure:

• jquery.js
  
• jquery.jqGrid.js
  
• js
  
  • grid.base.js
    
  • grid.celledit.js
    
  • grid.common.js
    
  • grid.custom.js
    
  • grid.formedit.js
    
  • grid.inlinedit.js
    
  • grid.locale-en.js
    
  • grid.postext.js
    
  • grid.setcolumns.js
    
  • grid.subgrid.js
    
  • grid.tbltogrid.js
    
  • grid.treegrid.js
    
  • jqDnR.js
    
  • jqModal.js
    
  • jquery.tablednd.js
    
  • jquery.fmatter.js
    
  • json2.js
    
  • JsonXml.js
    
  • min
    
    • grid.base-min.js
      
    • grid.celledit-min.js
      
    • grid.common-min.js
      
    • grid.custom-min.js
      
    • grid.formedit-min.js
      
    • grid.inlinedit-min.js
      
    • grid.locale-en-min.js
      
    • grid.postext-min.js
      
    • grid.setcolumns-min.js
      
    • grid.subgrid-min.js
      
    • grid.tbltogrid-min.js
      
    • grid.treegrid-min.js
      
    • jquery.fmatter-min.js
      
    • json2-min.js
      
    • JsonXml-min.js
      
  • packed
    
  • packall
    
• themes
  • basic (a folder containing several files related to this theme)
    
  • coffee (another folder with theme files)
    
  • green (jqGrid comes with the five themes shown here)
    
  • sand (you can easily add your own)
    
  • steel
    
  • jqModal.css
    
  
  

where:

• jquery.js is the jQuery library,
  
• jquery.jqGrid.js is the main module for including different plugins depending on your needs.
  
• grid.base.js is the main plugin. Without this plugin, all other plugins are unusable.
  
• grid.celledit.js a plugin used if you want to have cell editing
  
• grid.common.js a required module containing code common to many areas of jqGrid
  
• grid.custom.js a plugin used if you want to use advanced grid methods
  
• grid.formedit.js a plugin used for form editing, including adding and deleting data.
  
• grid.inlinedit.js a plugin used if you want to have inline editing
  
• grid.locale-en.js a plugin used if you want to dynamically change the language.
  
• grid.postext.js a plugin (available separately) used to manipulate the post data array
  
• grid.setcolumns.js a plugin used if you want to allow users to choose which columns to show or hide
  
• grid.subgrid.js a plugin used if you want to use subgrids
  
• grid.tbltogrid.js a plugin used if you want to convert html tables to a jqGrid
  
• grid.treegrid.js a plugin used if you want to use a tree grid
  
• jqModal.js a plugin used for form editing (modal dialogs)
  
• jqDnR.js a plugin used for form editing (drag and resize)
  
• jqQuery.TableDnD.js a plugin used for rearranging rows (drag and drop) in the grid
  
• grid.import.js a plugin used for importing and exporting grid configuration
  
• json2.js json utilities used in import/export module
  
• JsonXml.js xmljson utilities used in import/export module
  
• min the directory/folder containing the minified versions of the javascript files, suitable for production
• packed the directory/folder containing all the modules in packed variant (named the same as those in js), suitable for production use.
  
• packall the directory/folder containing a single file, grid.pack.js, which contains the entire suite of jqGrid files without any language file, suitable for production use.
  
• themes the directory/folder containing the different styles for the grid.
  

If you want to use all of the features of jqGrid you do not need to do anything more.
If you want to use only some of the features or only the basic functions of jqGrid, you may want to edit the jquery.jqGrid.js file and remove the files you will not be using. This file must also be edited if you place the javascript files in other locations than those specified above. This file is simple and can be easily configured.

// we make it simple as possible
function jqGridInclude()
{
    var pathtojsfiles = "js/"; // need to be ajusted
    // if you do not want some module to be included
    // set include to false.
    // by default all modules are included.
    var minver = false;
    var modules = [
        { include: true, incfile:'grid.locale-en.js',minfile: 'min/grid.locale-en-min.js'}, // jqGrid translation
        { include: true, incfile:'grid.base.js',minfile: 'min/grid.base-min.js'}, // jqGrid base
        { include: true, incfile:'grid.common.js',minfile: 'min/grid.common-min.js' }, // jqGrid common for editing
        { include: true, incfile:'grid.formedit.js',minfile: 'min/grid.formedit-min.js' }, // jqGrid Form editing
        { include: true, incfile:'grid.inlinedit.js',minfile: 'min/grid.inlinedit-min.js' }, // jqGrid inline editing
        { include: true, incfile:'grid.celledit.js',minfile: 'min/grid.celledit-min.js' }, // jqGrid cell editing
        { include: true, incfile:'grid.subgrid.js',minfile: 'min/grid.subgrid-min.js'}, //jqGrid subgrid
        { include: true, incfile:'grid.treegrid.js',minfile: 'min/grid.treegrid-min.js'}, //jqGrid treegrid
        { include: true, incfile:'grid.custom.js',minfile: 'min/grid.custom-min.js'}, //jqGrid custom 
        { include: true, incfile:'grid.postext.js',minfile: 'min/grid.postext-min.js'}, //jqGrid postext
        { include: true, incfile:'grid.tbltogrid.js',minfile: 'min/grid.tbltogrid-min.js'}, //jqGrid table to grid function
        { include: true, incfile:'grid.setcolumns.js',minfile: 'min/grid.setcolumns-min.js'} //jqGrid hide/show columns function
        { include: true, incfile:'grid.import.js',minfile: 'min/grid.import-min.js'}, //jqGrid import
        { include: true, incfile:'jquery.fmatter.js',minfile: 'min/jquery.fmatter-min.js'}, //jqGrid formatter
        { include: true, incfile:'json2.js',minfile: 'min/json2-min.js'}, //json utils
        { include: true, incfile:'JsonXml.js',minfile: 'min/JsonXml-min.js'} //xmljson utils
    ];
    for(var i=0;i<modules.length; i++)
    {
        if(modules[i].include === true) {
           if (minver !== true) IncludeJavaScript(pathtojsfiles+modules[i].incfile,CallMe);
           else IncludeJavaScript(pathtojsfiles+modules[i].minfile,CallMe);
        }
    }
    function IncludeJavaScript(jsFile,oCallback)
    {      
        var oHead = document.getElementsByTagName('head')[0];
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = jsFile;
        oHead.appendChild(oScript);        
    }
}

jqGridInclude();

If you have a different path to javascript files you must change the value of the variable pathtojsfiles appropriately. This path is relative to your application (or the server application), not to jquery.jqGrid.js; so if your path to jquery.jqGrid.js is "..scripts\", this will need to be "..\scripts\js\".
If you want to exclude some modules you simply change the value of the associated include from true to false, in the modules array.
If you plan to use the form editing module you should include jqModal.js, jqDnR.js and jqModal.css files in your html page.

Using Packed Versions

If we want to use the packed variant we need only to change the variable pathtojsfiles to point to this folder. If the original pathtojsfiles is "js/", then for the packed version we change pathtojsfiles to"js/packed/".To use grid.pack.js in packall, we need first to load the appropriate language file and after that this file. Or more simply, we can set the include property in the loader to false and add new two lines for the language and the packed version.

---

  Last Updated: 5/25/2011 | © Sriseshaa.com - a jQuery Plugin, 2011