JQGrid Documentation on Properties and Methods

Requirements

• jqGrid plugin,
• jQuery library, version 1.1.4 or later, and
• A web browser To manipulate and represent local (static) data – i.e. array data, data stored in an xml file, or data stored in a JSON file – that’s all you need. But the primary purpose of jqGrid is to manipulate and represent dynamic data over the web, and for this you will also need
• A web server (e.g., IIS, Apache, Tomcat),
• A database back-end (e.g., Postgre SQL, Oracle, MSSQL, MySQL), and
• A server-side scripting language (e.g., PHP, ASP)

JQGrid is a component that helps you, in an easy way, to represent database information on the client side using a server-side technology. Moreover it helps you to manipulate that data back into the database.

JQGrid uses Ajax calls to retrieve the requested information and represent it to client using Java Script language.  

JQGrid constructs the representation (tabular data) described by you in what is called the Column Model.  

The constructed tabular data at the client side has:

• Caption layer
• Header layer
• Body layer
• Navigation layer

Caption layer contains common information for the represented data.

Header layer contains information about the columns: labels, width, etc.

Body layer is the data requested from the server and displayed according to the settings in the column model.

Navigation layer contains additional information from the requested data and actions for requesting little pieces of information – in the literature called paging. Note that the navigation layer can be placed not only at bottom of the grid, but anywhere on the page. The Navigation layer is also the place for adding buttons or links for editing, deleting, adding to and searching your grid data.  

First, we need to include the files required to construct the grid. This is done between the head tags in the html document.

StyleSheet grid.css  

Scripts jquery.js jquery.jqGrid.js

• The link tag loads the style sheet for jqGrid,
• The first script tag loads the jquery library,
• The second script tag loads the required jqGrid plugins,
• The third and fourth script tags load the additional modules
  required for some functions, and
• The last script tag is where we write the commands needed to construct the grid.
• Between the body tags you define where you want to place the grid.
• table tag to define grid
• div tag to define grid pager

The syntax for constructing the grid is:

jQuery('#grid_selector').jqGrid(options )

• grid_selector is the unique id of the grid table
• jqGrid is the plugin, and
• options is an array.

Let’s begin with the options array, which looks like this: (These options can appear in any order)

{ 
url:'@Url.Action(ActionName, ControllerName)', 
datatype: 'xml', mtype: 'GET', 
colNames:['Col1','Col2','Col3','Col4','Col5','Col6'], 
colModel :[ 
       {name:'Col1',index:'Col1', width:55}, 
       {name:'Col2',index:'Col2', width:90}, 
       {name:'Col3',index:'Col3', width:80, align:'right'}, 
       {name:'Col4',index:'Col4', width:80, align:'right'}, 
       {name:'Col5',index:'Col5', width:80,align:'right'}, 
       {name:'Col6',index:'Col6', width:150, sortable:false} 
          ], 
pager: jQuery('#pager'), 
rowNum:10, 
rowList:[10,20,30], 
sortname: 'id', 
sortorder: 'desc', 
viewrecords: true, 
imgpath: 'themes/basic/images', 
caption: 'My firstgrid'
}

Retrieving Data

datatype: the possible options are – ‘xml’, ‘json’,’clientSide’ or ‘local’, ‘xmlstring’, ‘jsonstring’ and ‘function (…)’

Properties

colModel

The colModel property defines the individual grid columns as an array of
properties.

Syntax:

colModel:
[ {name:’name1′, index:’index1’…}, {…}, … ]

Properties

Events

onSelectRow:
function(id){ 
if(id && id!==lastSel){ 
jQuery('#tbleditable').restoreRow(lastSel); lastSel=id; 
} 
jQuery('#tbleditable').editRow(id, true); 
},
onSortCol:
function( index, colindex, sortorder) { 
// here is the code 
}

Methods

jQuery(“#grid_id”).jqGridMethod(
parameter1,…parameterN )

• grid_id is the id of the already constructed jqGrid.
• jqGridMethod is a method applied to this jqGrid.
• parameter1,…parameterN – a list of parameters

Where a method is not designed to return a requested value, then what is returned is the jqGrid object and a set of such methods can be chained, e.g., jQuery(“#grid_id”).setGridParam({..}).hideCol(“somecol”).trigger(“reloadGrid”)

Please click here for more information on JQGrid.