Conventions
An instance of jqGrid is a javascript object, with properties, events and methods. Properties may be strings, numbers, arrays, boolean values or even other objects.
Calling Convention:
Java Script code
jQuery("#grid_id").jqGrid(options);
HTML
<html> .... <body> ... <table id="grid_id"></table> ... </body> <html>
Where:
- grid_id is the id of the <table> element defined separately in your html and used as the name of your grid.
- options is an array of settings in “name: value” pair format. Some of these settings are values, some are functions to be performed on their associated events. Some of these settings are optional while others are mandatory for jqGrid to work.
An example with xml data taken from the tutorial My First Grid
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#list").jqGrid({ url:'example.php', datatype: 'xml', mtype: 'GET', colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'], colModel :[ {name:'invid', index:'invid', width:55}, {name:'invdate', index:'invdate', width:90}, {name:'amount', index:'amount', width:80, align:'right'}, {name:'tax', index:'tax', width:80, align:'right'}, {name:'total', index:'total', width:80, align:'right'}, {name:'note', index:'note', width:150, sortable:false} ], pager: '#pager', rowNum:10, rowList:[10,20,30], sortname: 'invid', sortorder: 'desc', viewrecords: true, caption: 'My first grid' }); }); </script>
Another example with json data:
<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#grid").jqGrid({ url:'/jqGridModel?model=Wine', datatype: "json", mtype: 'GET', colNames:['id', 'Provider', 'Name', 'Year', 'Description', 'Type', 'Geographical Region', 'Creation Date', 'Edit Date'], colModel:[ {name:'id',index:'id', width:55, sortable:false, editable:false, editoptions:{readonly:true,size:10}}, {name:'provider',index:'provider', width:200,editable:false}, {name:'name',index:'name', width:200,editable:true}, {name:'year',index:'year', width:100,editable:true}, {name:'description',index:'description', width:300,editable:true}, {name:'type',index:'type', width:200,editable:true,edittype:'select',editoptions:{dataUrl: '/jqGridOptionData?entity=WineType'}}, {name:'geographical_region',index:'geographical_region', width:200,editable:true}, {name:'creationDate',index:'creationDate', width:100}, {name:'editDate',index:'editDate', width:100}, ], jsonReader : { repeatitems:false }, rowNum:10, rowList:[10,20,30], pager: jQuery('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", caption:"Wines", editurl:"/jqGridModel?model=Wine" }).navGrid('#gridpager'); }); </script>
<div id="jqgrid"> <table id="grid"></table> <div id="gridpager"></div> </div>
On creation of a grid you normally will set all relevant options directly, but it is possible also, to modify them later on: see Options
Events raised by the grid, which offer opportunities to perform additional actions, are described in Events.
The grid also offers several methods for getting or setting properties or data: see Methods
A key property of the grid is the column model (colModel) that defines the contents of the grid: colModel Options
Additional properties, events and methods of the basic grid, not described in this section, are used to create and manage the three special types of grids: multiselect grids, subGrids and treeGrids. Please refer to these topics for more details.
