Jquery JQGrid - How to set alignment of grid header cells?

Question

Is it possible to align grid column headers in jqgrid? eg align left right or center?

In the jqrid documents http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options it says:

align: Defines the alignment of the cell in the Body layer, not in header cell. 
Possible values: left, center, right.

Note that it says "not in the header cell". How can I do this for the header cell (grid title cell)? The documentation fails to mention this little detail....

Oleg · Accepted Answer · 2010-06-10T09:28:04.417

The best documented way to change column header alignment is the usage of setLabel method of jqGrid (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods).

You can change alignment of the column identified by 'name': 'Name' with the following code:

grid.jqGrid ('setLabel', 'Name', '', {'text-align':'right'});

With the code

grid.jqGrid ('setLabel', 'Name', 'Product Name', {'text-align':'right'},
             {'title':'My ToolTip for the product name column header'});

you can change the header name to 'Product Name' and set 'My ToolTip for the product name column header' as a tool tip for the corresponding column header.

You can also define some classes in your CSS and set it for the column headers also with respect of setLabel method.

By the way the name of the function 'setLabel' is choosed because you can not define colNames parameter of the jqGrid, but use additional 'label' option in the colModel to define a column header other as the 'name' value.

UPDATED: You can do able to use classes to define 'text-align' or 'padding'. Just try following

.textalignright { text-align:right !important; }
.textalignleft { text-align:left  !important; }
.textalignright div { padding-right: 5px; }
.textalignleft div { padding-left: 5px; }

and

grid.jqGrid ('setLabel', 'Name', '', 'textalignright');
grid.jqGrid ('setLabel', 'Description', '', 'textalignleft');

(I defined 5px as the padding to see results better. You can choose the padding value which you will find better in your case).

Thanks - {'text-align':'right'} works, but I would prefer to use a css class. Adding a css with .jqGrid('setLabel', 'Name', '', 'css-class-name'); didnt work - is that the wrong syntax? — JK., Jun 10 '10 at 01:48
Actually, { 'text-align': 'left' } places the header text too hard to the left: it touches the grid line. I tried: { 'text-align': 'left', 'padding-left': '1px' }, but that moved the grid line at the end of the cell away by 1px as well. I just want my headers to have the same alignment as the data cells. — JK., Jun 10 '10 at 01:52
@Jake: No, but you can use CSS only to do the same. If you have for example grid with the id of the `` element as `'list'` and need to set alignment of the climn with the `name:'mycol'` you can use the fact that the
element will have the id="list_mycol". So you can define the corresponding CSS style without calling of `'setLabel'` method. — Oleg, May 20 '11 at 15:46
Hi Oleg, none of the code that you offered here works for me - any other ideas how to justify the columns aside from good old css hack? — sarsnake, Aug 05 '14 at 21:26

score 8 · Answer 2 · answered Jun 09 '10 at 07:31

8

Just go to your css file of your jqgrid.

Look for:

ui-th-column,.ui-jqgrid .ui-jqgrid-htable th.ui-th-column
{overflow:hidden;white-space:nowrap;text-align:center; ...

And change the text-align.

I didn't find it eather with regular options.

I hope this will help you.

Bruno

answered Jun 09 '10 at 07:31

bruno

1,830
2
22
36

1

This will change the alignment of every header cell, which is not useful. Need the headers to have the same alignment as the data cells. – JK. Jun 10 '10 at 02:12

score 3 · Answer 3 · answered Jan 30 '16 at 12:27

While using the 'setLabel' method seems feasible, I always want to have my header-cells aligned the same way as the cells. So I just use this function:

function pimpHeader(gridObj) {
    var cm = gridObj.jqGrid("getGridParam", "colModel");
    for (var i=0;i<cm.length;i++) {
        gridObj.jqGrid('setLabel', cm[i].name, '', 
            {'text-align': (cm[i].align || 'left')}, 
            (cm[i].titletext ? {'title': cm[i].titletext} : {}));
    }
}

This uses the alignment of the cells to align the header. To be called like this:

pimpHeader(jQuery("#grid"));

If you want, you can extend your Column-Model with 'titletext', which is shown as a tooltip-header, like so:

colModel: [{ name: 'name', label: 'Name', align: 'right', titletext: 'Name-Tooltip'}, ...]

5.5 years later and many thanks - this was perfect for a client using an older version of jqGrid! — Donny McCoy, Apr 16 '21 at 00:41

score 2 · Answer 4 · edited Dec 04 '13 at 06:58

2

Please try this

loadBeforeSend: function () {
    $(this).closest("div.ui-jqgrid-view").find("table.ui-jqgrid-htable>thead>tr>th").css("text-align", "left");
}

edited Dec 04 '13 at 06:58

Sankumarsingh

9,889
11
50
74

answered Dec 04 '13 at 06:39

Shailesh R

21
1

score 0 · Answer 5 · answered Mar 11 '14 at 04:55

0

see the source to find out the css that your grid refer to and then you can try this:

setTimeout(function(){
   jQuery('.ui-th-column').css('text-align','center');
},1);

answered Mar 11 '14 at 04:55

user3404584

1

score 0 · Answer 6 · answered Mar 14 '17 at 13:39

0

You can simply add the align attribute to your Column in ColModel:

colModel: [
          {name: 'MyColumn', index: 'MyColumn', align: 'center'}
      ],

answered Mar 14 '17 at 13:39

Mehdi Souregi

3,153
5
36
53

Jquery JQGrid - How to set alignment of grid header cells?

6 Answers6

Linked