How to add second row in jqgrid

Question

Currently I have the following jqgrid structure:

colName:['ID','Name'],
colModel:[ {<ID CODE HERE>},{<NAME CODE HERE>}],
<REST OF CODE HERE>

The above jqgrid displays fine as follows:

ID    Name
1     Name1
2     Name2

I want to display one row above it with dynamic data. Such as:

Period
From 10/10/2013 To 10/10/2014
ID    Name
1     Name1
2     Name2

The "Period" row is static word while the row below it "From 10/10/2013 To 10/10/2014" is dynamic data coming from backend just like Name1, and Name2 etc.

How can I display these two rows above it?

you can use `Group Column Headers` for example, see their docs on how to use them. — balexandre, Jan 21 '14 at 05:42

score 0 · Accepted Answer · edited May 23 '17 at 11:49

There are two standard element of grid which can be created over column headers: caption (grid header) and top toolbar (see here for pictures with examples). Both the headers can hold any common HTML data inclusive <br/>.

Initial caption can be created by usage non-empty caption parameter. You can change it at any moment using setCaption method.

To create top toolbar you should include toolbar: [true, "top"] option. It create additional div over the grid header. The div have the class "ui-userdata" and the id constructed based on the id of the grid: "t_" + grid_id. If you need to place multiline information in the div you should overwite default CSS. See the answer, this one and this one for more details and code examples.

How to add second row in jqgrid

1 Answers1

Linked