In many scenarios you will need to display more than a single child table at the same level. I.e. display multiple child tables at the same level. To accomplish this within an MVC 2 application using jqGrid you need to include the following:
[sourcecode language="html" padlinenumbers="true" autolinks="false" gutter="false" toolbar="false"] <link rel="stylesheet" type="text/css" media="screen" href="../../Content/jqgrid/jquery-ui-1.8.4.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="../../Content/jqgrid/ui.jqgrid.css" /> <script src="../../Scripts/jqgrid/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../../Scripts/jqgrid/js/i18n/grid.locale-de.js" type="text/javascript"></script> <script src="../../Scripts/jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script> [/sourcecode]
in your Views\Shared\Site.Master file as show in the below image.
Include the following:
[sourcecode language="html" autolinks="false" gutter="false" toolbar="false"] <script src="../../Scripts/jqgrid/src/grid.subgrid.js" type="text/javascript"></script> <script src="../../Scripts/jqgrid/src/grid.inlinedit.js" type="text/javascript"></script> [/sourcecode]
in your Views\Shared\Home\Index.aspx file.
It is important to understand the placement and naming of your table and div tags. Without correct placement your grids, subgrids and child subgrids within the ASP.NET file, the Index.aspx page will not render as expected. Your primary grid should be placed first on the Index.aspx page directly under the SCRIPT SRC declaration:
[sourcecode language="html" autolinks="false" gutter="false" toolbar="false"]
<table id='PrimaryGrid'></table><div id='PrimaryGrid_pager'></div>
<script type='text/javascript'>
jQuery(document).ready(function()
{
jQuery('#PrimaryGrid').jqGrid({
url: '/Home/PrimaryGrid/',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', 'Name', 'Age'],
colModel:
[
{ name: 'ID', index: 'ID', width: 40, align: 'left' },
{ name: 'Name', index: 'Name', width: 300, align: 'left' },
{ name: 'Age', index: 'Age', width: 200, align: 'left', sortable: false },
],
pager: jQuery('#PrimaryGrid_pager'),
rowNum: 25,
rowList: [5, 10, 25, 50],
height: 'auto',
width: '950',
sortname: 'ID',
sortorder: "ASC",
viewrecords: true,
multiselect: false,
caption: 'PrimaryGrid',
subGrid: true,
subGridRowExpanded: showDetails
})
jQuery("#PrimaryGrid").jqGrid('navGrid', '#PrimaryGrid_pager', { add: false, edit: false, del: false, search: false })
})
</script>
[/sourcecode]
Notice specifically the function I reference when the subGridRowExpanded event ocurrs: showDetails. This javascript function will call the 2 child subgrids, passing the subgrid_id, row_id, title of the grid (as HTML/String) and a suffix (as a string). I reference the child grid I want to display first within the grid first and the child grid I want to display second as a child second. Sounds Logical. See the below image:
[sourcecode language="html" autolinks="false" gutter="false" toolbar="false"]
<script type="text/javascript">
function showDetails(subgrid_id, row_id) {
showSubGrid_ChildGrid1(subgrid_id, row_id, "<br><b>ChildGrid1 Details</b><br><br>", "ChildGrid1");
showSubGrid_ChildGrid2withSubGrid(subgrid_id, row_id, "<br><b>ChildGrid2withSubGrid Details</b><br><br>", "ChildGrid2withSubGrid");
}
</script>
[/sourcecode]
The showDetails javascript function calls showSubGrid_ChildGrid1 first. This function displays the contents of the first child grid in the expanded grid.
[sourcecode language="html" autolinks="false" gutter="false" toolbar="false"]
<table id='ChildGrid1'></table><div id='ChildGrid1_pager'></div>
<script type='text/javascript'>
function showSubGrid_ChildGrid1(subgrid_id, row_id, message, suffix)
{
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + '_t';
pager_id = 'p_' + subgrid_table_id;
if (suffix) { subgrid_table_id += suffix; pager_id += suffix; }
if (message) jQuery('#' + subgrid_id).append(message);
jQuery('#' + subgrid_id).append('<table id=' + subgrid_table_id + ' class=scroll></table><div id=' + pager_id + ' class=scroll></div>');
jQuery('#' + subgrid_table_id).jqGrid({
url: '/Home/ChildGrid1/' + row_id,
datatype: 'json',
colNames: ['ChildGrid1ID', 'ChildGrid1CODE', 'ChildGrid1Info'],
colModel:
[
{ name: 'ID', index: 'ID', width: 40, align: 'left' },
{ name: 'ChildName', index: 'ChildName', width: 300, align: 'left' },
{ name: 'ChildAge', index: 'ChildAge', width: 200, align: 'left', sortable: false },
],
caption: 'ChildGrid1',
sortorder: "ASC",
width: '880',
height: 'auto'
})
}
</script>
[/sourcecode]
The showDetails javascript function then calls the showSubGrid_ChildGrid2withSubGrid. This function diplays the contents of the second child grid in the expanded grid. Pay special attention to the fact that I added a subGridModel to this function. It means there exists the capability to have multiple subgrids just by simply adding the subGrid: true and the subGridModel attributes to the function.
[sourcecode language="html" autolinks="false" gutter="false" toolbar="false"]
<table id='ChildGrid2withSubGrid'></table><div id='ChildGrid2withSubGrid_pager'></div>
<script type='text/javascript'>
function showSubGrid_ChildGrid2withSubGrid(subgrid_id, row_id, message, suffix)
{
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + '_t';
pager_id = 'p_' + subgrid_table_id;
if (suffix) { subgrid_table_id += suffix; pager_id += suffix; }
if (message) jQuery('#' + subgrid_id).append(message);
jQuery('#' + subgrid_id).append('<table id=' + subgrid_table_id + ' class=scroll></table><div id=' + pager_id + ' class=scroll></div>');
jQuery('#' + subgrid_table_id).jqGrid({
url: '/Home/ChildGrid2withSubGrid/' + row_id,
datatype: 'json',
colNames: ['ID', 'University', 'Degree'],
colModel:
[
{ name: 'ID', index: 'ID', width: 40, align: 'left' },
{ name: 'UniversityName', index: 'UniversityName', width: 300, align: 'left' },
{ name: 'Degree', index: 'Degree', width: 200, align: 'left', sortable: false },
],
rowNum: 10,
rowList: [5, 10, 15, 20],
pager: pager_id,
sortname: 'ID',
sortorder: "ASC",
caption: 'ChildGrid2',
height: 'auto',
subGrid: true,
subGridModel: [{
name: ['Major', 'GPA', 'Intern'],
width: ['auto', 'auto', 'auto', 'auto', 'auto'],
align: ['left', 'left', 'left', 'left', 'left']
}],
subGridUrl: '/Home/ChildGrid2Detail/'
})
jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { add: true, edit: false, view: true, del: true, search: true, refresh: true })
}
</script>
[/sourcecode]