CODEWITHSUNDEEP
jqueryjqgridheader
leora
leora

Reputation: 196821

How can I center align text in jqgrid header group

I am using the new header grouping feature of jqgrid 4.2 which works great except that it left aligns all of the text in the header groups.

How can align the header group text to be center in the cell?

Here is a screenshot to show you how it seems to be working by default: (I want "Books" to be center aligned")

NOTE: the regular column headers ARE center aligned.

enter image description here

Upvotes: 1

Views: 18245

Answers (7)

H.Norouzi
H.Norouzi

Reputation: 1

this work

  jQuery(grid_selector).jqGrid('setGroupHeaders', {
                useColSpanStyle: false,//or true
                groupHeaders: [
                    { startColumnName: 'colName', numberOfColumns: 2, titleText: '<center>your text</center>' }
                ]
            });

Upvotes: 0

Harry .Naeem
Harry .Naeem

Reputation: 1331

I had to center align text in table head columns in jqgrid, after element inspection, the following worked in my case:

.ui-jqgrid-sortable {
    text-align: center;
}

Hope it helps someone.

Upvotes: 1

Asif Raza
Asif Raza

Reputation: 1021

Inspect the element then , get the id of the element 

    $('#jqgh_grid-table_CountryName').css('text-align', 'left');

Upvotes: 0

zerot86
zerot86

Reputation: 1

Try this,

$('.ui-jqgrid .ui-jqgrid-htable .ui-th-div').css('text-align', 'center');

Upvotes: 0

Prashant
Prashant

Reputation: 9

I had the same issue but i found the solution. you give titleText within the html center tag

titleText: ' open center tag Books close center tag'

Upvotes: 1

tpeczek
tpeczek

Reputation: 24125

The header group cell is given special class .ui-th-column-header. However this class has no special styling, if anywere in your project you have set text-align to left for th elements (for example in ASP.NET MVC the site.css is doing this) the text will not be center aligned. In most situations adding this to your CSS should do the trick:

.ui-th-column-header
{
  text-align: center;
}

Upvotes: 8

Oleg
Oleg

Reputation: 222007

Sorry, but I can't reproduce the problem. The demo produce the following grid with the center alignment column headers:

enter image description here

If you would post your demo one can examine where is the problem's origin. I suppose that some other CSS which you make the problem.

Upvotes: 3

Related Questions