How to merge the footer row's column in jqgrid

Question

I have a footer column, where i need to show the total information. I have added the footer row true and got the footer row added.

simlar to the above image.

Here in footer row, i want to merge the client and date colum for the total in single column.

Does any one have done, please share your thoughts

Answer 1

You use my old demo from the answer. If I understand you correctly you want remove vertical lines (cell borders) between some columns in the footer row. One can set colspan (close to the results from the answer). The disadvantage of the approach will be that one would need to adjust the width of the merged columns inside of resizeStop. So I suggest you to make unneeded vertical lines transparent. In general it's mostly the same what I described in the answer. In your case it would be something like

var $footRow = $("#list").closest(".ui-jqgrid-bdiv")
                         .next(".ui-jqgrid-sdiv")
                         .find(".footrow");

$footRow.find('>td[aria-describedby="list_name"]')
    .css("border-right-color", "transparent");

The demo demonstrates the approach. I made some more right borders of footer row invisible. So the results are like on the picture below: