This is an old revision of the document!
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” pairs format. Some of these settings are values, some are functions to be performed on an event. Some of these settings are optional while others must be present for jqGrid to work.
An example with xml data taken from the tutorial (myfirstgrid.html)
<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>
Other example with json data:
<script type="text/javascript"> var gridimgpath = 'css\jquery-ui-1.7.2-cupertino\images'; 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], imgpath: gridimgpath, pager: jQuery('#gridpager'), sortname: 'name', viewrecords: true, sortorder: "asc", caption:"Wines", editurl:"/jqGridModel?model=Wine", }).navGrid('#gridpager', }) </script>
<div id="jqgrid"> <table id="grid" class="scroll" cellpadding="0" cellspacing="0"></table> <div id="gridpager" class="scroll" style="text-align:center;"></div> </div>
When the grid is created, normally several properties are set in the same statement (although these properties can be individually overridden later): 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 those topics for more details.
