If having the child records inermingled with the parent records is not important to you, then present two separate grids and synchronize the contents of the second (the 'Detail' grid) with the selected row of the 'Master' grid.

This is a technique for handling parent and child records, similar to a subGrid, but it is not a type of subGrid and it does not use any of the subGrid properties, events or methods.

Again, the Detail grid is a full-feature grid: you can do whatever you want with it in terms of configuration and function.

Defining Master/Details Grids

First, define two grids in your HTML; in our example, Invoice Header and Invoice Detail (the ids used here are not significant, you can call them whatever you want):

<table id="master" class="scroll"></table>
<div id="pagermaster" class="scroll" style="text-align:center;"></div>
<table id="detail" class="scroll"></table>
<div id="pagerdetail" class="scroll" style="text-align:center;"></div>

Then, in the definition of your Master grid, add the following, which says that whenever a row is selected in the Master grid, the Details grid is sychronized.

onSelectRow: function(id) {
    if(id == null) {
        id=0;
        if(jQuery("#details").getRecords()>0) {
            jQuery("#details").setGridParam({url:"subgrid.php?q=1&id="+id,page:1}).trigger("reloadGrid");
          }
      } else {
          jQuery("#details").setGridParam(url:"subgrid.php?q=1&id="+id,page:1).trigger("reloadGrid);
      }
  }

Notice this passes the id of the Master row to be used as a parameter in the url to retrieve the Details data. The value of the setGridParam({url: subgrid.php?q=1... }) property, of course, will need to be changed to meet your needs.

Notice also how setGridParam is used to set two parameters of the grid at once (the url and the page number) and how triggering the grid reload is chained.

Now these grids can be defined and operated independently while still being co-ordinated.