Javascript > JQGrid with SubGrids
References
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery-1.4.4.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery-ui-1.8.7.custom.min.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jqgrid/i18n/grid.locale-en.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jqgrid/jquery.jqGrid.min.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jqgrid/grid.subgrid.js'></script>
<script type='text/javascript' src='http://webassets.guardianprotection.com/Scripts/jquery.gps.global-init.js'></script>
<link href='http://webassets.guardianprotection.com/Content/css/gps/jquery-ui-custom.css' rel='stylesheet' type='text/css' />
<link href='http://webassets.guardianprotection.com/Content/css/jqgrid/ui.jqgrid.css' rel='stylesheet' type='text/css' media='screen' />
Class auto-wire:
To take advantage of the class auto-wire in the GPS javascript library you must specify: class="jqy-table-to-subGrid"
The example below is using the displayed HTML below and only the required fields in the GPS Table To Grid functionality (title). Specifying the class only prompts the framework that the given table should be processed as a table-to-subGrid, all options are retrieved from the data property. NOTE: Some options are required and others depend on values in other options for full functionality.
One other thing to mention, the <textarea>...</textarea> tag is used to hide the Sub-Grid data from the actual grid. This is namely due to the fact that any <thead></thead> element will be applied as a header element to the parent grid. Keep in mind this is just a static simple scenario and does not include the same functionality as the raw JQGrid with row click events (Not yet anyway).
| Username | Developer Name | Random Number | Comment | SubGridInfo |
|---|---|---|---|---|
| jfarr | Jody Farr | 42 | This is a random comment! | |
| mkrisky | Mike Krisky | 62 | This is a random comment too! | |
| abeers | Andrew Beers | 1337 | If you don't like this documentation yell at him | |
| bdye | Bryan Dye | 1338 | If you don't like the way this looks... Too bad |
<table id='devGrid' class='jqy-table-to-subGrid' data='{"idColumn":"Username","title":"GPS Developers","subGrid":"true","hideColumn":"SubGridInfo"}'>
<thead>
<tr>
<th name="Username">Username</th>
<th name="Developer">Developer Name</th>
<th name="RandomNumber">Random Number</th>
<th name="Comment">Comment</th>
<th name="SubGridInfo">SubGridInfo</th>
</tr>
</thead>
<tbody>
<tr>
<td>jfarr</td>
<td>Jody Farr</td>
<td>42</td>
<td>This is a random comment!</td>
<td>
<textarea>
<table id="subGrid_jfarr" data='{"title":"Tech Skills"}'>
<thead>
<tr>
<th name="CSharp">C#</th>
<th name="JQuery">JQuery</th>
<th name="CSS">CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</textarea>
</td>
</tr>
<tr>
<td>mkrisky</td>
<td>Mike Krisky</td>
<td>62</td>
<td>This is a random comment too!</td>
<td>
<textarea>
<table id="subGrid_mkrisky" data='{"title":"Tech Skills"}'>
<thead>
<tr>
<th name="CSharp">C#</th>
<th name="JQuery">JQuery</th>
<th name="CSS">CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</textarea>
</td>
</tr>
<tr>
<td>abeers</td>
<td>Andrew Beers</td>
<td>1337</td>
<td>If you don't like this documentation yell at him</td>
<td>
<textarea>
<table id="subGrid_abeers" data='{"title":"Tech Skills"}'>
<thead>
<tr>
<th name="CSharp">C#</th>
<th name="JQuery">JQuery</th>
<th name="CSS">CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</textarea>
</td>
</tr>
<tr>
<td>bdye</td>
<td>Bryan Dye</td>
<td>1338</td>
<td>If you don't like the way this looks... Too bad</td>
<td>
<textarea>
<table id="subGrid_bdye" data='{"title":"Tech Skills"}'>
<thead>
<tr>
<th name="CSharp">C#</th>
<th name="JQuery">JQuery</th>
<th name="CSS">CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td>limited</td>
<td>yes</td>
<td>yes</td>
</tr>
</tbody>
</table>
</textarea>
</td>
</tr>
</tbody>
</table>
Data Options
- title
-
- Data Type: String
- Prerequisite(s): Required
- Description: The title for the Grid
- Values: Free Text
- idColumn
-
- Data Type: String
- Prerequisite(s): None
- Description: The name of the column element's <th></th> tag which uniquely identifies a single row.
- Values: Free Text
- altRowsEnabled
-
- Data Type: Boolean
- Prerequisite(s): None
- Description:
- Values: true | false
- altRowClass
-
- Data Type: String
- Prerequisite(s): "altRowsEnabled":"true"
- Description: The class to be applied to alternating rows
- Values: CssClassName
- hideColumn
-
- Data Type: string
- Prerequisite(s): None
- Description: The name of the column element's <th></th> tag for the column to hide
- Values: Free Text
- footerRow
-
- Data Type: Boolean
- Prerequisite(s): None
- Description: Whether or not to render a footer row with your grid
- Values: true | false
- footerData
-
- Data Type: string
- Prerequisite(s): "footerRow":"true"
- Description: The element containing the footer data
- Values: #Jquery Selector
- pager
-
- Data Type: string
- Prerequisite(s): None
- Description: A JQuery selector for the unique ID of the div to be made into the pager
- Values: #Selector
- pagerRowsView
-
- Data Type: Array of Integers (min length of 2)
- Prerequisite(s): "pager":"#selector"
- Description: An Array of Integers with a minimum length of 2, this is required when using a pager!
- Values: Array of Integers