Start Building Professional
Web Apps Today

DHTMLX Grid: Grouping Header Row is right-aligned instead of left

I have two grids on two different pages, both make use of grouping. One will have the group header row left aligned, while the other will be right aligned. I want them to both be left aligned.

I tried swaping the XML sources to each page, but the alignment problem follows the page/JS not the XML used to populate the table.

The JS to initialize are identical (same skin)...so I'm wondering why the text is aligned differently and how to fix it. I look at the DOM after the page is loaded and don't see any explicit alignment...so I was thinking it was in the CSS/Skin. But as I mentioned, they are using the same skin.

Where is the horizontal alignment for the headers determined?

It may be caused by some kind of global CSS which you are using on the page ( for example if you have custom style for TD element ) 
The align of headers defined by 
   div.gridbox table.hdr td {
rule in dhtmlxgrid.css ( or its variation for used skin ), but group headers not using any styles from dhtmlxgrid.css. They have not any special value and use default align value ( left ) 
You can try to override global css rules ( if any ) by adding next style 
   div.gridbox td { 
         text-align:left;
    }