Subgrids

There are times when we need to be able to easily display (or edit) records that are the children of a selected record in the parent grid. We would, of course, want to show only those records that are the children of the selected record in the grid, never the children of all records.

jqGrid offers two ways of handling child records:

a subGrid
a grid as a subGrid

SubGrids use the following properties, events and methods of the parent grid.

Properties

Property	Type	Description	Default
subGrid	boolean	If set to true this enables using a subgrid. If the subGrid is enabled a additional column at left side is added to the basic grid. This column contains a 'plus' image which indicate that the user can click on it to expand the row. By default all rows are collapsed.	false
subGridModel	array	This property, which describes the model of the subgrid, has an effect only if the subGrid property is set to true. It is an array in which we describe the column model for the subgrid data. The syntax is subGridModel : [ { name : ['name_1','name_2',...,'name_n'], width : [width_1,width_2,...,width_n] , params : [param_1,...,param_n]} ] where name: an array containing the labels of the columns of the subgrid. width: an array containing the width of the columns. This array should have the same length as in name array. params: an array in which we can add a name from main grid's colModel to pass as additional parameter to the subGridUrl.	empty array
subGridType		This option allow loading subgrid as a service. If not set, the datatype parameter of the parent grid is used. For example: jQuery("#mygrid").jqGrid({ ... subgridtype: function(rowidprm) { jQuery.ajax({ url:'url_to_the_service', data:rowidprm, dataType:"json", complete: function(jsondata,stat){ if(stat=="success") { var thegrid = jQuery("#listdt")[0]; thegrid.subGridJson(eval("("+jsondata.responseText+")"),rowidprm.id); } } }); } }); Where rowidprm is array that contains the id of the row plus other parameters as required to set subGridModel params.
subGridUrl	string	This option has effect only if subGrid option is set to true. This option points to the file from which we get the data for the subgrid. jqGrid adds the id of the row to this url as parameter. If there is a need to pass additional parameters, use the params option in subGridModel	empty string

Events

In these events,

pID is the unique id of the div element where we can put contents when subgrid is enabled,
id is the id of the row

Event	Parameters	Description
subGridBeforeExpand	pID, id	The event is raised just before expanding the grid. When set, this event should return true or false. If it returns false the subgrid row is not expanded and the subgrid is not opened.
subGridRowExpanded	pID, id	This event is raised when the subgrid is enabled and is executed when the user clicks on the plus icon of the grid. Can be used to put custom data in the subgrid.
subGridRowColapsed	pID, id	This event is raised when the user clicks on the minus icon. The event should return true or false; when the returned value is false the row can not be collapsed.

Methods

Method	Parameters	Returns	Description
expandSubgridRow	rowid	jqGrid object	dynamically expand the subgrid row with the id = rowid
collapseSubGridRow	rowid	jqGrid object	dynamically collapse the subgrid row with the id = rowid
toggleSubGridRow	rowid	jqGrid object	dynamically toggle the subgrid row with the id = rowid
subGridJson	json, sid	jqGrid object
subGridXml	xml, subid	jqGrid object