How to create two footer rows in jqgrid

Question

I am working on jqgrid with ASP.NET WEB API.

I want to add two rows in the footer of jqgrid.

So a little search on the net brought me to this link (2010) which says "It is not possible", I am thinking as the answer is of 2010, may be by now some thing / some workaround may have been made possible for this.

What do I want to show in footer ?

I want to show two rows

• Total for data preset in current page
• Grand total for data present in all of the pages

I am able to pass the data and read the data, the question is how to use this data and create two footer rows in jqgrid.

Any thoughts ?

Answer 1

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

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.