For implementing two WebDataGrid controls for parent and child details you can first create a page with one WebDataGrid control to display parent records. Then under the Behaviors you can set the cell click action as row and row selection type as single. This will allow the grid to be highlighted for the entire row. Also there's a client side event called RowSelectionChanged that can be handled:

<Behaviors>
   <ig:Selection CellClickAction="Row" RowSelectType="Single">
      <SelectionClientEvents RowSelectionChanged="WebDataGrid1_Selection_RowSelectionChanged" />
   </ig:Selection>
</Behaviors>

In the event handler for RowSelectionChanged you can use the following to retrieve the id and pass a query string to another page:

function WebDataGrid1_Selection_RowSelectionChanged(sender, eventArgs) {
   ///<summary>
   ///
   ///</summary>
   ///<param name="sender" type="Infragistics.Web.UI.WebDataGrid"></param>
   ///<param name="eventArgs" type="Infragistics.Web.UI.RowSelectionChangedEventArgs"></param>

   var id = eventArgs.getSelectedRows().getItem(0).get_dataKey()[0];
   window.showModalDialog("Default2.aspx?id=" + id, "", "dialogWidth:400px; dialogHeight:200px; center:yes");

}

This will open a modal dialog in which it will be part of the current page.

In Default2.aspx will load the child records from the query string id being passed in the page load event.