How to create two footer rows in jqgrid

I found the question interesting, so I created the demo which demonstrates one from the possible implementation of two-rows footer:

enter image description here

The main idea is to add the second row in the table where the standard footer already exist. To eliminate possible problems with other parts of jqGrid code I replaced footrow class name in the custom row to myfootrow. To have the same CSS settings for the second footer as the original tooter has I included the copy of .ui-jqgrid tr.footrow td from ui.jqgrid.css with the same definitions for .ui-jqgrid tr.myfootrow td:

.ui-jqgrid tr.myfootrow td {
    font-weight: bold;
    overflow: hidden;
    white-space:nowrap;
    height: 21px;
    padding: 0 2px 0 2px;
    border-top-width: 1px;
    border-top-color: inherit;
    border-top-style: solid;
}

The full code you will find below

footerrow: true,
loadComplete: function () {
    var $this = $(this),
        sum = $this.jqGrid("getCol", "amount", false, "sum"),
        $footerRow = $(this.grid.sDiv).find("tr.footrow"),
        localData = $this.jqGrid("getGridParam", "data"),
        totalRows = localData.length,
        totalSum = 0,
        $newFooterRow,
        i;

    $newFooterRow = $(this.grid.sDiv).find("tr.myfootrow");
    if ($newFooterRow.length === 0) {
        // add second row of the footer if it's not exist
        $newFooterRow = $footerRow.clone();
        $newFooterRow.removeClass("footrow")
            .addClass("myfootrow ui-widget-content");
        $newFooterRow.children("td").each(function () {
            this.style.width = ""; // remove width from inline CSS
        });
        $newFooterRow.insertAfter($footerRow);
    }
    $this.jqGrid("footerData", "set", {invdate: "Total (page):", amount: sum});

    // calculate the value for the second footer row
    for (i = 0; i < totalRows; i++) {
        totalSum += parseInt(localData[i].amount, 10);
    }
    $newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]")
        .text("Grand Total:");
    $newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]")
        .text($.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number));
}

In the code I set additional information in columns invdate and amount of the footer.