Start Building Professional
Web Apps Today

dhtmlxGrid setColAlign not setting alignment

Hello,

I'm using IE 8 in compatibility mode. I am using a grouping grid. The grid is in a frame.

    myLayout = new dhtmlXLayoutObject(document.body,"1C");
    myGrid = myLayout.items[0].attachGrid();
    myGrid.setImagePath("/ymus/common/dhtmlx/dhtmlxGrid/codebase/imgs/");
    myGrid.setColAlign("left,left,right,right,right,right,right,right,right,right,right,right,right,right,right,right");
    myGrid.setHeader("Model,Description,Confirm Total,Shipped Total,Left to Ship,To Ship Status,Prior Period,Nov 09,Dec 09,Jan 10, Feb 10, Mar 10, Apr 10, May 10, Jun 10, Addtl Request");
    myGrid.setInitWidths("160,*,*,*,*,*,*,*,*,*,*,*,*,*,*,*");
    myGrid.setColTypes("ro,ro,ro,ro,ro,ro,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed,ed")
    myGrid.groupBy(0);
myGrid.customGroupFormat=function(name,count){
return name;
}
    myGrid.setSkin("dhx_skyblue");
    myGrid.enableAutoWidth(true);
    myGrid.attachFooter(" , , , , , , , , , , , , , , , ")
    
    myGrid.init();
    myGrid.parse(massagedJsonData,"json");

However, all of the column data is aligned to the left. To confirm this I did a source view in IE 8 and got the following for each cell:

<td align="left" vAlign="middle" _cellIndex="15" _attrs="[object Object]" _clearCell="true">

Even though this cell was set to align right, the generated HTML still has a left align. The CSS and Javascript that i'm including in my JSP is:

<link rel="STYLESHEET" type="text/css" href="/ymus/common/dhtmlx/dhtmlx.css">
<link rel="STYLESHEET" type="text/css" href="/ymus/common/dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="/ymus/common/dhtmlx/dhtlmxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="/ymus/common/dhtmlx/dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script src="/ymus/common/dhtmlx/dhtmlx.js"></script>
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/dhtmlxgrid.js"></script>        
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_splt.js"></script>
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_group.js"></script>
<script src="/ymus/common/dhtmlx/dhtmlxGrid/codebase/ext/dhtmlxgrid_hextra.js"></script>

<script src="/ymus/common/dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js"/></script>
<script src="/ymus/common/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"/></script>

Thank you for your help.

Regards,

-Doug

Try to change the order of commands, set the setHeader first and all other configuration after it. 

I put the byGroup() method after the init() and that corrected the problem.   Thanks.