1

Hi I wonder if there is a method in JQgrid to display the thead before every grouping name? or if there is another hardcoding jquery method ? I give you an example in the image below, how I want to do this: enter image description here

Where I marked, I want to put my thead. How can I do that? Thx

I tried this method :

function insertHeader(){
    var get = $( "thead" ).html();
    $( "<thead>"+get+"</thead>" ).insertBefore($(".jqgroup "));
}

It works, but for some reason it don't get the css and I don't know why????

Attila Naghi
  • 2,535
  • 6
  • 37
  • 59

2 Answers2

0

Probably you should use Subgrid instead of grouping? The grid looks very close to grouping from the user's point of view. Additionally I would recommend you to read the answer, this one and this one which shows how one can hide some elements of subgrid by changing of colspan attribute of subgrid row and usage jQuery.hide. It seems to me that you will be able to customize the look of subgrid to what you need.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • believe me i don't want to use subgrid. It is hard coded :D i have to modiffied a lot and I don't have that time – Attila Naghi Feb 13 '14 at 11:21
  • is there any other way ? – Attila Naghi Feb 13 '14 at 11:29
  • There are no simple jqGrid option which you can use to change the look of the groupped grid to what you want. So the code will be not very simple in any way. What you can do alternatively is inserting additional information on the grouping header manually inside of `loadComplete` or use custom formatting for the column which you use for grouping. – Oleg Feb 13 '14 at 11:45
  • @Chester: Sorry, but I don't understand you current problem. You wrote "it don't get the css and I don't know why????" Which css you mean? The code `insertHeader` which you posted is very dirty. The are a lot of tables on the page. jqGrid contains from many tables too. The column header of the grid can consist from many tables. So the usage of `$("thead").html();` is wrong. The next problem: the column header contains `ids`. you have to remove the ids before inserting to have no id duplicates on the page. – Oleg Feb 13 '14 at 12:24
  • I know there is no good in duplicates ids , but in my case it doest not affect the table. – Attila Naghi Feb 13 '14 at 13:53
  • @Chester: I think that you don't understood me. `$("thead")` select **all `` elements from all `` elements** on the page. So `$("thead").length` can be more as 1. Even if `$("thead")` get the only header of the grid then `$("thead tr")` can contains many wrong rows. Try for example to use toolbar searching (`filterToolbar`) and you will see the problem.
     – Oleg Feb 13 '14 at 14:28
0
var get = $( "thead tr" ).html();
$( "<tr class='removeFirst'>"+get+"</tr>" ).insertAfter($(".jqgroup "));
$( ".removeFirst" ).first().remove();

and after that before loading the table you can overwrite the css using !important:

tr th {
/*your css here*/
}
Attila Naghi
  • 2,535
  • 6
  • 37
  • 59