jQuery Grid Plugin - jqGrid

I'm trying to achieve a couple things like below - when expanded Parent(ParentGrid)

+ ParentColumn1   |                 ParentColumn2(5) | ParentColumn3               |
  LeaveBlank      |FirstChildCol1 | ChildColA(3)     | ChildColX      |ChildColY   |
  LeaveBlank      |FirstChildCol1 | ChildColA(2)     | ChildColX      |ChildColY   |     
  SumColumn1(sum) |                 SumColumn=(10)   | SumColumn3+X(sum)           |

Pretty much there are no relationship in between parent and child, such as Id - for instance ParentColumn1 is not the parent of ChildCol1 and I have to find a way to manually slot ChildCol1 and ChildCol2 underneath the column of ParentColumn2. Later on, I need to sum of the Columns that has a unrelated parent. Such as the sum of Value in ParentColumn3 + ChildColX displaying at the footer. I hope the explanation is clear enough for what am trying to do here.

Another thing I would like to clarify is those ChildCol are nested data from the same returned Json data from the ParentGrid, but with no related Id can be used.

Has anyone here did this kind of grid previously??? I couldn't find similar things to solutions that Oleg provided for others, anyone know if it's possible to do it this way? Please advise or help cause am really hitting the wall now..

below are the things I still haven't finished old Updates: I managed to go through this far getting the subgrid bound with nested data

1) How to 'slot' the entire subgrid under, assume Column 3 which would be my 'Name' column? I tried doing it through CSS and still have no luck + I abandoned the idea because ultimately, I want to be able to re-position the column and be able to bring the subgrid over as well tying with a specific column. is there a way to do this??

2) Currently I have this issue on my subgrid - about hover over. In the main grid, when you hover over each different row, row gets highlighted. But when I expand the subgrid, and hovering over the rows, the 'WHOLE EXPANDED ROW - aka the entire subgrid' gets highlighted. If my mouse hover over individual rows in the subgrid, nothing happens but still the entire td gets highlighted. How to fix this one?

I would greatly appreciate this if any of you could offer some help. Been posting it for days but still got no replies...

Updated codes:

  var $grid = $("#grid"),
         mainGridPrefix = "s_";
    $grid.jqGrid({
        url: "@Url.Action("GetDeliverySubscription", "AccountManagement")",
        datatype: 'json',
        height: '100%',
        width: 460,
        mtype: "GET",
        postData: { acctCode: "1" },
        jsonReader: {
            repeatitems: false,
            root: "Details"
        },
        colNames: ['Permissioned', 'Subscribed', 'Name'],
        colModel: [
            {
                name: 'Xpermissioned', width: 95, index: 'Xpermissioned',
                align: "right",
                editable: true,
                edittype: 'checkbox', editoptions: { value: "True:False" },
                formatter: "checkbox"
            },
            {
                name: 'Xsubscribed', width: 80, index: 'Xsubscribed',
                align: "right", formatter: "checkbox"
            },
            { name: "SourceName", index: "SourceName" }
        ],
        //pager: "#AccountSubscriptionPager",
        rowList: [20, 40, 60],
        rowNum: 20,
        autoencode: true,
        subGrid: true,
        idPrefix: mainGridPrefix,
        beforeProcessing: function (data) {
            var rows = data.Details, l = rows.length, i, items, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.AvailableDeliveryTargets) {
                    subgrids[i + 1] = item.AvailableDeliveryTargets;
                }
            }
            data.userdata = subgrids;
        },
        subGridRowExpanded: function (subgridDivId, rowId) {
            var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
                pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
                subgrids = $(this).jqGrid("getGridParam", "userData");

            $subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
            $subgrid.jqGrid({
                datatype: "local",
                data: subgrids[pureRowId],
                colNames: ["Subscribed", "Name"],
                colModel: [
                    {
                        name: 'xSubscribed', index: "xSubscribed",
                        formatter: "checkbox", width: 175, align: "right"

                    },
                    { name: "Name", index: "Name" }
                ],
                autowidth: false,
                width: 425,
                height: "100%",
                autoencode: true,
                jsonReader: {
                    repeatitems: false
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
            $subgrid.closest("div.ui-jqgrid-view")
                .children("div.ui-jqgrid-hdiv")
                .hide();
        }
    });

Here's my raw Json data (sorry, I don't know how to make them into Json look)
{"ContactId":1011,"ContactName":"Teddy Hanson","Details":[{"SourceId":2790,"SourceName":"Portfolio Holdings by Asset Class","SourceType":"report","JobDefId":1013,"JobDefName":"(Ja3) Account Driven with Acct level SLA ","AccountId":1011,"AccountCd":"11","Xpermissioned":true,"Xsubscribed":true,"AvailableDeliveryTargets":[{"TargetId":1011,"Name":"Email","xSubscribed":true},{"TargetId":1053,"Name":"Print","xSubscribed":true}]},{"SourceId":2790,"SourceName":"Portfolio Holdings by Asset Class","SourceType":"report","JobDefId":1008,"JobDefName":"(Ja2) Account Driven all types: Report,Package,Template","AccountId":1011,"AccountCd":"11","Xpermissioned":true,"Xsubscribed":true,"AvailableDeliveryTargets":[{"TargetId":1011,"Name":"Email","xSubscribed":false},{"TargetId":1053,"Name":"Print","xSubscribed":true}]}]}