Question

186

jQgrid: multiple column row headers

rated 0 times [ 188] [ 2] / answers: 1 / hits: 26417 / 14 Years ago, mon, january 17, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

angelr

Add To Favorites

Follow

Total Points: 399

Total Questions: 96

Total Answers: 101

Location: Finland

Member since Sun, May 21, 2023

1 Year ago

angelr questions

1 Update data of chartjs chart

Tue, Sep 14, 21, 00:00, 3 Years ago

1 Reactjs trigger onClick function without click in functional component

Tue, Jul 14, 20, 00:00, 4 Years ago

1 Can not find 'EJS' Typescript and Express

Mon, Dec 30, 19, 00:00, 5 Years ago

1 How do I refresh a div with AJAX without refreshing the whole page?

Sat, Sep 14, 19, 00:00, 5 Years ago

1 Setting initial value of a Vuetify checkbox

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 14 Years ago morganm · Accepted Answer

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:
enter

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.