0

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!

Velu narasimman
  • 543
  • 1
  • 5
  • 18

2 Answers2

2

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Oleg, Yes you are correct. The layout is what I wanted to change. And your answer was really helpful. Problem is solved. Thank you! – Velu narasimman Dec 22 '17 at 12:36
0

You may want to use gridComplete instead of loadComplete , but this is true if you use Guriddo jqGrid, or your code can be enclosed in setTimeout function, before to show your own header

Tony Tomov
  • 3,122
  • 1
  • 11
  • 18
  • Thank you Tony Tomov. But I am sorry, now I use the free-jqgrid downloaded from its github page. Coming to the problem, how else can I accomplish this? – Velu narasimman Dec 22 '17 at 09:19
  • You can try what I suggest you, but in any case the second approach using setTimeout will help – Tony Tomov Dec 22 '17 at 09:28
  • Tony Tomov, Yeah I was trying the setTimeout function as well. But Oleg's answer was more helpful. So I accepted that answer. Thank you so much for your useful response. – Velu narasimman Dec 22 '17 at 12:38