how to hide jqgrid header while the grid content is loading?

For reasons, I need to hide the default header that is generated by jqgrid and set my own header for it. For a demo I am trying something like this.

        loadComplete:function(){
        //$(".ui-jqgrid-titlebar").css("display","none");
        $(".ui-jqgrid-hdiv").css("display","none");
        if (!$(".ui-jqgrid-titlebar").next().hasClass("newheader"))
        {
            $("<div class='newheader'><div class='col-md-6''> FirstText </div><div class='col-md-6'> SecondText </div></div>").insertAfter(".ui-jqgrid-titlebar");           
        }

    },

But my implementation has 13 columns and 50 rows also it is "grouping" grid.

At present it takes around 4 seconds to populate the grid. During this loading time the default header is showing up. But I wish to hide it while the content is loading. How can I do it?

In one answer, I came to know that in order to hide the header we have to omit caption. But I need the caption but not the header. Help me on this!

Solution

It seems to me that you want to change the grid layout (all outer dives and headers) only and not the grid body. The grid layout will be created immediately after you create jqGrid. On the other side loadComplete will be called after the data will be loaded. All your current code inside of loadComplete has no relation to the data. Thus you can move the code from outside of jqGrid. Additionally you can just remove caption parameter if you don't want to display the header. After that you can remove unneeded line $(".ui-jqgrid-titlebar").css("display","none");. The code will be

// create the grid
$("#grid1").jqGrid({
    ...
});
$(".ui-jqgrid-hdiv").css("display","none");
$("<div class='newheader'><div class='col-md-6''>FirstText</div><div class='col-md-6'>SecondText</div></div>").insertAfter(".ui-jqgrid-titlebar");

See https://jsfiddle.net/92da8xhq/11/. I added $("#grid1").jqGrid("GridUnload"); before creating the grid because your current code can call showgrid function more as once.