javascript - jQgrid: multiple column row headers

Question

I am trying to extend my jQGrid to have multiple rows for the header.

It will look something like this

               -----------------------
Level 1 - >    | Application         |
               -----------------------  
Level 2 - >    |Code    | Name       |  
               -----------------------
               | 0002827| Mobile Phone1
               | 0202827| Mobile Phone2
               | 0042827| Mobile Phon3e
               | 0005827| Mobile Phone4
               | 0002627| Mobile Phon5e
               | 0002877| Mobile Phone6
               | 0002828| Mobile Phone7

I am wondering how to do this with jQGrid 3.8.2? Any ideas?

Answer 1

The problem is really not so easy as it looks like at first glance. I tried to find a simple solution, but the best result which I found you can see here:

The order of the headers (level 1 and level 2) is not as one would like to have. Other attempts like this or this are buggy because the sorting and column resizing works not more correct.

For the understanding: the grid moves the <thead> outside of the table and places it inside of separate which are placed above the table (see here for more information). It allows including some additional information like searching toolbar between the table header and the table body. Other places in the jqGrid code like column resizing and column sorting works incorrect if there are exist other headers (one more <tr> with <th> elements) over the main column headers. So only the inserting of additional column headers under the main columns headers (which looks not nice of course) not breaks the sorting and the resizing of columns.

UPDATED: See the answer which do provide the solution of the problem under some restrictions.