This approach allows a fully functional child grid with all the features and programming model you would expect from a normal grid - there are no limitations.

For this type of scenario you will need two grid definitions - one for the parent grid and one for the child. The key here is to set the HierarchySettings.HierarchyMode of the parent grid to Parent and to hook its client-side event SubGridRowExpanded. This can be achieved in the following way:

<trirand:JQGrid runat="server" ID="JQGrid1" DataSourceID="SqlDataSource1">
   <Columns>
      <trirand:JQGridColumn DataField="CustomerID" HeaderText="ID" PrimaryKey="True" Width="50" />
      <trirand:JQGridColumn DataField="CompanyName" />
      <trirand:JQGridColumn DataField="ContactName" />
      <trirand:JQGridColumn DataField="Phone" />
      <trirand:JQGridColumn DataField="City" />
        </Columns>
   <HierarchySettings HierarchyMode="Parent"  />
   <ClientSideEvents SubGridRowExpanded="showSubGrid" />
</trirand:JQGrid>

<asp:SqlDataSource runat="server" ID="SqlDataSource1" 
   ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>"
   SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [Phone], [City] FROM [Customers]">
</asp:SqlDataSource>

The client-side event designated by ClientSideEvents.SubGridRowExpanded should call a special autogenerated function which will expand the grid. The name of the autogenerated function is fixed and is always "showSubGird_GridID", where "GridID" is the ID of the grid. Example:

<script type="text/javascript">    
   function showSubGrid(subgrid_id, row_id) 
   {
      // the "showSubGrid_JQGrid2" function is autogenerated and available globally on the page by the second child grid. 
      // Calling it will place the child grid below the parent expanded row and will call the OnDataRequesting event 
      // of the child grid, with ID equal to the ID of the parent expanded row
      showSubGrid_JQGrid2(subgrid_id, row_id);
   }   
</script>

Setting up the child grid is similar to that, the difference being that the HierarchySettings.HierarchyMode property should be set to Child. In most cases you would also typically need to hook the OnDataRequesting event - this even will fire just prior to binding the grid with data and can be used to pass the parent row key to the child grid before requesting the data - this is usually required to change the SQL query to only fetch records that are children of the parent row.

<trirand:JQGrid runat="server" ID="JQGrid2" DataSourceID="SqlDataSource2" Width="550px"         
   OnDataRequesting="JQGrid2_DataRequesting">        
   <Columns>
      <trirand:JQGridColumn DataField="OrderID" HeaderText="Order ID" PrimaryKey="True" Width="50" />
      <trirand:JQGridColumn DataField="RequiredDate" DataFormatString="{0:d}" Width="100" />
      <trirand:JQGridColumn DataField="ShipName" Width="200" />
      <trirand:JQGridColumn DataField="ShipCity" Width="100" />
      <trirand:JQGridColumn DataField="Freight" Width="100" />
        </Columns>        
        <HierarchySettings HierarchyMode="Child" />
</trirand:JQGrid>

<asp:SqlDataSource runat="server" ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>"
   SelectCommand="SELECT [OrderID], [CustomerID], [RequiredDate], [ShipName], [ShipCity], [Freight] FROM [Orders] WHERE ([CustomerID] = @CustomerID)">
   <SelectParameters>
         <asp:Parameter DefaultValue="" Name="CustomerID" Type="String" />
   </SelectParameters>
</asp:SqlDataSource>

public void JQGrid2_DataRequesting(object sender, JQGridDataRequestEventArgs e)
{
   SqlDataSource2.SelectParameters["CustomerID"].DefaultValue = e.ParentRowKey;            
}