Free - jqgrid: Combine frozen column, grouping header and toolbar search

I'm using free-jqgrid v4.15.5 and have a problem with Frozen column, Toolbar searching and Header grouping.

I had a similar question here and got the solution from Oleg

And the problem arises when I incorporate the frozen column feature into the example. The search field in the Date column does not appear and the position of Inv No is not good. Demo here

$(document).ready(function () {
        var myData = [
                { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "4", invdate: "2007-10-04", name: "test4", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                { id: "5", invdate: "2007-10-31", name: "test5", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "6", invdate: "2007-09-06", name: "test6", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
                { id: "7", invdate: "2007-10-04", name: "test7", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
                { id: "8", invdate: "2007-10-03", name: "test8", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
                { id: "9", invdate: "2007-09-01", name: "test9", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
                { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
                { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
                { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
        ],
            myGrid = $("#list");

        myGrid.jqGrid({
            datatype: 'local',
            data: myData,
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
            colModel: [
                { name: 'id', index: 'id', width: 70, align: 'center', sorttype: 'int', frozen: true },
                {
                    name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date', frozen: true,
                    formatter: 'date', formatoptions: { newformat: 'd-M-Y' }, datefmt: 'd-M-Y'
                },
                { name: 'name', index: 'name', width: 70 },
                { name: 'amount', index: 'amount', width: 100, formatter: 'number', align: 'right' },
                { name: 'tax', index: 'tax', width: 70, formatter: 'number', align: 'right' },
                { name: 'total', index: 'total', width: 120, formatter: 'number', align: 'right' },
                {
                    name: 'closed', index: 'closed', width: 110, align: 'center', formatter: 'checkbox',
                    edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },
                    stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:Yes;false:No' }
                },
                {
                    name: 'ship_via', index: 'ship_via', width: 120, align: 'center', formatter: 'select',
                    edittype: 'select', editoptions: { value: 'FE:FedEx;TN:TNT;IN:Intim', defaultValue: 'Intime' },
                    stype: 'select', searchoptions: { value: ':All;FE:FedEx;TN:TNT;IN:Intim' }
                },
                { name: 'note', index: 'note', width: 100, sortable: false }
            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            //pager: '#pager',
            gridview: true,
            ignoreCase: true,
            rownumbers: false,
            sortname: 'invdate',
            viewrecords: true,
            sortorder: 'desc',
            //caption: 'Just simple local grid',
            height: '100%',
            shrinkToFit: false,
            width: 400
        });
        myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
        myGrid.jqGrid('setFrozenColumns');
        myGrid.jqGrid('setGroupHeaders', {
            useColSpanStyle: true, groupHeaders:
                [
                    { startColumnName: 'invdate', numberOfColumns: 5, titleText: "Group column 1" },
                    { startColumnName: 'closed', numberOfColumns: 3, titleText: "Group column 2" },
                ]
        });
        myGrid.jqGrid('setGroupHeaders', {
            useColSpanStyle: true, groupHeaders:
              [
                    { startColumnName: 'amount', numberOfColumns: 3, titleText: "Group column 3" },
                ]
        });
        $("#list_invdate,#list_closed,#list_ship_via,#list_note,#list_name").attr("rowspan", "2")
    });

And can anyone solve this problem for me? Thanks so much.

P/s: Oleg, I'm looking forward to your response.

Sorry, but setGroupHeaders isn't really supported in common case if setGroupHeaders will be called more a one time. As a workaround one can change the value of rowspan attributes or to set the height of rows of frozen columns. In your case, the following code added at the end of your demo can fix the problem

var $frozenHDiv = myGrid.closest(".ui-jqgrid-view")
          .find(".frozen-div.ui-jqgrid-hdiv");

$frozenHDiv.find("tr.ui-jqgrid-labels")
          .children("th")
          .removeAttr("rowspan")

$frozenHDiv.find("tr.ui-jqgrid-labels").height(45);
$frozenHDiv.find("tr.ui-search-toolbar").height(22);

See https://plnkr.co/edit/sbDfCAg0h73G3Q3AaP2s?p=preview