Multiple Child Grids on the same level using MVC 2 and jqGrid (jQuery)

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:

<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> 

in your Views\Shared\Site.Master file as show in the below image.

image

Include the following:

<script src="../../Scripts/jqgrid/src/grid.subgrid.js" type="text/javascript"></script>
<script src="../../Scripts/jqgrid/src/grid.inlinedit.js" type="text/javascript"></script> 

in your Views\Shared\Home\Index.aspx file.

image

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:

<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>

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:

<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>




The showDetails javascript function calls showSubGrid_ChildGrid1 first. This function displays the contents of the first child grid in the expanded grid.

<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>

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.

<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> 




1 Comment

 Add your comment
  1. Can you accomplish multiple sub grids at same level using ng-grid?

Leave a Comment

Your email address will not be published.