How to show total of subgrid footer data in parent jqGrid footer

Question

I need to have jqGrid with subgrid, in which I will be loading all jqGrid data (both parent & subgrids) from single stored procedure. Wherein my SP is returning me the table with following columns.

Login | ReadingID | Role | Update Time | Comments

I want to show Login name in Parent jqGrid. This will be the only column in parent Grid. & for each of this record I need to have subgrid showing Reading ID records corresponding to that Login. The Reading ID may have repeated entries for any Login. There is one to many cardinality between Login & ReadingID. Now I want to show distinct Reading ID count & UpdateTime count for each Login in subGrid footer. & further I want to have total of all this subgrids footer totals in footer of Parent Grid.

I hope the requirement is clear enough. Did anybody have implemented such jqGrid or created demo.

Update to describe requirement & chosen solution

I am using the grid definition as follows

mygrid = $("#RptDocRelease");

    // create the grid without filling it (datatype: "local")
    mygrid.jqGrid({
        datatype: 'local',// to revent initial loading of the grid
        postData: {
            FromDate: function () { return $("#FromDate").val(); },
            ToDate: function () { return $("#ToDate").val(); }
        },
        url: '@Url.Action("DocReleaseProductivityList", "Reports")',
        jsonReader: { repeatitems: false, root: "DocRows" },
        colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Login'],
        colModel: [{ name: 'Login', index: 'Login', }],
        idPrefix: mainGridPrefix,
        subGrid: true,
        gridview: true,
        viewrecords: true,
        pgbuttons: false, pginput: false,
        recordtext: 'Total Rows:{2}',
        emptyrecords: 'Total Rows:0',
        pager: '#LogPager',
        caption: '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Title',
        height: 'auto',
        width: 770,
        userDataOnFooter: true,
        hidegrid: false,
        headertitles: true,
        loadError: function (xhr, status, error) {
            alert(status + " " + error);
        },
        beforeProcessing: function (data) {
            var rows = data.DocRows, l = rows.length, i, item, subgrids = {};
            for (i = 0; i < l; i++) {
                item = rows[i];
                if (item.id) {
                    subgrids[item.id] = item.ReadingList;
                }
            }
            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],
                jsonReader: { repeatitems: false },
                colNames: ['@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_ReadingID',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Role',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_UpdateTime',
                            '@VirtuOxAdmin.DocReleaseProductivity_Grid_RptDocRelease_Comments'
                ],
                colModel: [
                    { name: 'ReadingID', index: 'ReadingID', width: 80, fixed: true, sorttype: "integer" },
                    { name: 'Role', index: 'Role', width: 100, fixed: true },
                    {
                        name: 'UpdateTime', index: 'UpdateTime', width: 80, fixed: true, sorttype: "date", formatter: "date",
                        formatoptions: { srcformat: "m/d/Y h:i:s", newformat: "m/d/Y h:i:s A" }
                    },
                    { name: 'Comments', index: 'Comments' }
                ],
                cmTemplate: { align: 'center', sorttable: false, cellattr: function () { return 'style="white-space: normal!important;' } },
                height: 'auto',
                width: '100%',
                hidegrid: false,
                viewrecords: true,
                pgbuttons: false, pginput: false,
                recordtext: 'Total Rows:{2}',
                emptyrecords: 'Total Rows:0',
                pager: rowId + '_Pager',
                userDataOnFooter: true,
                headertitles: true,
                gridview: true,
                loadError: function (xhr, status, error) {
                    alert(status + " " + error);
                },
                gridview: true,
                idPrefix: rowId + "_"
            });
            $("#" + rowId + "_Pager").navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
        }
    });
    mygrid.navGrid('#LogPager', { edit: false, add: false, del: false, search: false, refresh: false })
    .closest(".ui-jqgrid").hide();

& Server data will be returned in following structure

 public struct JQGridResult
    {
        public int page;
        public int total;
        public int records;
        public List<ReportData> DataRows;
        public List<DocRelease> DocRows;
        public object userdata;
    }


 public struct DocRelease
    {
        public string Login { set; get; }
        public List<Readings> ReadingList { set; get; }
        public object userdata;
    }

public struct Readings
    {
        public int ReadingID { set; get; }
        public string Role { set; get; }
        public DateTime UpdateTime { set; get; }
        public string Comments { set; get; }
    }

Answer 1

It seems me the mostly easy to use userdata together with userDataOnFooter: true option for the main grid and subgrids (see the old answer). In the case you can make all required calculation of summary row values on the server side and just include the results of the calculations in userdata part. The answer, this one, this one and many other provide examples of loading of whole grid together with subgrid at once. You can use loadonce: true to simplify the loading. I think that you will be able to implement your requirements based on the referenced answers. Don't forget to use idPrefix option in subgrids.

UPDATED: After you post the picture with your data I think that you should use grouping instead of subgrids. You can still use footerrow: true and userDataOnFooter: true options to set total footer row. I just get the demo created for the answer and added the options footerrow, userDataOnFooter and userData. As the result we get the demo which display the data which have the same structure like you need: